一级导航
首先写页面结构，结构写好了再确定特效。在书写页面结构时，同时要确定每个块的宽高、位置，并通过设置颜色属性调试
在写css特效时，首先要注意重置默认样式，即浏览器默认给的一些属性。例如，我们打开检查发现body有一个margin=8的属性，这是谷歌浏览器默认给的，要重置掉
Documentbody{
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。
当有文字时，最好就要给他大小，防止不同浏览器看到的效果不一样 */
}
二级导航
二级导航可以理解为，使一级导航的每个li对应一个区域，当鼠标滑到这个li时，就让区域显示出来。若我们将二级导航写在外边，还要用js强行联系，麻烦；不如直接写在一级导航的li里边
写样式时，经常遇到没有给距离样式，却莫名其妙的给了样式。这是由于样式污染，样式污染可能由命名重复、继承、优先级引起。在样式中，所有的文本样式会被继承(如字体大小、粗细、行高、行间距、文字对齐等)，我们可以从检查中的inherited from看到。
如何避免文本样式的继承污染呢？和文本有关的样式全部写在文本所在的元素，不要把文本样式写在结构父集中。
div ul li是结构标签，a h1 p是文本标签。我们之前把行高和行间距放到li里边了，所以出错，应该放到a标签里
完整代码
Documentbody{
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;
}
小米8
小米8
小米8
小米8
小米8小米8
小米8
小米8
小米8
小米8
小米8
小米8
小米8
小米8
小米8
小米8
小米8
来来来// 要变更所有的二级导航，因此要给所有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',
})
})
})
2699
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
