代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/demo02.css">
</head>
<body>
<table align="centers" cellspacing="0" cellpadding="50px">
<tr>
<td class="a4"><img src="../images/微信图片_20241215121912.jpg" width="160px height=170px"><br>
￥<span class="a1">268</span><br>
<span class="a2">【新品】 【现货】</span> 罗小黑 <br>
切尔斯·罗·<span class="a3">小黑</span> 手办 </td>
<td class="a4">
<img src="../images/微信图片_20241215121419.jpg" width="160px height="170px"><br>
￥ <span class="a1">12</span><br>
<span style="color:rgb(202, 76, 76)" font-size="26px" font-weight="200">天猫</span>
<span class="a3">【新品通贩】</span> 罗小黑<br>
大家围圈圈通透卡<br>
官方正品周边
</td>
<td class="a4">
<img src="../images/微信图片_20241215121411.jpg" width="160px height=170px"><br>
￥<span class="a1">6</span><br>
<span class="box" >满300减50</span><br>
【新品】罗小黑<span class="a2">迷你节气徽章</span> <br>
官方正品周边
</td>
<td class="a4">
<img src="../images/微信图片_20241215121404.jpg" width="160px height=170px"><br>
￥<span class="a1">115</span><br>
<span style="color:rgb(202, 76, 76)" font-size="26px" font-weight="200">天猫</span>
【新品预售】罗小黑战记系列人物<br>
场景立牌组合摆件<br>
官方正版周边<br>
<span class="a5">假一赔四</span>
</td>
<td class="a4">
<img src="../images/微信图片_20241215121400.jpg" width="160px" height="170px"><br>
￥<span class="a1">92</span><br>
<span style="color:rgb(202, 76, 76)" font-size="26px" font-weight="200">天猫</span>
【新品预售】罗小黑战记蓝溪镇系列<br>
组合立牌场景摆件<br>
官方正品周边<br>
<span class="a6">一周内100+人已买</span>
</td>
<td class="a4">
<img src="../images/微信图片_20241215121348.jpg" width="160px" height="170px"><br>
￥<span class="a1">23</span><br>
<span class="box">每300减40</span>
<span class="box">消费券</span>
【新品预售】罗小黑战记秋游系列<br>
人物挂件场景摆件<br>
官方正品周边
</td>
</tr>
</table>
</body>
</html>
css展示
.a1{
color:rgb(205, 60, 60);
font-size:40px;
font-weight: 500;
}
.a2{
color:rgb(94, 153, 220);
font-size: 20px;
}
.a3{
color:rgba(63, 146, 229, 0.95);
font-family: 宋体;
font-weight: 100;
font-size: 25px;
}
.a4:hover{
color:rgb(224, 107, 107);
border:solid rgb(178, 53, 53);
box-shadow: rgb(180, 61, 61) 5px 5px 5px;
cursor:pointer;
}
.box{
color:rgb(148, 14, 14);
font-size:15px;
border-style: solid;
background-color:rgb(248, 137, 118)
}
.a5{
color:rgb(8, 136, 8);
background-color:rgb(131, 195, 174);
}
.a6{
color:rgb(93, 92, 92);
background-color:rgb(177, 174, 174);
}
图片展示
image.png
学到的知识：
学会了如何使用 css标签内嵌，网页内嵌，外部格式
