【案例】简单图片和段落上下排版制作
如下所示，这是我在几个网站截下来的几张图，点击后会从新标签页进入商品详情界面，或者文章详情界面。
图片处于上方，文字处于下方，此时的主要信息都在靠配图呈现，也主要靠图片来吸引用户，而下面的文字仅仅只是辅助作用。
这种排版方式大多出现在视频网网站，图片社交网站，购物网站，旅游网站上。
优点：醒目，大气，高辨识度
缺点：但对于移动端来说，如果没有做适配的话，内容可能会很占空间，不利于用户的信息获取。
示例代码并非官网原代码
小米官网
那么首先来实现一个小米官网这个样式
从官网的代码来看，这个<img>是放在一个<div>中的，然后跟一个<h3>为内容标题
后面再跟一个<p>是内容简介，最后一个<p>里面就是价格，把价格数字另外放到<span>里，便于修改
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background-color: gainsboro;
}
#back {
margin: auto;
width: 160px;
height: 250px;
padding: 20px;
background-color: white;
}
.goods_png {
width: 160px;
height: 160px;
}
.title {
font-weight: normal;
margin: 10px 0px 10px 2px;
font-size: 16px;
text-align: center;
}
.syn {
text-align: center;
font-size: 12px;
color: grey;
margin: 0px 10px 10px;
}
.price {
margin: 0px 10px 14px;
text-align: center;
color: #FF6700;
}
</style>
</head>
<body>
<div id="back">
<div class="goods_png"><img width="160" height="160" src="小米10青春版.jpg" alt="小米10青春版"></div>
<h3 class="title">小米10 青春版 5G</h3>
<p class="syn">50倍潜望镜/轻薄5G手机</p>
<p class="price">
<span>2099</span>元<span>起</span></p>
</div>
</body>
</html>
淘宝
淘宝的布局对于小米的来说，只是多了评价，收藏，销量的显示。
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background-color: grey;
}
#back {
width: 200px;
height: 320px;
margin: auto;
background-color: white;
padding: 20px;
}
.line_1 {
font-size: 14px;
margin: 8px 0px;
color: #666666;
}
.line_2 {
margin: 0px 0px 17px;
}
.line_2 a {
color: #999999;
font-size: 12px;
}
.line_2 em {
font-style: normal;
}
.price {
color: #FF5000;
}
.price span {
font-size: 12px;
}
.price em {
font-size: 22px;
margin: 0px 0px 0px 2px;
font-style: normal;
}
.or_price {
color: #999999;
}
.or_price span {
font-size: 12px;
}
.or_price em {
text-decoration: line-through;
font-size: 12px;
font-style: normal;
}
.sales {
float: right;
font-size: 12px;
margin: 10px 0px 0px;
color: #999999;
}
.sales em {
font-style: normal;
}
</style>
</head>
<body>
<div id="back">
<img width="200" height="200" src="测试商品图片.png" alt="商品图片">
<a class="line_1">MUMO木墨 新品 新造系列支架桌 红橡木餐厅</a>
<div class="line_2">
<a>评价<em>0</em></a>
<a>收藏<em>4948</em></a>
</div>
<div>
<a class="price">
<span>¥</span>
<em>5140</em>
</a>
<a class="or_price">
<span>¥</span>
<em>5640</em>
</a>
<a class="sales">
月销
<em>19</em>笔</a>
</div>
</div>
</body>
</html>
B站
典型的视频网站
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background-color: grey;
}
#back {
width: 200px;
height: 200px;
margin: auto;
background-color: white;
padding: 20px;
}
.icon {
width: 10px;
height: 10px;
background-color: cyan;
margin-right: 5px;
}
.count {
margin-top: -30px;
}
.left {
margin-left: 5px;
}
.right {
float: right;
position: relative;
margin-top: -20px;
margin-right: 5px;
}
.vtitle {
margin: 10px 0px 8px;
padding: 0px 12px 0px 0px;
font-size: 14px;
color: #212121;
}
.up_name {
font-style: normal;
font-size: 13px;
color: #999999;
display: block;
margin-top: 40px;
}
</style>
</head>
<body>
<div id="back">
<div>
<img width="200" height="120" src="测试商品图片.png" alt="测试商品图片">
<div class="count">
<div class="left"><span class="icon">o</span><span>17.4万</span><span
class="icon">o</span><span>1.2万</span></div>
<div class="right">
<span>22:40</span></div>
</div>
<div class="vtitle">【4K】难得一见的航拍北京
</div>
<a class="up_name"> <span class="icon">o</span>8KRAW_OFFICIAL
</a>
</div>
</div>
</body>
</html>
数字尾巴和澎湃新闻的卡片样式，和这几个都相差无几，都只是加以修改。