【案例】简单图片和段落上下排版制作
如下所示,这是我在几个网站截下来的几张图,点击后会从新标签页进入商品详情界面,或者文章详情界面。
图片处于上方,文字处于下方,此时的主要信息都在靠配图呈现,也主要靠图片来吸引用户,而下面的文字仅仅只是辅助作用。
这种排版方式大多出现在视频网网站,图片社交网站,购物网站,旅游网站上。
优点:醒目,大气,高辨识度
缺点:但对于移动端来说,如果没有做适配的话,内容可能会很占空间,不利于用户的信息获取。
示例代码并非官网原代码
小米官网
那么首先来实现一个小米官网这个样式
从官网的代码来看,这个<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>
数字尾巴和澎湃新闻的卡片样式,和这几个都相差无几,都只是加以修改。