<html>
<head>
<meta charset="utf-8">
<title>CSS布局</title>
<style type="text/css">
*{
margin: 0;
padding:0;
}
.title{
width: 100%;
text-align: center;
padding-top:50px;
font-size: 36px;
font-weight: bold;
}
.middle{
width: 900px;
padding-top: 20px;
height: 500px;
margin: 0 auto;
}
.mid{
float:left;
width: 50%;
text-align: center;
}
.mid div img{
width: 426px;
height: 240px;
}
</style>
</head>
<body>
<section>
<div class="title">ENJOY THE LIFE</div>
<div class="middle">
<div class="mid">
<div><img src="http://climg.mukewang.com/58f829090001a4b504260240.jpg" alt=""></div>
<div>一大段字</div>
</div>
<div class="mid">
<div><img src="http://climg.mukewang.com/58f8290f0001558804260240.jpg" alt=""></div>
<div>一大段字</div>
</div>
</div>
</section>
</body>
</html>
最终的效果：
20181207213635302.png
网友评论