释放双眼，带上耳机，听听看~！
目录
![[浮动运用]前端制作大气微信导航栏html+css完成插图](https://oss.zuike7.com/2022/05/20220513061426136.jpg?x-oss-process=image/auto-orient,1/quality,q_80/watermark,image_bG9nby5wbmc_eC1vc3MtcHJvY2Vzcz1pbWFnZS9yZXNpemUsUF8yMA,g_sw,t_60,x_10,y_10 "[浮动运用]前端制作大气微信导航栏html+css完成插图")
今天我们完成的就是常见的网页搭建页头,微信导航栏,也是运用html+css来完成对导航栏的搭建，开始之前，老规矩先把效果图晒一下 <body><!-- 页面的主体内容展示区域-->
<div class="nav"><!-- 最大盒子改名nav-->
<div class="nav1"> <!-- 装信息盒子改名nav1[版心]-->
<ul class="nav2"><!-- ul别名nav2-->
<li class="shouye"><a href="#">首页</a></li><!-- 文字首页加一个按钮效果用;别名改shouye-->
<li><a href="#">帮助</a></li>
<li><a href="#">公众</a></li>
<li><a href="#">微信</a></li>
<li><a href="#">支付</a></li>
<li><a href="#">网页</a></li>
<li><a href="#">表情</a></li>
<li><a href="#">广告</a></li>
</ul>
</div>
</div>
</body><!-- 页面的主体内容展示区域--><style> /* 样式初始化表*/
body,p,ul,h1,h2,ol,li,div{ /* 选择页面中所有存在的元素,设置样式*/
margin: 0;
padding:0
}
ul{
list-style: none;
}
a{
text-decoration: none;
} /* 选择页面中所有存在的元素,设置样式*/
.nav{
height:75px;/* 第一步:设置div高度*/
/*border:1px solid #000;*/第一步:设置div线框测试用*/
background: url("./demo2/topbg.jpg") repeat-x;/* 第一步:设置div背景图片*/
}
.nav1{
width:1000px;/* 第二步:设置div宽度*/
height:75px;/* 第二步:设置div高度*/
margin:auto;/* 第二步:设置div居中*/
background: url("./demo2/weixin.png") no-repeat 0px 15px;/* 第二步:设置div背景图片*/
}
.nav2{
line-height:75px;/*第五步:设置外盒子高度*/
margin-left:165px;/*第五步:改maegin,使文字左移*/
}
.nav2 li a {
color:#fff;/* 第三步:改a标签颜色*/
}
.nav2 li{
float:left;/* 第四步:改li浮动*/
width:104px;/*第七步:li加宽度,使li的按键均匀打开*/
text-align:center;/*第八步:文字水平居中*/
}
.nav2 li:hover{
background: url("./demo2/btn2.png") no-repeat 0px 20px;
}/*第六步:li加背景图,先加在li上最后做完后移到:hover里面*/
/*第九步:改背景图定位X于Y轴*//*第十一步:li背景信息移到:hover[步骤六提示]*/
.shouye{
background: url("./demo2/btn2.png") no-repeat 0px 20px;
} /*第十步:复制之前li的背景图信息给文字"首页"里面*/
/* 样式初始化表*/
</style>
文章链接：https://zuike7.com/192.html
文章标题：[浮动运用]前端制作大气微信导航栏html+css完成
文章版权：醉客网 (zuike7.com) 所发布的内容，部分为原创文章，转载请注明来源，网络转载文章如有侵权请联系我们！文字及下载资源均是用户投稿及网上搜集，仅供网友学习交流，请勿作他用。
本文最后更新发布于
文章标题：[浮动运用]前端制作大气微信导航栏html+css完成
文章版权：醉客网 (zuike7.com) 所发布的内容，部分为原创文章，转载请注明来源，网络转载文章如有侵权请联系我们！文字及下载资源均是用户投稿及网上搜集，仅供网友学习交流，请勿作他用。
本文最后更新发布于
2022年05月13日 14时14分47秒，某些文章具有时效性，若有错误或已失效，请在下方留言或联系醉疯怪：
[email protected]
