内补白:
head:
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.wrap{
padding: 10px 30px 50px 100px;
border: 2px solid #446644;
}
.content{
padding: 10px;
}
h1{
border-bottom: 8px double #007700;
padding-bottom: 10px;
text-align: center;
}
p{
padding: 0 20px 10px;
}
</style>
body:
<div class="wrap">
<div class="content">
<h1>内补白</h1>
<p>内补白的区域是从盒子边框到实际内容展示部分的区域,内补白也常用于对页面布局,使用内补白也可以控制不同盒子间内容的间隔。</p>
</div>
</div>
爱奇艺界面:
head:
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table{
margin: 200px auto;
}
table img{
width: 186px;
height: 278px;
opacity: 0.8;
border-radius: 5px;
}
table img:hover{
opacity: 1;
}
table td{
padding: 0 10px;
}
body{
background-color: black;
}
span{
background-color: #16e07a;
margin-left: 50px;
border-radius: 2px;
color: cornsilk;
}
.title{
font-size: 16px;
font-weight: bolder;
color: rgb(255, 255, 255);
}
.yy{
color: #999999;
font-size: 14px;
}
a{
text-decoration: none;
}
</style>
body:
<table>
<tr>
<td><a href=""><img src="img/1.webp"></a></td>
<td><a href=""><img src="img/2.webp"></a></td>
<td><a href=""><img src="img/3.webp"></a></td>
<td><a href=""><img src="img/4.webp"></a></td>
<td><a href=""><img src="img/5.webp"></a></td>
<td><a href=""><img src="img/6.webp"></a></td>
</tr>
<tr>
<td><a href="" class="title">人鱼之海牢物怪</a></td>
<td><a href="" class="title">流浪猫鲍勃</a></td>
<td><a href="" class="title">开拍吧电影</a></td>
<td><a href="" class="title">神都洛阳</a></td>
<td><a href="" class="title">陪你很久很久</a></td>
<td><a href="" class="title">卿卿我心</a></td>
</tr>
<tr>
<td><a href="" class="yy">9.1w人预约<span>预约</span></a></td>
<td><a href="" class="yy">7.5w人预约<span>预约</span></a></td>
<td><a href="" class="yy">13.9w人预约<span>预约</span></a></td>
<td><a href="" class="yy">8.7w人预约<span>预约</span></a></td>
<td><a href="" class="yy">3.8w人预约<span>预约</span></a></td>
<td><a href="" class="yy">34.6w人预约<span>预约</span></a></td>
</tr>
</table>
