day 15
今日代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<!-- header开始 -->
<div class="header">
<div class="header_c inner_c">
<h1>
<a href="#">
青竹商城
</a>
</h1>
<div class="all_pro">
<a class="all-_type" href="#">查看所有类别<span class="icon"></span></a>
<div class="product">
<div class="inner inner_c">
<ul class="nav">
<li><a href="#">不锈钢</a></li>
<li><a href="#">原料</a></li>
<li><a href="#">塑料</a></li>
<li><a href="#">水泥</a></li>
<li><a href="#">陶瓷</a></li>
</ul>
<ul class="pic">
<li class="common_product">
<div class="pic1">
<img src="images/img25.png" alt="" title="精品原木餐盘">
</div>
<div class="content">
<p>精品原木餐盘</p>
<span>￥300</span>
</div>
<a href="" class="mask">
<span class="btn">查看详情</span>
</a>
</li>
<li class="common_product">
<div class="pic1">
<img src="images/img26.png" alt="" title="不锈钢时尚咖啡水壶">
</div>
<div class="content">
<p>不锈钢时尚咖啡水壶</p>
<span>￥400</span>
</div>
<a href="" class="mask">
<span class="btn">查看详情</span>
</a>
</li>
<li class="common_product">
<div class="pic1">
<img src="images/img27.png" alt="" title="经典系列计算器">
</div>
<div class="content">
<p>经典系列计算器</p>
<span>￥500</span>
</div>
<a href="" class="mask">
<span class="btn">查看详情</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- header结束 -->
</body>
</html>
/* 版心 */
.inner_c{
width: 1140px;
margin: 0 auto;
}
a{
text-decoration: none;
color:#333;
}
/* 公共样式 */
.mask{
width: 100%;
height: 100%;
background-color:rgba(0,0,0,0.2);
position: absolute;
left: 0;
top: 0;
}
.mask .btn{
display:block;
width: 138px;
height: 52px;
background-color: #C78A49;
color:#FFF;
position: absolute;
top:50%;
left: 50%;
margin-top:-26px;
margin-left:-69px;
text-align: center;
border-radius:4px;
line-height: 52px;
}
.common_product{
padding-top:20px;
position: relative;
}
.common_product .pic1{
width: 200px;
margin:0 auto;
}
.common_product .pic1 img{
width: 100%;
}
.common_product .content{
line-height:30px ;
font-size: 12px;
font-weight:700;
}
.common_product .content span{
color:red;
}
/* header部分 */
.header{
width: 100% ;
line-height: 68px;
text-align: center;
height: 68px;
font-size: 14px;
border-bottom:1px solid black;
box-shadow:4px 0px 2px 2px rgba(0,0,0,0.4);
position: relative;
}
.header .header_c{
height: 68px;
}
.header .header_c h1{
height: 68px;
width: 140px;
padding:0 15px;
float: left;
}
.header .header_c h1 a{
display:block;
text-indent: -100em;
overflow:hidden;
background:url(../images/logo.png) no-repeat center center;
}
.header .header_c .all_pro{
width: 168px;
float: left;
margin : 0 10px;
}
.header .header_c .all_pro .all-_type .icon{
display:block;
}
.header .header_c .all_pro .all-_type .icon{
display:inline-block;
width: 0;
height: 0;
border:5px solid transparent;
border-top-color:#333;
/* 边框的组成是楔形的，给一个宽高都为0的盒子加边框，边框的楔形就会近似为三角形，需要哪个方向的三角形直接设置border-top（例）-color：颜色，然后将border本来的颜色设置为透明，transparent */
position: relative;
top:3px;
left:5px;
}
/* 这里给.header .header_c .all_pro设置hover伪类而不给a设置是因为a标签的hover伪类后面显示的只能是文字，而我们弹出来的页面需要文字和图片一起，所以直接给pro设置hover伪类 */
.header .header_c .all_pro:hover .icon{
border-top-color:transparent;
border-bottom-color: #333;
top:-3px;
/*此时border-top-color已经设置成了透明的，所以当鼠标移动到这里时，只会显示border-bottom-color的颜色，但是显示的位置不对，所以直接设置top：-3px；相当于向下走了3px走到了正确的位置。*/
/* 这里可以直接设置top属性的原因是上面已经对span标签设置了相对定位，所以这里的span标签继承了上面的相对定位，无须再将其设置一次定位。 */
}
.header .header_c .all_pro .product{
width: 100%;
position: absolute;
left: 0;
top: 68px;
/* 如果不设置子绝父相的话，因为product盒子没有脱标，所以只会继承pro盒子的宽度，此时给该合资设置和header盒子子绝父相，则会继承header盒子的宽度。 */
/* display:none; */
/* 此时先隐藏这个下拉盒子 */
}
/* 当鼠标移上pro时，hover伪类属性就会让product盒子执行下列代码，从而显示出来。 */
.header .header_c .all_pro:hover:hover{
background-color: #E6D6C6;
}
.header .header_c .all_pro:hover .product{
display:block;
}
.header .header_c .all_pro .product .inner{
padding-left:250px;
}
.header .header_c .all_pro .product .inner .nav{
padding-top:40px;
text-indent:2em;
line-height:38px;
text-align: left;
width: 155px;
float: left;
}
.header .header_c .all_pro .product .inner .nav a:hover{
color:#E5C29C;
}
.header .header_c .all_pro .product .inner .pic{
width: 745px;
float: left;
margin-left:65px;
}
.header .header_c .all_pro .product .inner .pic li{
width: 248px;
height: 320px;
float: left;
}
效果图：
新增知识点
遮罩，mask属性
用于设置遮罩部分，可结合透明度来制造更好的效果
浙公网安备 33010602011771号