释放双眼,带上耳机,听听看~!
目录
<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><!-- 页面的主体内容展示区域-->
(二)css里代码
<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>