一、穷游练习
html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>穷游练习</title>
<link rel="stylesheet" type="text/css" href="2019.11.1.css"/>
</head>
<body>
<div id="body">
<div id="title">
热门游记与话题
</div>
<div id="content">
<div class="box">
<div class="leftTilite">
精华
</div>
<div class="head h1"></div>
<span>MagicRabbit</span>
<div class="inboxTop">
<img src="../image/美女1.jpg" >
</div>
<div class="inboxbottom">
<div class="text">
【七国混血国境之南】越南--永不结束的夏天，永不褪色的诗意
</div>
</div>
</div>
<div class="box">
<div class="leftTilite">
精华
</div>
<div class="head h2"></div>
<span>ImJessieTsai</span>
<div class="inboxTop">
<img src="../image/美女2.jpg" >
</div>
<div class="inboxbottom">
<div class="text">
巴基斯坦|和你想象中有点不一样（附详细攻略）
</div>
</div>
</div>
<div class="box">
<div class="leftTilite">
精华
</div>
<div class="head h3"></div>
<span>Fiorelady</span>
<div class="inboxTop">
<img src="../image/美女3.jpg" >
</div>
<div class="inboxbottom">
<div class="text">
下一站 首尔，一个你始终玩不透的城市，不同寻常的大学生轻奢之旅
</div>
</div>
</div>
<div class="box">
<div class="leftTilite">
精华
</div>
<div class="head h4"></div>
<span>小英英的极暇游</span>
<div class="inboxTop">
<img src="../image/美女4.jpg" >
</div>
<div class="inboxbottom">
<div class="text">
风光大洋路，萌宠袋鼠岛 - Butterfly & Pig 2019的南澳自驾春游记
</div>
</div>
</div>
<div class="box">
<div class="leftTilite">
精华
</div>
<div class="head h5"></div>
<span>Cafe_Chen</span>
<div class="inboxTop">
<img src="../image/美女5.jpg" >
</div>
<div class="inboxbottom">
<div class="text">
MSC地中海辉煌号邮轮：乐高、迪士尼、海上大(yang)剧(zhu)院(chang)
</div>
</div>
</div>
<div class="box">
<div class="leftTilite">
精华
</div>
<div class="head h6"></div>
<span>Alexfish</span>
<div class="inboxTop">
<img src="../image/美女6.jpg" >
</div>
<div class="inboxbottom">
<div class="text">
不正常山峰博物馆——幻境多洛米蒂梦游记（全文完）
</div>
</div>
</div>
<div class="box">
<div class="leftTilite">
精华
</div>
<div class="head h7"></div>
<span>小英英的极暇游</span>
<div class="inboxTop">
<img src="../image/美女7.jpg" >
</div>
<div class="inboxbottom">
<div class="text">
【慢游欧洲日记12】短暂紧凑的瑞士小城游（卢塞恩-因特拉肯-伯尔尼-图恩）
</div>
</div>
</div>
<div class="box">
<div class="leftTilite">
精华
</div>
<div class="head h8"></div>
<span>超级大橙子</span>
<div class="inboxTop">
<img src="../image/美女8.jpg" >
</div>
<div class="inboxbottom">
<div class="text">
菲律宾丨海底两万里，坠入深蓝
</div>
</div>
</div>
</div>
</div>
</body>
</html>
css：
#body{
width: 90%;
height: 1000px;
margin-left: 5%;
}
#title{
height: 70px;
line-height: 70px;
color: #636363;
font-size: 37px;
font-weight: 500;
text-align: center;
}
#content{
position: relative;
justify-content: space-between;
flex-wrap: wrap;
display: flex;
height: 635px;
width: 100%;
}
.box{
position: relative;
border: 1px solid rgba(0,0,0,0.1);
box-sizing: border-box;
height: 300px;
width: 24%;
}
.box:hover{
cursor: pointer;
box-shadow: 0 0 6px rgba(0,0,0,.3);
}
.inboxTop{
z-index: 1;
position: relative;
height: 65%;
width: 100%;
overflow: hidden;
}
.inboxTop img{
height: 100%;
width: 100%;
transition: 1.5s;
}
.box:hover img{
transform: scale(1.2,1.2);
}
.head{
box-sizing: border-box;
border: 4px solid white;
width: 60px;
height: 60px;
margin-top: 167px;
margin-left: 16px;
position: absolute;
border-radius:30px ;
z-index: 2;
}
.h1{
background: url(../image/头1.jpg);
background-size: 100% 100%;
}
.h2{
background: url(../image/头2.jpg);
background-size: 100% 100%;
}
.h3{
background: url(../image/头3.jpg);
background-size: 100% 100%;
}
.h4{
background: url(../image/头4.jpg);
background-size: 100% 100%;
}
.h5{
background: url(../image/头5.jpg);
background-size: 100% 100%;
}
.h6{
background: url(../image/头6.jpg);
background-size: 100% 100%;
}
.h7{
background: url(../image/头7.jpg);
background-size: 100% 100%;
}
.h8{
background: url(../image/头8.jpg);
background-size: 100% 100%;
}
span{
margin-top: 199px;
margin-left: 87px;
position: absolute;
z-index: 2;
color: #636363;
}
span:hover{
cursor: pointer;
color: #10b041;
}
.inboxbottom{
box-sizing: border-box;
text-align: center;
height: 35%;
width: 100%;
background-color: white;
color: #323232;
font-weight: 600;
font-size: 16px;
padding: 41px 15px 0 15px;
}
.inboxbottom:hover{
cursor: pointer;
color: #10b041;
}
.text{
height: 46px;
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
}
.leftTilite{
position: absolute;
width: 55px;
height: 30px;
z-index: 3;
margin-left: -5px;
margin-top: 10px;
background-color: #FE7369;
text-align: center;
line-height: 30px;
color: white;
}
二、代码
box-shadow: 0 0 6px rgba(0,0,0,.3); 四周阴影
<div class="head h3"></div> 双id的div