开发者学堂课程【移动 Web 前端开发：首页-导航条】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/594/detail/8499
首页-导航条
导航条
导航条的制作需要在 index 中导入图片，如下，…
</div>
<!--导航-->
<nav class="sn_nav">
<ul>
<ul><a href="#"><img src=" images/nave1. png" alt-=""/><p>分类</p></a></li>
<li><a href="#"><img src=" images/nav02. png" alt=""/><p>分类</p></a></li>
</ul>
…图片是 80 px，则要通过 rem 进行换算。model 中设置模块如下，
…
/*导航栏*/
.sn_ nav{
width: 100%;
u1{
width: 100%;
list-style: none;
padding: 20/@bs 0;
li{
width: 20%;
float: left;
.sn_search{
width: 100%;
height: 90/@bs;
background: @snColor;
position: fixed;
left: 0;
top: 0;
z-index: 999 ;
a{
display: block;
width: 100%;
text-decoration:none;
img{
display: block;
width: 80/@bs ;
height: 80/@bs;
margin: 0 auto;
p{
font-size: 24/@bs;
padding: 12/@bs 0;
text-align: center;
color:#666;
.sn_layout{
width: 100%;
max-width: 750px;
min-width: 320px;
margin: 0 auto;
padding-top: 90/@bs ;
}}}}
…
最终运行效果如下：
