一级导航
首先写页面结构,结构写好了再确定特效。在书写页面结构时,同时要确定每个块的宽高、位置,并通过设置颜色属性调试
在写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;
}
// 要变更所有的二级导航,因此要给所有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',
})
})
})