有序列表ol And 表格table_有序列表和表格结合-优快云博客

本文链接：https://blog.youkuaiyun.com/hun_gui/article/details/123505412

这组HTML代码展示了网页设计的不同应用场景。第一个例子是明星图片展示，包括刘昊然、陈伟霆、李小冉和杨紫的美照。第二个例子是表格布局，用不同颜色展示单元格的组合效果。第三个例子是电商平台的商品推荐，包含五款商品的图片、名称和描述，强调了商品的实用性和美观性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
				list-style: none;
			}
			ol{
				margin-left: 400px;
				width: 895px;
			}
			ol li{
				margin: 10px;
				display: inline-block;
			}
			ol li p{
				font-size: 10px;
				text-align: center;
			}
			img{
				width: 200px;
				height: 170px;
			}
			a{
				color: black;
				text-decoration: none;
			}
		</style>
	</head>
	<body>
		<ol style="list-style:none;">
			<li>
				<img src="http://contentcms-bj.cdn.bcebos.com/cmspic/cb8870fd328297d2012931716ebb71e2.jpeg?x-bce-process=image/crop,x_0,y_0,w_640,h_430" >
				<p><a href="">俊逸英朗的刘昊然</a></p>
			</li>
			<li> <img src="http://contentcms-bj.cdn.bcebos.com/cmspic/bb472c1791ed221abf27c3f9f5367996.jpeg?x-bce-process=image/crop,x_0,y_99,w_640,h_430" >
				<p><a href="">陈伟霆登杂志封面 帅气十足</a></p>
			</li>
			<li>
				<img src="http://contentcms-bj.cdn.bcebos.com/cmspic/ac39bf1c0efaf3fffb3299f2632a9a0d.jpeg?x-bce-process=image/crop,x_0,y_146,w_640,h_430" >
				<p><a href="">李小冉展现岁月沉淀后的淡然</a></p>
			</li>
			<li>
				<img src="http://contentcms-bj.cdn.bcebos.com/cmspic/97def95799b0e1ce5aaa52f173d877c9.jpeg?x-bce-process=image/crop,x_0,y_420,w_640,h_430" >
				<p><a href="">杨紫晒游玩美照</a></p>
			</li>
		</ol>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
				list-style: none;
			}
			table td{
				width: 100px;
				height: 100px;
			}
		</style>
	</head>
	<body>
		<table border="1" cellspacing="0">
			<tbody>
				<tr>
					<td colspan="2" bgcolor="#000000"></td>
					<td rowspan="2" bgcolor="#20B2AA"></td>
				</tr>
				<tr>
					<td rowspan="2" bgcolor="blueviolet"></td>
					<td bgcolor="#FF0000"></td>
				</tr>
				<tr>
					<td colspan="2" bgcolor="chocolate"></td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
				list-style: none;
			}
			table{
				width: 1100px;
				margin: auto;
			}
			img{
				width: 200px;
				height: 200px;
				margin: 15px 20px 0px 0px;
				border-radius: 15px;
			}
			h4{
				color: grey;
				font-size: 15px;
				height: 30px;
				line-height: 30px;
			}
			h3{
				display: inline-block;
				margin: 10px;
			}
			p{
				height: 30px;
				line-height: 30px;
				text-overflow: ellipsis;
				overflow: hidden;
				color: darkgray;
			}
		</style>
	</head>
	<body>
		<table border="0" cellspacing="0" cellpadding="0">
			<tbody>
				<tr>
					<td colspan="5"><h3>有好货</h3><span>全民口碑</span></td>
				</tr>
				<tr>
					<td><img src="http://img.alicdn.com/imgextra/i4/787600031/O1CN011C6EiLlx2RqoWkJ_!!787600031.jpg_300x300.jpg" ></td>
					<td><img src="https://img.alicdn.com/imgextra/i1/3991236768/O1CN01L05slW1zrnB7gets5_!!3991236768-0-daren.jpg_300x300.jpg" ></td>
					<td><img src="https://img.alicdn.com/imgextra/i1/1900420042/O1CN01F0T8u01CBHMI5pk8D_!!1900420042-0-beehive-scenes.jpg_300x300.jpg" ></td>
					<td><img src="https://img.alicdn.com/imgextra/i2/3724920190/O1CN019HiYSH1DH3yJn2hDy_!!3724920190-0-beehive-scenes.jpg_300x300.jpg" ></td>
					<td><img src="https://img.alicdn.com/imgextra/i3/2973811875/TB2LPAjw29TBuNjy0FcXXbeiFXa_!!2973811875-0-beehive-scenes.jpg_300x300.jpg" ></td>
				</tr>
				<tr>
					<td>
						<h4>东道之舍 紫艺轩壶艺茶具</h4>
					</td>
					<td>
						<h4>other 日系复古宽松直筒萝卜裤</h4>
					</td>
					<td>
						<h4>源氏木语实木夏洛克床头柜</h4>
					</td>
					<td>
						<h4>鸢源制本 DIY真皮相册</h4>
					</td>
					<td>
						<h4>忆仟堂 纯手工银龙养生茶盏</h4>
					</td>
				</tr>
				<tr>
					<td><p>汝窑汝瓷简易功夫茶具套装，携带方便，轻巧。</p></td>
					<td><p>工装裤采用了工装的版型设计，宽松的裤型，穿着舒适，不挑身材，多口袋的设计更是增加了实用性，搭配一件T恤，就能轻松驾驭。</p></td>
					<td><p>深色床头柜也挺好用的，并不是想象中的那么压抑，这款烟熏色加黄铜元素的床头柜，加上高挑柜腿设计，整个是很显轻盈的，卧室格调直线UP。</p></td>
					<td><p>咖色款选用经典摔纹牛皮，橘色款选用时尚油蜡牛皮，精致收边做工别致。内里的活页，是进口加厚覆膜纸，双面覆膜保护，阻止照片与空气接触。</p></td>
					<td><p>龙吟禅风的设计十分巧妙，整条龙的雕刻栩栩如生采用纯银材质手工制造，匠心独具。每一个步骤都非常仔细。是一件不可多得艺术品，走进生活提高生活的雅致，品一杯茶道一道人生百味。</p></td>
				</tr>
			</tbody>
		</table>
	</body>
</html>