一级导航
- 首先写页面结构，结构写好了再确定特效。在书写页面结构时，同时要确定每个块的宽高、位置，并通过设置颜色属性调试
- 在写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>