电影图片(CSS练习5)
效果截图
代码部分
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=dit, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./fa/css/font-awesome.css">
<style>
.outer{
width: 257px;
background-color: #fdfefd;
margin: 50px auto;
}
.info{
color: #a8a9a8;
margin: 0 15px;
}
.info .title{
font-size: 20px;
margin: 15px 0;
}
.info .detail{
line-height: 20px;
margin: 20px 0;
}
.star-wrapper{
height: 46px;
line-height: 46px;
color: #a8a9a8;
border-top: 1px solid #d4d5d4;
}
.star{
float: left;
margin-left: 15px;
}
.star .light{
color: #e6f143;
}
.web{
float: right;
margin-right: 5px;
}
</style>
</head>
<body>
<!-- 创建外部容器 -->
<div class="outer">
<!-- 图片容器 -->
<div class="img-wrapper">
<img src="./img/07/1.png" alt="">
</div>
<!-- 中间内容容器 -->
<div class="info">
<div class="title">动画电影</div>
<div class="category"> <i class="fa fa-map-marker"></i> 动画</div>
<div class="detail">这是一部迪士尼动画电影,非常好看!!!</div>
</div>
<!-- 评价容器 -->
<div class="star-wrapper">
<ul class="star">
<li class="fa fa-star light"></li>
<li class="fa fa-star light"></li>
<li class="fa fa-star"></li>
<li class="fa fa-star"></li>
</ul>
<ul class="web">
<i class="fa fa-weibo"></i>
</ul>
</div>
</div>
</body>
</html>
4899
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
