做这种页面首先看要从哪里开始，有几行几列。对于初学者来说，这个页面里有的东西本人只能通过截图来辅助完成。
此页面有2列11行，先编写图片地址，如需在此图片上点击还得在src前面加上一个input标签（如<td rowspan（跨行单元格）="7"><input name="submit" type（类型）="image" （图像）value="" src="图片地址" /></td>），再将上8行合并，下3行合并，编写图片，编写相关文本信息。
在HTML语言中要使文字变色及如何使用虚线此页面也做了详细的编写(如：前面代码是对中间文字进行定义后面代码是虚线的进行定义，<td><br/（换行）><span（跨度）style="font(字体)-size(大小):22px;color（颜色）:red（红）">富含乳清浓缩蛋白 鱼胶原蛋白 碱化可可粉 均衡营养</span><hr（水平线的定义） style="border:1px dotted（虚线） #036" /></td>)，
此页面里还有一个活动的按钮（如： <td><购买数量:<input type="button" value="-" /><input type="text" size="1" value="1" /><input type="button" value="+" /></td>）
以下是页面的编辑代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="Generator" content="EditPlus®" />
<meta name="Author" content="" />
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<title>Document</title>
</head>
<body>
<table>
<tbody>
<tr>
<td rowspan="7"><input name="submit" type="image" value="" src="C:\Users\hailang\Desktop\HTML\QQ截图20150501213711.jpg" /></td>
<td>康比特 康比特乳清蛋白固体饮料（香草味）750g 康比特乳清蛋白固体饮料（香草味）750g<br/><span style="font-size:22px;color:red">富含乳清浓缩蛋白 鱼胶原蛋白 碱化可可粉 均衡营养</span><hr style="border:1px dotted #036" /></td>
</tr>
<tr>
<td>商品编号：18799</td>
</tr>
<tr>
<td>参考价：￥298</td>
</tr>
<tr>
<td>价格：￥184.7（该商品不支持优惠券）</td>
</tr>
<tr>
<td>促销信息：<img src="C:\Users\hailang\Desktop\HTML\QQ截图2.jpg" width="40" height="22" alt="打折" />该商品已打6.2折</td>
</tr>
<tr>
<td>商品规格：750g</td>
</tr>
<tr>
<td>生产厂家：北京康比特体育科技股份有限公司</td>
</tr>
<tr>
<td rowspan="3"><img src="C:\Users\hailang\Desktop\HTML\下图.jpg" alt="下图" /></td>
<td>支持：在线支付满89元 货到付款满150元包邮</td>
</tr>
<tr>
<td><hr style="border:1px dotted #036" />购买数量:<input type="button" value="-" /><input type="text" size="1" value="1" /><input type="button" value="+" /></td>
</tr>
<tr>
<td><input name="submit" type="image" value="" src="C:\Users\hailang\Desktop\HTML\123.jpg" /></td>
</tr>
</tbody>
</table>
</body>
</html>
效果图：
时间： 2024-12-22 01:30:37