作业分析
此次作业参照京东的商品界面进行
作业成品效果如下图所示（点击图片可以跳转至相应商品的购物页面）
image.png
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>某东</title>
<!-- 对商品介绍的文字进行修饰 -->
<link rel="stylesheet" href="./CSS/wenzi.css">
<!-- 对“自营”二字进行修饰 -->
<link rel="stylesheet" href="./CSS/ziying.css">
</head>
<body>
<!-- 某东logo -->
<img src="./1734161157490.jpg">
<!-- 制作表格 -->
<table cellpadding="10" cellspacing="20" width="850" align="center">
<tr height="600">
<!-- 茅台 -->
<td>
<a href="https://item.jd.com/100012043978.html" target="_blank">
<img src="./92c123a24e067af2.jpg.avif" height="400">
</a>
<!-- 对“自营”二字进行修饰 -->
<div class="ziying">自营</div>
<!-- 对商品介绍的文字进行修饰 -->
<div class="wenzi">茅台(MOUTAI)飞天 53%vol 500ml 贵州茅...</div>
<!-- 对价格数字进行修饰 -->
<div>
<span style="color: red;"><span style="font-size: 25px;">$</span><span style="font-size:22px;font-weight:border">1999</span></span>
</div>
</td>
<!-- 耳机 -->
<td>
<a href="https://item.jd.com/100067100922.html" target="_blank">
<img src="./589b41a19d6751ff.png.avif" height="400">
</a>
<!-- 对“自营”二字进行修饰 -->
<div class="ziying">自营</div>
<!-- 对商品介绍的文字进行修饰 -->
<div class="wenzi">Apple/苹果 采用 (USB-C)的EarPods 耳机... </div>
<!-- 对价格数字进行修饰 -->
<div>
<span style="color: red;"><span style="font-size: 25px;">$</span><span style="font-size: 22px; font-weight:border;">199</span></span>
</div>
</td>
<!-- 冰箱 -->
<td>
<a href="https://item.jd.com/10024267605897.html" target="_blank">
<img src="./65ef1c25fe943831.png.avif" height="400">
</a>
<!-- 对“自营”二字进行修饰 -->
<div class="ziying">自营</div>
<!-- 对商品介绍的文字进行修饰 -->
<div class="wenzi">Haier/海尔冰箱三开门 253升一级能效节能变频风冷无霜...</div>
<!-- 对价格数字进行修饰 -->
<div>
<span style="color: red;"><span style="font-size: 25px;">$ <span style="font-size: 22px; font-weight: border;">999</span></span></span>
</div>
</td>
<!-- 玩偶 -->
<td>
<a href="https://item.jd.com/10111484351623.html" target="_blank">
<img src="./923e634545fb21c5.jpg.avif" height="400">
</a>
<!-- 对商品介绍的文字进行修饰 -->
<div class="wenzi">贵宾犬公仔小鼻嘎玩偶家族小狗娃娃公仔金毛四肢可动毛绒玩具 四...</div>
<!-- 对价格数字进行修饰 -->
<div>
<span style="color: red;"><span style="font-size: 25px;">$ <span style="font-size: 22px; font-weight: border;">55</span></span></span>
</div>
</td>
<!-- 水壶 -->
<td>
<a href="https://item.jd.com/100060691669.html" target="_blank">
<img src="./96492a9e61a1323e.jpg.avif" height="400">
</a>
<!-- 对“自营”二字进行修饰 -->
<div class="ziying">自营</div>
<!-- 对商品介绍的文字进行修饰 -->
<div class="wenzi">金灶(KAMJOVE)【国家补贴】电热水壶 保温电茶炉智能恒...</div>
<!-- 对价格数字进行修饰 -->
<span style="color: red;"><span style="font-size: 25px;">$ <span style="font-size: 22px; font-weight: border;">98</span></span></span>
</td>
<!-- 平底锅 -->
<td>
<a href="https://item.jd.com/10101750966787.html" target="_blank">
<img src="./d9d3058133840e7b.jpg.avif" height="400">
</a>
<!-- 对“自营”二字进行修饰 -->
<div class="ziying">自营</div>
<!-- 对商品介绍的文字进行修饰 -->
<div class="wenzi">家用牛排煎蛋平底不粘锅儿童辅食煎锅炒菜锅轻烟通用加厚早餐锅 ....</div>
<!-- 对价格数字进行修饰 -->
<span style="color: red;"><span style="font-size: 25px;">$ <span style="font-size: 22px; font-weight: border;">199</span></span></span>
</td>
</tr>
</table>
</body>
</html>
css代码
对商品文字修饰的代码
.wenzi{
font-size: 18px;
}
对“自营”两字修饰的代码
.ziying{
background-color: red;
color: white;
display: inline-block;
width: 40px;
height: 20px;
text-align: center;
border-radius: 2px;
}
总结
此次作业综合运用了这段时间所学的各种标签以及css，其中，对于css的熟练度较低，今后需多加熟悉。
