以下是今天练习的最终效果：
<!DOCTYPE html>
<html>
<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>【每日一练】186—一款大气漂亮的文章列表效果</title>
<link rel=”stylesheet” href=”https://unpkg.com/ress/dist/ress.min.css”>
<link rel=”stylesheet” href=”css/style.css”>
</head>
<body><section>
<div class=”container”>
<figure>
<img src=”images/01.jpg”
alt=”一张有趣的PS创意合成图片”>
</figure>
<div class=”rightside”>
<h1>PS创意合成图片</h1>
<p>
非常有趣的PS创意照片；非常有趣的PS创意照片；非常有趣的PS创意照片；非常有趣的PS创意照片；</p>
</div>
</div>
<div class=”container”>
<div class=”rightside”>
<h1>PS创意合成图片</h1>
<p>
非常有趣的PS创意照片；非常有趣的PS创意照片；非常有趣的PS创意照片；非常有趣的PS创意照片；
</p>
</div>
<figure>
<img src=”images/02.jpg”
alt=”一张有趣的PS创意合成图片”>
</figure>
</div></section>
</body>
</html>
@charset “UTF-8”;
body{
background-color: #daf8d3;font-family: ‘Roboto’, sans-serif;
font-size: 1.2rem;
font-weight: 100;
letter-spacing: .1em;
line-height: 1.7rem;
}
section{
margin: 150px auto;
max-width: 1200px;
}.container{
display: flex;
margin:25px auto;
}figure {
border:2px #fafafa solid;
display: flex;
flex-flow: column;
padding: 5px;
max-width: 50%;
margin: auto;
}img {
max-width: 100%;
max-height: 100%;
}
.rightside{
background-color: #F2F2F2;
width: 50%;
padding: 5%;
}.rightside h1{
font-family: ‘Playfair Display SC’, serif;
font-size: 3.6rem;
letter-spacing: .05em;
line-height: 1.2em;margin-bottom: 4.8rem;
position: relative;
}.rightside h1::after{
content: “”;
width: 10%;
height: 1px;
background-color: black;position: absolute;
bottom: -30%;
left: 0;
}
以上就是每日一练的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
相关文章
