【每日一练】186—一款大气漂亮的文章列表效果

每日一练1年前 (2023)发布 admin
1,437 0

以下是今天练习的最终效果:

【每日一练】186—一款大气漂亮的文章列表效果
HTML代码:
<!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>

CSS代码:
@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;
}

写在最后

以上就是每日一练的全部内容,希望今天的小练习对你有用,如果你觉得有帮助的话,请点赞我,关注我,并将它分享给你身边做开发的朋友,也许能够帮助到他。

我是杨小爱,我们明天见。

© 版权声明

相关文章

暂无评论

暂无评论...