作业分析
本次使用table表格标签编写如下效果
8.png
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>京东网页</title>
<style>
.goodsitem{
padding: 5px;
width: 300px;
height: 550px;
border: soild 1px #888;
overflow: hidden;
border-radius: 5px;
cursor: pointer; }
.goodsitem:hover{transform: scale(1.2);
border: 2px groove red;
border-style: double;
}
.goodsitem img{
width:280px;
height: 400px;
}
.title {
font-size: 20px;
color:black;
}
.title span{
font-size: 25x;
background-color: rgb(226, 6, 50);
color: rgb(249, 249, 249) ;
}
.price{font-size: 20px;
color: crimson;}
.price span{font-size: 30px;
font-weight: bolder;}
</style>
</head>
<body>
<p align="center"><a href="https://www.jd.com/?cu=true&utm_source=lianmeng__10__browser.lenovo.com.cn&utm_medium=tuiguang&utm_campaign=t_330412191_&utm_term=3fb8b5a8c86c4a0f94ab61721c68e2ab">
<img src="./7.png" ></a></p>
<table align="center" >
<hr>
<thead>
<tr>
<th>
<div class="goodsitem" id="goodsitem">
<img src="./1.jpg" alt="" >
<p class="title">
<span>自营</span>舍得 舍得酒 舍不得（金盖）白酒
浓香型白酒<SPAN>京东超市</SPAN></p>
<p class="price">￥<span>521</span>.00</p></div>
</th>
<th>
<div class="goodsitem" id="goodsitem">
<img src="./2.png.avif" alt="" >
<p class="title"><SPAN>自营</SPAN>Apple/苹果 采用 (USB-C)的EarPods 耳机.. </p>
<p class="price">￥<span >5424</span>,00</p></div>
</th>
<th >
<div class="goodsitem" id="goodsitem">
<img src="./3.jpg.avif" alt="" >
<p class="title"><span>自营</span>华为pura70 手机 旗舰新品华为P70智能手机 冰晶蓝 ...</p>
<p class="price">￥<span>4799</span>.00 </p></div>
</th>
<th>
<div class="goodsitem" id="goodsitem">
<img src="./4.jpg.avif" alt="" >
<p class="title"><span>自营</span>双飞燕（A4TECH）AT87 88键有线机械键盘 野蛮部落...</p>
<p class="price">￥<span>549</span>.00</p></div>
</th>
<th><div class="goodsitem" id="goodsitem">
<img src="./5.jpg.avif" alt="" >
<p class="title"><span>自营</span>腹灵mk870pro黑莓侧刻机械键盘蓝牙有线无线客制化...</p>
<p class="price">￥<span>389</span>.00</div>
</th>
<th>
<div class="goodsitem" id="goodsitem">
<img src="./6.jpg.avif" alt="" >
<p class="title"> <span>自营</span>vivo iQOO 13 16GB+512GB 传奇版 骁龙...</p>
<p class="price">￥<span>4699</span>.00</p></div>
</th>
</tr>
</thead>
</table>
</body>
</html>
个人总结
对于图片的缩放有待研究，CSS语言也需要深究
