首页-导航条 |学习笔记

开发者学堂课程【移动 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 ;

}}}}

…

最终运行效果如下：