<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>电影卡片</title>
<link rel="stylesheet" href="../02CSS/reset.css">
<link rel="stylesheet" href="./icon/电影卡片/iconfont.css">
<style>
/* 主体 */
.auter{
color: #B2B0B0;
width: 240px;
margin: 50px;
box-shadow: 0px 0px 10px;
position: relative;
}
/* 图片 */
.picture{
width: 240px;
height: auto;
position: relative;
}
/* 电影名称 */
.name{
font-size: 19px;
margin: 15px 20px 10px 20px;
width: auto;
color: #717171;
}
/* 电影类型前的图标 */
.type::before{
content: e624;
font-family: iconfont;
}
/* 电影类型 */
.type{
margin: 10px 20px 15px 20px;
width: auto;
}
/* 电影介绍 */
.introduce{
margin: 20px 20px 15px 20px;
width: auto;
line-height: 20px;
}
/* 底栏 */
.bottombar{
width: auto;
height: 48px;
border-top: 1px #dddddd solid;
}
/* 前两个绿色星星 */
.star1{
display: inline-block;
line-height: 48px;
font-size: 22px;
margin: 0px auto 0px 18px;
color: #B9CB41;
}
/* 后两个灰色星星 */
.star2{
display: inline-block;
line-height: 48px;
font-size: 22px;
width: auto;
color: #D6D6D6;
}
/* Facebook图标 */
.facebook{
display: inline-block;
line-height: 48px;
font-size: 22px;
margin-left: 80px;
color: #D6D6D6;
}
</style>
</head>
<body>
<div class="auter">
<div class="picture">
<img src="./img/10/2.jpg" alt="">
</div>
<h1 class="name">冰雪奇缘</h1>
<h2 class="type"> 3D电影</h2>
<p class="introduce">这是一步非常好看的电影，好看的不得了来来来范德萨发发送到发了lorem</p>
<div class="bottombar">
<span class="star1 iconfont"></span><span class="star2 iconfont"></span>
<span class="facebook iconfont"></span>
</div>
</div>
</body>
</html>
