【案例】简单图片和段落上下排版制作

如下所示，这是我在几个网站截下来的几张图，点击后会从新标签页进入商品详情界面，或者文章详情界面。

图片处于上方，文字处于下方，此时的主要信息都在靠配图呈现，也主要靠图片来吸引用户，而下面的文字仅仅只是辅助作用。

这种排版方式大多出现在视频网网站，图片社交网站，购物网站，旅游网站上。

优点：醒目，大气，高辨识度

缺点：但对于移动端来说，如果没有做适配的话，内容可能会很占空间，不利于用户的信息获取。

示例代码并非官网原代码

小米官网

那么首先来实现一个小米官网这个样式

从官网的代码来看，这个<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><spanclass="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>

数字尾巴和澎湃新闻的卡片样式，和这几个都相差无几，都只是加以修改。

【案例】简单图片和段落上下排版制作相关推荐

java canvas 画图片_[Java教程][HTML5] Canvas绘制简单图片
[Java教程][HTML5] Canvas绘制简单图片 0 2016-05-13 13:00:04 获取Image对象,new出来定义Image对象的src属性,参数:图片路径定义Image对象 ...
卡尔曼滤波器推导与解析 - 案例与图片
李小铭随笔- 5 文章- 2 评论- 13 </div><div id="mylinks"> 博客园首页新随笔新文章联系管理 ...
乐高机器人教室布置图片大全_圣诞节手抄报内容简单图片漂亮
圣诞节手抄报:圣诞节手抄报内容简单图片漂亮-圣诞节手抄报. 简单好看的超多套圣诞节手抄报高清图片模板小学圣诞节手抄报大全!简单漂亮全都有一.动手办报,尝试实践:1.学生独立排版2.展示学生排好版的 ...
poi获取段落位置_java poi读取.doc和.docx文件时获取图片与段落的对应关系
.doc文件代码中的WordParagraph类是自己创建的实体类,用于记录文本信息和图片 file_word对象为前台上传的MultipartFile对象. // doc格式 List wordP ...
java 实现ps功能_java 简单图片，可以实现ps的几个小滤镜
java 简单图片,可以实现ps的几个小滤镜以下教你实现图片马赛克,黑白画,珠纹化,油画效果等处理技术原理及实现.看完自己也可以简单的玩一玩. 1. 需要用到的包 java.awt // 用于创建用 ...
jQuery实现简单图片的轮播(自右向左播放)
简单的轮播大概内容分为如下三点: 1.轮播图片的存储: 2.轮播的样式(注意:图片存储的总宽度,以及图片移动相对元素的定位的元素): 3.JQuery中的计时器调用动画移动图片轮播. 一.carous ...
java使用poi操作word模板，插入图片、段落、表格
java使用poi操作word插入图片.段落.表格其他链接准备工作创建word模板.docx文件编写模板格式.xml文件 java上手poi maven依赖使用到的包具体应用对应封装方法 ...
简单图片识字工具v1.0绿色版
简单图片识字工具是一款简单的ocr图片识别工具,可以非常方便的帮助用户识别图片上的文字,只需要导入图片路径即可,操作十分简单,界面简洁,有需要的用户可以下载. 软件特色: 导入图片即可识别文字简单快 ...
python数据标注工具_python实现简单图片物体标注工具
本文实例为大家分享了python实现简单图片物体标注工具的具体代码,供大家参考,具体内容如下 # coding: utf-8 """ 物体检测标注小工具基本思路: 对要 ...

【案例】简单图片和段落上下排版制作

【案例】简单图片和段落上下排版制作

小米官网

完整代码

淘宝

完整代码

B站

完整代码

【案例】简单图片和段落上下排版制作相关推荐

最新文章

热门文章