P63-前端基础CSS-电影卡片练习图文布局
1.概述
通过电影卡片案例，综合练习背景图片、文字的样式设置和布局。
2.电影卡片案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>电影卡片</title>
<link rel="stylesheet" href="./css/reset.css">
<!-- 导入图标字体 -->
<link rel="stylesheet" href="./fa/css/all.css">
<style>
/* 设置外层容器 */
.outer {
width: 240px;
margin: 100px auto;
/* 设置阴影 */
box-shadow: 0 0 10px rgba(0, 0, 0, .8);
}
/* 设置图片 */
.img-wrapper img {
width: 100%;
vertical-align: bottom;
}
/* 设置内容容器 */
.info {
padding: 0px 18px;
color: #acaaaa;
font-size: 14px;
}
.info .title {
color: #717171;
font-size: 18px;
margin: 13px 0 15px 0;
}
.info .category i{
margin-left: 4px;
margin-right: 7px;
}
/* 设置简介的样式 */
.info .intro {
margin: 18px 4px;
/* 设置行间距 */
line-height: 20px;
}
/* 设置下边的内容 */
.star-wrapper {
height: 46px;
line-height: 46px;
border-top: 1px solid #e9e9e9;
color: #ddd;
padding: 0 16px;
}
/* 设置星星的样式 */
.star-wrapper .star {
float: left;
}
.star-wrapper .light {
color: #b9cb41;
}
.star-wrapper .weibo {
float: right;
}
</style>
</head>
<body>
<!-- 创建一个外层容器 -->
<div class="outer">
<!-- 创建图片容器 -->
<div class="img-wrapper">
<img src="./img/10/1.jpg" alt="电影卡片">
</div>
<!-- 创建内容区容器 -->
<div class="info">
<h2 class="title">
暴雪公主
</h2>
<h3 class="category">
<!-- 使用图标字体 -->
<i class="fas fa-map-marker-alt"></i>
Call Me
</h3>
<p class="intro">
Now the queen was the most beautiful woman in all the land,
and very proud of her beauty. She had a mirror,
which she stood in front of every morning
</p>
</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>