HTML+CSS 简单的顶部导航栏菜单制作 |
您所在的位置：网站首页 › html怎么制作菜单 › HTML+CSS 简单的顶部导航栏菜单制作 |
HTML+CSS 简单的顶部导航栏菜单制作
|
大家好，又见面了，我是你们的朋友全栈君。 导航栏的制作：技术要求：CSSHTML各类标签实现目的：制作导航栏菜单 代码分析：基本样式清除无序列原点删除下划线删除文字默认居中a标签设置块级元素伪类选择器对a状态修饰分步实现：分三栏布局：使用浮动 logo一栏；选择栏一栏；搜索栏一栏logo部分：img标签，导入图片，a标签超链接 ，img导入图片，防止图片失真width和height设置一个就可以了 代码语言：javascript复制
选择栏：ul>li标签
列表标签，a标签超链接代码语言：javascript复制
猪脚面
叉烧面
肉丸面
卤蛋面
斋面
樱花面
猪脚叉烧面
猪脚卤蛋面
猪脚肉丸面
叉烧肉丸面
搜索栏：font表单，input属性，输入框和按钮 代码语言：javascript复制 实现分析：首先在body内设置一个站点的头部盒子，头部盒子里面有一个中心的盒子。 代码语言：javascript复制把logo，选择栏，搜索栏放入中心盒子中 代码语言：javascript复制 惠州客家面
猪脚面
叉烧面
肉丸面
卤蛋面
斋面
樱花面
猪脚叉烧面
猪脚卤蛋面
猪脚肉丸面
叉烧肉丸面
实现1： 在这里插入图片描述是不是感觉不够美观，我们使用CSS试试看吧！ CSS代码：删除a标签下划线，删除li无序列原点，在一行上显示。 代码语言：javascript复制.header{ width: 100%; height: 100px; background-color: rgb(207, 238, 238); position: relative; } .container{ width: 1226px; height: 20px; margin: 0 auto; } .header .logo{ float: left; margin-top: 25px; } .logo a{ display: block; width: 150px; height: 150px; } .header .list{ float: left; width: 820px; height: 88px; padding: 12px 0 0 30px; } clearfix::after{ content: ''; clear: both; display: block; } a{ text-decoration: none; } .header li{ float: left; list-style: none; } .list li{ padding: 28px 10px 38px ; display: block; color: rgb(68, 57, 5); } .search{ float: right; width: 296px; margin-top: 10px; position: absolute; top: 28px; right: 53px; } .search form{ height: 50px; width: 296px; } .content1{ display: block; width: 223px; height: 48px; border: 1px solid #e0e0e0; padding: 0 10px; float:right; } .search1{ width: 49px; height: 49px; float: right; } .list li:hover{ color: rgb(168, 81, 81); font-size: larger; }使用外部式引入：代码语言：javascript复制最后梳理一下：创建一个HTML文件，输入以下代码 代码语言：javascript复制 惠州客家面
猪脚面
叉烧面
肉丸面
卤蛋面
斋面
樱花面
猪脚叉烧面
猪脚卤蛋面
猪脚肉丸面
叉烧肉丸面
创建一个CSS文件，输入以下代码。 代码语言：javascript复制.header{ width: 100%; height: 100px; background-color: rgb(207, 238, 238); position: relative; } .container{ width: 1226px; height: 20px; margin: 0 auto; } .header .logo{ float: left; margin-top: 25px; } .logo a{ display: block; width: 150px; height: 150px; } .header .list{ float: left; width: 820px; height: 88px; padding: 12px 0 0 30px; } clearfix::after{ content: ''; clear: both; display: block; } a{ text-decoration: none; } .header li{ float: left; list-style: none; } .list li{ padding: 28px 10px 38px ; display: block; color: rgb(68, 57, 5); } .search{ float: right; width: 296px; margin-top: 10px; position: absolute; top: 28px; right: 53px; } .search form{ height: 50px; width: 296px; } .content1{ display: block; width: 223px; height: 48px; border: 1px solid #e0e0e0; padding: 0 10px; float:right; } .search1{ width: 49px; height: 49px; float: right; } .list li:hover{ color: rgb(168, 81, 81); font-size: larger; } 实现2： 在这里插入图片描述鼠标动一下图标，字体可以变大哦。 制作攻略：把logo的位置换成你图片的位置，alt属性是网页图片展示不出来时的字。“li”标签里的a属性超链接想要链接的网页，“li”标签里面的文字换成你想要的的文字背景颜色在CSS中**.header中的background-color:**进行修改，变成你想要的的颜色。对于“li”标签中字体的特效，在CSS中**.list li:hover**进行修改。 变色： 代码语言：javascript复制.header{ width: 100%; height: 100px; background-color: rgb(207, 238, 238); position: relative; }标签特效： 代码语言：javascript复制.list li:hover{ color: rgb(168, 81, 81); font-size: larger; } 感谢你的阅读，相信你一定也做出了你想要的的导航栏吧！不足之处欢迎批评指正！发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/140476.html原文链接：https://javaforall.cn |
【本文地址】