1. 先创建图片目录（image）

并将图片拖进目录里

2. 插入图片（img src）

<dl style="width: 200px;height: 200px;float: left;"><dt><img src="../image/run2.jpg" ></dt><dd><a href="#">乔杉家用跑步机</a></dd><!-- 人民币符号   切换到中文输入法   shift+4   --><dd><strong style="color: red;">￥2999</strong></dd></dl>

3. 图片居中

因用到了<div>标签，所以让图片居中不能用 align 属性，要这样写：

<!-- 让整个div居中 margin:0 auto;（设置左右边距为auto） --><div style="width: 900px;margin: 0 auto;">

4. 完整代码如下所示：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><!-- 一行4个跑步机 4个dl<div的宽度<5个dl --><!-- 让整个div居中    margin:0 auto;（设置左右边距为auto） --><div style="width: 900px;margin: 0 auto;"><!-- 图片的宽度都小于 130 --><dl style="width: 200px;height: 200px;font: left;"><dt><img src="../image/run1.jpg" ></dt><dd><a href="#">白桦跑步机</a></dd><!-- 人民币符号 切换到中文输入法 shift+4 --><dd><strong style="color: red;">￥2998</strong></dd></dl><dl style="width: 200px;height: 200px;font: left;"><dt><img src="../image/run2.jpg" ></dt><dd><a href="#">白桦跑步机</a></dd><!-- 人民币符号 切换到中文输入法 shift+4 --><dd><strong style="color: red;">￥2998</strong></dd></dl><dl style="width: 200px;height: 200px;font: left;"><dt><img src="../image/run3.jpg" ></dt><dd><a href="#">白桦跑步机</a></dd><!-- 人民币符号 切换到中文输入法 shift+4 --><dd><strong style="color: red;">￥2998</strong></dd></dl><dl style="width: 200px;height: 200px;font: left;"><dt><img src="../image/run4.jpg" ></dt><dd><a href="#">白桦跑步机</a></dd><!-- 人民币符号 切换到中文输入法 shift+4 --><dd><strong style="color: red;">￥2998</strong></dd></dl><dl style="width: 200px;height: 200px;font: left;"><dt><img src="../image/run1.jpg" ></dt><dd><a href="#">白桦跑步机</a></dd><!-- 人民币符号 切换到中文输入法 shift+4 --><dd><strong style="color: red;">￥2998</strong></dd></dl><dl style="width: 200px;height: 200px;font: left;"><dt><img src="../image/run1.jpg" ></dt><dd><a href="#">白桦跑步机</a></dd><!-- 人民币符号 切换到中文输入法 shift+4 --><dd><strong style="color: red;">￥2998</strong></dd></dl><dl style="width: 200px;height: 200px;font: left;"><dt><img src="../image/run1.jpg" ></dt><dd><a href="#">白桦跑步机</a></dd><!-- 人民币符号 切换到中文输入法 shift+4 --><dd><strong style="color: red;">￥2998</strong></dd></dl><dl style="width: 200px;height: 200px;font: left;"><dt><img src="../image/run1.jpg" ></dt><dd><a href="#">白桦跑步机</a></dd><!-- 人民币符号 切换到中文输入法 shift+4 --><dd><strong style="color: red;">￥2998</strong></dd></dl><dl style="width: 200px;height: 200px;font: left;"><dt><img src="../image/run1.jpg" ></dt><dd><a href="#">白桦跑步机</a></dd><!-- 人民币符号 切换到中文输入法 shift+4 --><dd><strong style="color: red;">￥2998</strong></dd></dl></div></body>
</html>

执行结果如下所示：

结束语

若这篇文章有帮到你，给个赞，收个藏，欢迎大家留言评论；
若文章有错误，欢迎大家指教。

web 案例之图片并排相关推荐

web响应式图片设计实现
随着移动开发热潮的兴起,已经有越来越多的公司将移动端的开发列为核心,其中不论是webapp还是手机页面都是如此,在开发的过程中就涉及到了一个web响应式图片的问题,这里我们就来探讨一下响应式图片的实现 ...
【LaTeX】子图和图片并排
使用说明: 本文主要介绍LaTeX中图片并排的方法以及子图的创建,默认图片的导入以及一些可选参数的设定读着均有所了解,适合有一定基础的情况下进行阅读. 注:图片使用了2020-2021年间,美赛和国赛 ...
Spring Boot 整合 Mybatis Annotation 注解的完整 Web 案例
摘要: 原创出处 www.bysocket.com 「泥瓦匠BYSocket 」欢迎转载,保留摘要,谢谢! 『公司需要人.产品.业务和方向,方向又要人.产品.业务和方向,方向- 循环』本文提纲一 ...
卡尔曼滤波器推导与解析 - 案例与图片
李小铭随笔- 5 文章- 2 评论- 13 </div><div id="mylinks"> 博客园首页新随笔新文章联系管理 ...
Markdown图片并排展示、图注对齐
文章目录前言方案一:利用Html的<table>标签方案二:利用Html的<center>标签未能实现的思路:使用LaTeX插入图片并控制对齐附:单张图片图注对齐前 ...
java图片管理系统_基于Java Web技术的图片管理系统的设计与实现.doc
基于Java Web技术的图片管理系统的设计与实现本科毕业设计目录第1章引言6 1.1 课题研究目的及意义6 1.2 课题研究的内容7 2.1 用户功能需求7 图片收藏数据库查询系统图片收 ...
latex的图的排列方法_latex 图片并排、竖排
\usepackage{subfigure} %图片并排 % \begin{figure} % \centering % \subfigure[Small Box with a Long Capt ...
web性能优化---图片优化
先来看一道易错题 ``` let a = {a: 1} let b = a // 相当于把b的地址指向a的内容 a.x = a = {n: 2} //由于a.x = a把a的地址指向了a.x 然而 ...
web网站和图片实现灰白效果
web网站和图片如何黑白化愿凛冬消散,再无国殇.--2020.04.04 本文目录 web网站和图片如何黑白化网站元素处理,CSS:filter 1. filter 2.filter: grays ...

web 案例之图片并排

web 案例之图片并排

1. 先创建图片目录（image）

2. 插入图片（img src）

3. 图片居中

4. 完整代码如下所示：

结束语

web 案例之图片并排相关推荐

最新文章

热门文章