首页-导航栏|学习笔记

开发者学堂课程【移动 Web 前端开发：首页-导航栏】学习笔记，与课程紧密联系，让用户快速学习知识。

课程地址：https://developer.aliyun.com/learning/course/594/detail/8407

首页-导航栏

一、导航栏

1、导航有8个元素，分成两排，每一个占25%，

2、在 index.html 里面输入：

く!--导航栏-->

<nav class="jd_ nav' '>

<ul class=“clearfix”>  里面有li

<li><a href="#">img src=“images/nav0.png”alt=“”/><p>分类</p></a></li>

<li><a href="#">img src=“images/nav1.png”alt=“”/><p>分类</p></a></li>

<li><a href="#">img src=“images/nav2.png”alt=“”/><p>分类</p></a></li>

<li><a href="#">img src=“images/nav3.png”alt=“”/><p>分类</p></a></li>

<li><a href="#">img src=“images/nav4.png”alt=“”/><p>分类</p></a></li>

<li><a href="#">img src=“images/nav5.png”alt=“”/><p>分类</p></a></li>

<li><a href="#">img src=“images/nav6.png”alt=“”/><p>分类</p></a></li>

<li><a href="#">img src=“images/nav7.png”alt=“”/><p>分类</p></a></li>

li里面要有图标和文字，并且这些都是可以点击的，有8个，导航栏的结构就齐了。

</ul>

</nav>

3、在 index.css 里面输入：

/*导航栏*/

·jd_nav{

width: 100%;   宽度100%。

}

.jd_ nav ul{

width:100%;  

上面给一点间距，下面也给一点间距，不要贴在一起。左右没有。

padding: 0 10px;  上下10px。

}

.jd_ nav ul li{

width:25%;宽度25%。

float: left;放不下自动掉一行，每行放四个。

}

.jd_ nav. ul li a {

display: block;

width:100%;  宽度是li的100%。

}

jd_ nav ul 1i a img{

img 是固定的，查看样式是 40，正好是压缩了一倍，原始尺寸是 80*80。

width: 40px;  宽度40px。

height: 40px;  高度40px。

d1splay: block;

margin: 0 auto; 居中。

}

jd_nav ul li a p{

color: #666;  文字颜色

font-size: 12px;

padding: 5px 0; 上下来一点间距。

text-alingn:center

}

刷新一下页面，如图所示。

4、导航栏模块加上 <ul class=“clearfix”>  ，轮播图模块也加上<ul class=“clearfix”>  

5、修改一下

.jd_ nav ul{

width :100%;

padding:10px  0;  上下10px，左右不需要。

刷新一下就有间距了。

6、差一个下边框，在  ul 位置输入：

border- bottom: 1px solid # ccc

7、背景颜色应该是灰色的，中间应该有一个灰色的间隔。在 index.css 中输入

body{

background: #f5f5f5;

找到 ul，输入

.jd_ nav{

Width: 100%;

background :#fff ;