使用CSS模拟图片中红色区域的部分
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="./css/all.css">
<style>
/* 设置容器样式 */
.outer{
width: 240px;
margin: 100px auto;
/* 设置阴影 */
box-shadow: 0 0 6px rgba(0,0,0,.3);
}
/* 设置图片 */
.image-wrapper{
/* border:1px red solid; */
}
.image-wrapper img{
width: 100%;
/* 设置基线对齐 */
vertical-align: bottom;
}
.info{
padding:0 18px;
}
/* 设置标题 */
.info .title{
font-size:18px;
color:#717171;
margin:13px 0 15px 0;
}
.info .category{
color:#acaaaa;
font-size:14px;
}
.info .category i{
margin-left: 4px;
margin-right: 7px;
margin-bottom:18px;
}
.info .intro{
font-size:13px;
color:#acaaaa;
line-height: 1.4;
margin-left: 4px;
margin-bottom:18px;
}
/* 设置下边的样式 */
.star-wrapper{
height: 46px;
border-top:1px solid #e9e9e9;
line-height: 46px;
color:#ddd;
padding:0 16px;
}
/* 设置星星的样式 */
.star{
float: left;
}
.star-wrapper .weibo{
float:right;
}
.star-wrapper .light{
color:#b9cb41;
}
</style>
</head>
<body>
<!-- 创建外层容器 -->
<div class="outer">
<!-- 创建图片容器 -->
<div class="image-wrapper">
<img src="./1.png" alt="">
</div>
<!-- 创建内容容器 -->
<div class="info">
<h2 class="title">Animation films</h2>
<h3 class="category">
<i class="fas fa-map-marker-alt"></i>
Animations</h3>
<p class="intro">
Lorem lpsum is simply dummy text of the printing &typesetting industry.
</p>
</div>
<div class="line"></div>
<!-- 创建评分容器 -->
<div class="star-wrapper">
<!-- 创建星星 -->
<ul class="star">
<li class="fas fa-star light"></li>
<li class="fas fa-star light"></li>
<li class="fas fa-star"></li>
<li class="fas fa-star"></li>
<!-- 创建分享 -->
</ul>
<ul class="weibo">
<li class="fab fa-weibo"></li>
</ul>
</div>
</div>
</body>
</html>
效果
原图中的英文字体没有找到，只用了默认字体。
