作業(yè)分析
此次作業(yè)參照京東的商品界面進(jìn)行
作業(yè)成品效果如下圖所示（點(diǎn)擊圖片可以跳轉(zhuǎn)至相應(yīng)商品的購物頁面）
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>
<!-- 對商品介紹的文字進(jìn)行修飾 -->
<link rel="stylesheet" href="./CSS/wenzi.css">
<!-- 對“自營”二字進(jìn)行修飾 -->
<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 target="_blank">
<img src="./92c123a24e067af2.jpg.avif" height="400">
</a>
<!-- 對“自營”二字進(jìn)行修飾 -->
<div class="ziying">自營</div>
<!-- 對商品介紹的文字進(jìn)行修飾 -->
<div class="wenzi">茅臺(MOUTAI)飛天 53%vol 500ml 貴州茅...</div>
<!-- 對價(jià)格數(shù)字進(jìn)行修飾 -->
<div>
<span style="color: red;"><span style="font-size: 25px;">$</span><span style="font-size:22px;font-weight:border">1999</span></span>
</div>
</td>
<!-- 耳機(jī) -->
<td>
<a target="_blank">
<img src="./589b41a19d6751ff.png.avif" height="400">
</a>
<!-- 對“自營”二字進(jìn)行修飾 -->
<div class="ziying">自營</div>
<!-- 對商品介紹的文字進(jìn)行修飾 -->
<div class="wenzi">Apple/蘋果 采用 (USB-C)的EarPods 耳機(jī)... </div>
<!-- 對價(jià)格數(shù)字進(jìn)行修飾 -->
<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 target="_blank">
<img src="./65ef1c25fe943831.png.avif" height="400">
</a>
<!-- 對“自營”二字進(jìn)行修飾 -->
<div class="ziying">自營</div>
<!-- 對商品介紹的文字進(jìn)行修飾 -->
<div class="wenzi">Haier/海爾冰箱三開門 253升一級能效節(jié)能變頻風(fēng)冷無霜...</div>
<!-- 對價(jià)格數(shù)字進(jìn)行修飾 -->
<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 target="_blank">
<img src="./923e634545fb21c5.jpg.avif" height="400">
</a>
<!-- 對商品介紹的文字進(jìn)行修飾 -->
<div class="wenzi">貴賓犬公仔小鼻嘎玩偶家族小狗娃娃公仔金毛四肢可動毛絨玩具 四...</div>
<!-- 對價(jià)格數(shù)字進(jìn)行修飾 -->
<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 target="_blank">
<img src="./96492a9e61a1323e.jpg.avif" height="400">
</a>
<!-- 對“自營”二字進(jìn)行修飾 -->
<div class="ziying">自營</div>
<!-- 對商品介紹的文字進(jìn)行修飾 -->
<div class="wenzi">金灶(KAMJOVE)【國家補(bǔ)貼】電熱水壺 保溫電茶爐智能恒...</div>
<!-- 對價(jià)格數(shù)字進(jìn)行修飾 -->
<span style="color: red;"><span style="font-size: 25px;">$ <span style="font-size: 22px; font-weight: border;">98</span></span></span>
</td>
<!-- 平底鍋 -->
<td>
<a target="_blank">
<img src="./d9d3058133840e7b.jpg.avif" height="400">
</a>
<!-- 對“自營”二字進(jìn)行修飾 -->
<div class="ziying">自營</div>
<!-- 對商品介紹的文字進(jìn)行修飾 -->
<div class="wenzi">家用牛排煎蛋平底不粘鍋兒童輔食煎鍋炒菜鍋輕煙通用加厚早餐鍋 ....</div>
<!-- 對價(jià)格數(shù)字進(jìn)行修飾 -->
<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;
}
總結(jié)
此次作業(yè)綜合運(yùn)用了這段時(shí)間所學(xué)的各種標(biāo)簽以及css，其中，對于css的熟練度較低，今后需多加熟悉。
