共计 13685 个字符，预计需要花费 35 分钟才能阅读完成。
一级导航
- 首先写页面结构，结构写好了再确定特效。在书写页面结构时，同时要确定每个块的宽高、位置，并通过设置颜色属性调试
- 在写 css 特效时，首先要注意重置默认样式，即浏览器默认给的一些属性。例如，我们打开检查发现 body 有一个 margin= 8 的属性，这是谷歌浏览器默认给的，要重置掉
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
body{margin: 0;}
ul{
margin: 0;
padding: 0;
list-style-type:none;
}
a{
text-decoration: none;
/* 去掉下划线 */
}
/* 上边的 ul 和 body、a 都是为了重置浏览器的默认样式
注意，重置默认样式时通过元素名直接修改，这是因为若 ul 有这样的默认样式，那么所有的 ul 都会有，通过元素名可以直接全部修改掉 */
#banner{
/* 先设置大小宽高：可以用 qq 截图测量 */
width: 1250px;
height: 460px;
/* color 刚开始设置上，是为了便于调试，看看大小位置设置对了没 */
background: aqua;
/* 页面的主要内容区永远在中间，可以通过外边距进行调整
直接调父集元素的外边距，子集也会随着往中间跑，这也是我们写 css 为什么要从父集写到子集 */
margin: 260px auto;
}
.nav{
width: 236px;
height: 460px;
background: rgba(0, 0, 0, .6);
/* css3 中自带的颜色格式，第四个参数表示透明度 */
}
.nav-list{
padding: 20px 0;
width: 236px;
/* height: 460px; */
height: 420px;
/* 这里 460 是错误的，因为元素的大小包括内边距，所以 460 要减去两个 20 */
position: relative;
/* 这里的相对定位，是为了给二级导航的绝对定位作参考 */
}
.nav-item-first{
width: 100%;
height: 42px;
/* text-indent: 30px;
首行缩进
line-height: 42px;
垂直居中：通过设置行高和盒子高度相等，让文字垂直居中 */
}
.nav-item-first:hover{background: #ff9900;}
.first-link{
text-indent: 30px;
line-height: 42px;
/* width: 100%;
height: 42px; */
/* 这里 a 标签是行内元素，无法设置宽高，给了也不管用 */
/* 元素有三种：块元素、行内元素、行内块元素
只有块元素和行内块元素才能设置宽高
为了保证最大兼容尺度，我们通常选用块元素
这是因为行内块元素是 css3 新增的性质，若浏览器版本过低，无法识别 */
display: block;
color: #fff;
font-size: 14px;
/* 每个浏览器有固定的默认文字大小，例如谷歌是 16px。当有文字时，最好就要给他大小，防止不同浏览器看到的效果不一样 */
}
</style>
</head>
<body>
<div id="banner">
<div class="nav">
<ul class="nav-list">
<li class="nav-item-first">
<a href=""class="fisrst-link"> 手机 电话卡 </a>
<!-- <div class="show-warp">
<ul class="item-warp">
<li class="shop-item"><img src=""alt=""><a></a></li>
<li class="shop-item"><img src=""alt=""><a></a></li>
<li class="shop-item"><img src=""alt=""><a></a></li>
<li class="shop-item"><img src=""alt=""><a></a></li>
<li class="shop-item"><img src=""alt=""><a></a></li>
<li class="shop-item"><img src=""alt=""><a></a></li>
<li class="shop-item"><img src=""alt=""><a></a></li>
<li class="shop-item"><img src=""alt=""><a></a></li>
<li class="shop-item"><img src=""alt=""><a></a></li>
<li class="shop-item"><img src=""alt=""><a></a></li>
<li class="shop-item"><img src=""alt=""><a></a></li>
<li class="shop-item"><img src=""alt=""><a></a></li>
<li class="shop-item"><img src=""alt=""><a></a></li>
<li class="shop-item"><img src=""alt=""><a></a></li>
<li class="shop-item"><img src=""alt=""><a></a></li>
<li class="shop-item"><img src=""alt=""><a></a></li>
<li class="shop-item"><img src=""alt=""><a></a></li>
</ul>
</div> -->
</li>
<li class="nav-item-first">
<a href=""class="fisrst-link"> 电视盒子 </a>
<div class="show-warp">
<ul class="itemwarp">
</ul>
</div>
</li>
<li class="nav-item-first">
<a href=""class="fisrst-link"> 笔记本 </a>
<div class="show-warp">
<ul class="itemwarp">
</ul>
</div>
</li>
<li class="nav-item-first">
<a href=""class="fisrst-link"> 智能家电 </a>
<div class="show-warp">
<ul class="itemwarp">
</ul>
</div>
</li>
<li class="nav-item-first">
<a href=""class="fisrst-link"> 健康家居 </a>
<div class="show-warp">
<ul class="itemwarp">
</ul>
</div>
</li>
<li class="nav-item-first">
<a href=""class="fisrst-link"> 出行 儿童 </a>
<div class="show-warp">
<ul class="itemwarp">
</ul>
</div>
</li>
<li class="nav-item-first">
<a href=""class="fisrst-link"> 路由器 手机配件 </a>
<div class="show-warp">
<ul class="itemwarp">
</ul>
</div>
</li>
<li class="nav-item-first">
<a href=""class="fisrst-link"> 移动电源 插线板 </a>
<div class="show-warp">
<ul class="itemwarp">
</ul>
</div>
</li>
<li class="nav-item-first">
<a href=""class="fisrst-link"> 耳机音响 </a>
<div class="show-warp">
<ul class="itemwarp">
</ul>
</div>
</li>
<li class="nav-item-first">
<a href=""class="fisrst-link"> 生活 米兔 </a>
<div class="show-warp">
<ul class="itemwarp">
</ul>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>二级导航
- 二级导航可以理解为，使一级导航的每个 li 对应一个区域，当鼠标滑到这个 li 时，就让区域显示出来。若我们将二级导航写在外边，还要用 js 强行联系，麻烦；不如直接写在一级导航的 li 里边
- 写样式时，经常遇到没有给距离样式，却莫名其妙的给了样式。这是由于样式污染，样式污染可能由命名重复、继承、优先级引起。在样式中，所有的文本样式会被继承（如字体大小、粗细、行高、行间距、文字对齐等），我们可以从检查中的 inherited from 看到。
- 如何避免文本样式的继承污染呢？和文本有关的样式全部写在文本所在的元素，不要把文本样式写在结构父集中。
- div ul li 是结构标签，a h1 p 是文本标签。我们之前把行高和行间距放到 li 里边了，所以出错，应该放到 a 标签里
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
body{margin: 0;}
ul{
margin: 0;
padding: 0;
list-style-type:none;
}
a{
text-decoration: none;
/* 去掉下划线 */
text-indent: 30px;
/* 首行缩进 */
line-height: 42px;
/* 垂直居中：通过设置行高和盒子高度相等，让文字垂直居中 */
}
/* 上边的 ul 和 body、a 都是为了重置浏览器的默认样式
注意，重置默认样式时通过元素名直接修改，这是因为若 ul 有这样的默认样式，那么所有的 ul 都会有，通过元素名可以直接全部修改掉 */
#banner{
/* 先设置大小宽高：可以用 qq 截图测量 */
width: 1250px;
height: 460px;
/* color 刚开始设置上，是为了便于调试，看看大小位置设置对了没 */
background: aqua;
/* 页面的主要内容区永远在中间，可以通过外边距进行调整
直接调父集元素的外边距，子集也会随着往中间跑，这也是我们写 css 为什么要从父集写到子集 */
margin: 260px auto;
}
.nav{
width: 236px;
height: 460px;
background: rgba(0, 0, 0, .6);
/* css3 中自带的颜色格式，第四个参数表示透明度 */
}
.nav-list{
padding: 20px 0;
width: 236px;
/* height: 460px; */
height: 420px;
/* 这里 460 是错误的，因为元素的大小包括内边距，所以 460 要减去两个 20 */
position: relative;
/* 这里的相对定位，是为了给二级导航的绝对定位作参考 */
}
.nav-item-first{
width: 100%;
height: 42px;
/* text-indent: 30px;
首行缩进
line-height: 42px;
垂直居中：通过设置行高和盒子高度相等，让文字垂直居中 */
}
.nav-item-first:hover{background: #ff9900;}
.first-link{
text-indent: 30px;
line-height: 42px;
/* width: 100%;
height: 42px; */
/* 这里 a 标签是行内元素，无法设置宽高，给了也不管用 */
/* 元素有三种：块元素、行内元素、行内块元素
只有块元素和行内块元素才能设置宽高
为了保证最大兼容尺度，我们通常选用块元素
这是因为行内块元素是 css3 新增的性质，若浏览器版本过低，无法识别 */
display: block;
color: #fff;
font-size: 14px;
/* 每个浏览器有固定的默认文字大小，例如谷歌是 16px。当有文字时，最好就要给他大小，防止不同浏览器看到的效果不一样 */
}
.show-warp{
display: none;
/* 让元素彻底隐藏 */
height: 460px;
/* height: 460px;
width: 500px;
background: #000; */
/* 在二级导航中，高度可以设置清楚，但是宽度不是固定的，而是根据商品个数自动收缩
这里设置宽高颜色，是为了调试其位置 */
position: absolute;
/* 为了改变元素的位置，我们给元素一个绝对定位 */
/* 接下来要考虑相对定位（即对应的参考系）是谁，若参考 li，那么每个元素的父集 li 位置都是不同的，没法一起表示
因此把 ul 作为参考系 */
left: 236px;
top: 0;
background: #fff;
box-shadow: 0 5px 30px #c5c5c5;
/* 阴影层 */
}
.nav-item-first:hover .show-warp{
display: block;
/* 鼠标划过时，显示元素 */
}
.shop-item{
position: absolute;
width: 265px;
height: 76px;
line-height: 76px;
}
.shop-item img{
vertical-align: middle;
/* 改变图片和旁边内容的对齐方式
默认是图片和文字底部对齐 */
margin: 0 20px 16px;
}
</style>
</head>
<body>
<div id="banner">
<div class="nav">
<ul class="nav-list">
<li class="nav-item-first">
<a href=""class="fisrst-link"> 手机 电话卡 </a>
<div class="show-warp">
<ul class="item-warp">
<li class="shop-item"><img src="images/1/1.png" alt=""width="40"height="40"><a> 小米 8 </a></li>
<li class="shop-item"><img src="images/1/2.jpg" alt=""width="40"height="40"><a> 小米 8 </a></li>
<li class="shop-item"><img src="images/1/3.png" alt=""width="40"height="40"><a> 小米 8 </a></li>
<li class="shop-item"><img src="images/1/4.png" alt=""width="40"height="40"><a> 小米 8 </a></li>
<li class="shop-item"><img src="images/1/5.jpg" alt=""width="40"height="40"><a> 小米 8 小米 8 </a></li>
<li class="shop-item"><img src="images/1/6.jpg" alt=""width="40"height="40"><a> 小米 8 </a></li>
<li class="shop-item"><img src="images/1/7.png" alt=""width="40"height="40"><a> 小米 8 </a></li>
<li class="shop-item"><img src="images/1/8.png" alt=""width="40"height="40"><a> 小米 8 </a></li>
<li class="shop-item"><img src="images/1/9.png" alt=""width="40"height="40"><a> 小米 8 </a></li>
<li class="shop-item"><img src="images/1/10.jpg" alt=""width="40"height="40"><a> 小米 8 </a></li>
<li class="shop-item"><img src="images/1/11.jpg" alt=""width="40"height="40"><a> 小米 8 </a></li>
<li class="shop-item"><img src="images/1/12.jpg" alt=""width="40"height="40"><a> 小米 8 </a></li>
<li class="shop-item"><img src="images/1/13.png" alt=""width="40"height="40"><a> 小米 8 </a></li>
<li class="shop-item"><img src="images/1/14.png" alt=""width="40"height="40"><a> 小米 8 </a></li>
<li class="shop-item"><img src="images/1/15.png" alt=""width="40"height="40"><a> 小米 8 </a></li>
<li class="shop-item"><img src="images/1/16.png" alt=""width="40"height="40"><a> 小米 8 </a></li>
<li class="shop-item"><img src="images/1/17.png" alt=""width="40"height="40"><a> 来来来 </a></li>
</ul>
</div>
</li>
<li class="nav-item-first">
<a href=""class="fisrst-link"> 电视盒子 </a>
<div class="show-warp">
<ul class="item-warp">
<li class="shop-item"><img src="images/1/1.png" alt=""width="40"height="40"><a> 小米 8 </a></li>
<li class="shop-item"><img src="images/1/2.jpg" alt=""width="40"height="40"><a> 小米 8 </a></li>
<li class="shop-item"><img src="images/1/3.png" alt=""width="40"height="40"><a> 小米 8 </a></li>
<li class="shop-item"><img src="images/1/4.png" alt=""width="40"height="40"><a> 小米 8 </a></li>
<li class="shop-item"><img src="images/1/5.jpg" alt=""width="40"height="40"><a> 小米 8 小米 8 </a></li>
<li class="shop-item"><img src="images/1/6.jpg" alt=""width="40"height="40"><a> 小米 8 </a></li>
<li class="shop-item"><img src="images/1/7.png" alt=""width="40"height="40"><a> 小米 8 </a></li>
<li class="shop-item"><img src="images/1/8.png" alt=""width="40"height="40"><a> 小米 8 </a></li>
<li class="shop-item"><img src="images/1/9.png" alt=""width="40"height="40"><a> 小米 8 </a></li>
<li class="shop-item"><img src="images/1/10.jpg" alt=""width="40"height="40"><a> 小米 8 </a></li>
<li class="shop-item"><img src="images/1/1.png" alt=""width="40"height="40"><a> 小米 8 </a></li>
<li class="shop-item"><img src="images/1/2.jpg" alt=""width="40"height="40"><a> 小米 8 </a></li>
<li class="shop-item"><img src="images/1/3.png" alt=""width="40"height="40"><a> 小米 8 </a></li>
<li class="shop-item"><img src="images/1/4.png" alt=""width="40"height="40"><a> 小米 8 </a></li>
<li class="shop-item"><img src="images/1/5.jpg" alt=""width="40"height="40"><a> 小米 8 小米 8 </a></li>
<li class="shop-item"><img src="images/1/6.jpg" alt=""width="40"height="40"><a> 小米 8 </a></li>
<li class="shop-item"><img src="images/1/7.png" alt=""width="40"height="40"><a> 小米 8 </a></li>
<li class="shop-item"><img src="images/1/8.png" alt=""width="40"height="40"><a> 小米 8 </a></li>
<li class="shop-item"><img src="images/1/9.png" alt=""width="40"height="40"><a> 小米 8 </a></li>
<li class="shop-item"><img src="images/1/10.jpg" alt=""width="40"height="40"><a> 小米 8 </a></li>
<li class="shop-item"><img src="images/1/11.jpg" alt=""width="40"height="40"><a> 小米 8 </a></li>
<li class="shop-item"><img src="images/1/12.jpg" alt=""width="40"height="40"><a> 小米 8 </a></li>
<li class="shop-item"><img src="images/1/13.png" alt=""width="40"height="40"><a> 小米 8 </a></li>
<li class="shop-item"><img src="images/1/14.png" alt=""width="40"height="40"><a> 小米 8 </a></li>
<li class="shop-item"><img src="images/1/15.png" alt=""width="40"height="40"><a> 小米 8 </a></li>
<li class="shop-item"><img src="images/1/16.png" alt=""width="40"height="40"><a> 小米 8 </a></li>
<li class="shop-item"><img src="images/1/17.png" alt=""width="40"height="40"><a> 来来来 </a></li>
</ul>
</div>
</li>
<li class="nav-item-first">
<a href=""class="fisrst-link"> 笔记本 </a>
<div class="show-warp">
<ul class="item-warp">
<<li class="shop-item"><img src="images/1/1.png" alt=""width="40"height="40"><a> 小米 8 </a></li>
<li class="shop-item"><img src="images/1/2.jpg" alt=""width="40"height="40"><a> 小米 8 </a></li>
<li class="shop-item"><img src="images/1/3.png" alt=""width="40"height="40"><a> 小米 8 </a></li>
<li class="shop-item"><img src="images/1/4.png" alt=""width="40"height="40"><a> 小米 8 </a></li>
<li class="shop-item"><img src="images/1/5.jpg" alt=""width="40"height="40"><a> 小米 8 小米 8 </a></li>
<li class="shop-item"><img src="images/1/6.jpg" alt=""width="40"height="40"><a> 小米 8 </a></li>
<li class="shop-item"><img src="images/1/7.png" alt=""width="40"height="40"><a> 小米 8 </a></li>
<li class="shop-item"><img src="images/1/8.png" alt=""width="40"height="40"><a> 小米 8 </a></li>
<li class="shop-item"><img src="images/1/9.png" alt=""width="40"height="40"><a> 小米 8 </a></li>
<li class="shop-item"><img src="images/1/10.jpg" alt=""width="40"height="40"><a> 小米 8 </a></li>
</ul>
</div>
</li>
<li class="nav-item-first">
<a href=""class="fisrst-link"> 智能家电 </a>
<div class="show-warp">
<ul class="item-warp">
<li class="shop-item"><img src="images/1/1.png" alt=""width="40"height="40"><a>1</a></li>
<li class="shop-item"><img src="images/1/2.jpg" alt=""width="40"height="40"><a>2</a></li>
<li class="shop-item"><img src="images/1/3.png" alt=""width="40"height="40"><a>3</a></li>
<li class="shop-item"><img src="images/1/4.png" alt=""width="40"height="40"><a>3</a></li>
<li class="shop-item"><img src="images/1/5.jpg" alt=""width="40"height="40"><a>5</a></li>
<li class="shop-item"><img src="images/1/6.jpg" alt=""width="40"height="40"><a>6</a></li>
<li class="shop-item"><img src="images/1/7.png" alt=""width="40"height="40"><a>4</a></li>
<li class="shop-item"><img src="images/1/8.png" alt=""width="40"height="40"><a>5</a></li>
<li class="shop-item"><img src="images/1/9.png" alt=""width="40"height="40"><a>4</a></li>
<li class="shop-item"><img src="images/1/10.jpg" alt=""width="40"height="40"><a>4</a></li>
</ul>
</div>
</li>
<li class="nav-item-first">
<a href=""class="fisrst-link"> 健康家居 </a>
<div class="show-warp">
<ul class="item-warp">
<li class="shop-item"><img src="images/1/1.png" alt=""width="40"height="40"><a> 小米 8 </a></li>
<li class="shop-item"><img src="images/1/2.jpg" alt=""width="40"height="40"><a> 小米 8 </a></li>
<li class="shop-item"><img src="images/1/3.png" alt=""width="40"height="40"><a> 小米 8 </a></li>
<li class="shop-item"><img src="images/1/4.png" alt=""width="40"height="40"><a> 小米 8 </a></li>
</ul>
</div>
</li>
<li class="nav-item-first">
<a href=""class="fisrst-link"> 出行 儿童 </a>
<div class="show-warp">
<ul class="item-warp">
</ul>
</div>
</li>
<li class="nav-item-first">
<a href=""class="fisrst-link"> 路由器 手机配件 </a>
<div class="show-warp">
<ul class="item-warp">
</ul>
</div>
</li>
<li class="nav-item-first">
<a href=""class="fisrst-link"> 移动电源 插线板 </a>
<div class="show-warp">
<ul class="item-warp">
</ul>
</div>
</li>
<li class="nav-item-first">
<a href=""class="fisrst-link"> 耳机音响 </a>
<div class="show-warp">
<ul class="item-warp">
</ul>
</div>
</li>
<li class="nav-item-first">
<a href=""class="fisrst-link"> 生活 米兔 </a>
<div class="show-warp">
<ul class="item-warp">
</ul>
</div>
</li>
</ul>
</div>
</div>
<!-- 这里我们使用 jQuery，但是不用下载 jQuery，而是通过 jQuery CDN 的引入 -->
<script type="text/javascript" src="http://code.jquery.com/jquery-2.2.4.js"></script>
<!-- 这里要注意的是，jQueryCDN 的引入可能因为网络不好而失效 -->
<script type="text/javascript">
// 要变更所有的二级导航，因此要给所有 show-warp 的所有 shop-item 设置
$(".show-warp").each(function(){
// 获取当前 show-warp 的所有 li
var oLi=$(this).find(".shop-item");
// 获取 li 的高度和宽度
var height=oLi.height();
var width=oLi.width();
// 获取 li 的个数
var length=oLi.length;
// 通过个数确定有几竖列
var col=Math.ceil(length/6);// 向上取整
// 得到当前 show-warp 的宽度
$(this).width(col*width);
// 给所有的 li 摆位置
oLi.each(function(i){// i 表示当前个数
var x=Math.floor(i/6);// 向下取整
var y=i%6;
$(this).css({
left:x*width+'px',
top:y*height+'px',
})
})
})
</script>
</body>
</html>
正文完
