提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
新手小白如何用HTML+CSS实现淘宝页面效果
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Taobao</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
table{
margin: 0 auto;
}
</style>
</head>
<body>
<table width="100%" align="center" border="0" cellspacing="0px" cellpadding="0px">
<tr>
<td width="6%">
<b style="color:black;font-size:30px ;font-family:SimSun;padding:20px">
猜你喜欢
</b>
</td>
<td width=50%" align="left">
<img src="./个性推荐.png" >
</td>
</tr>
</table>
<table height="1000px" width="100%" border="0" cellspacing="" cellpadding="">
<tr>
<td align="" style="margin:auto">
<img src="1.jpg_.webp" alt="">
<p style="font-size:16px">
心相印纸巾抽纸整箱大包家用<br>
实惠装卫生纸心心相印餐巾纸
</p>
<p style="color:red ;font-size=25px">¥9.9</p>
</td>
<td align="" style="margin:auto">
<img src="2.jpg" alt="">
<p style="font-size:16px">
旺旺旺仔牛奶245ml*24罐装营<br>
养早餐奶学生饮料儿童复原乳
</p>
<p style="color:red ;font-size=25px">¥9.9</p>
</td>
<td align="" style="margin:auto">
<img src="3.jpg" alt="">
<p style="font-size:16px">
懒人自热小火锅速食牛肉重庆便宜<br>
土豆粉自助网红麻辣烫酸辣螺蛳粉
</p>
<p style="color:red ;font-size=25px">¥9.9</p>
</td>
<td align="" style="margin:auto">
<img src="4.jpg" alt=""><br>
<p style="font-size:16px" >
<img src="hot.png" alt="">
适用吉普大切诺基国产<br>
指南者自由光自由侠6D包门槛
</p>
<p style="color:red ;font-size=25px">¥9.9</p>
</td>
<td align="" style="margin:auto">
<img src="5.jpg" alt="">
<p style="font-size:16px">
小米手环6表带小米手环4/5腕<br>
带3NFC版智能运动硅胶个性潮
</p>
<p style="color:red ;font-size=25px">¥9.9</p>
</td>
</tr>
<tr>
<td align="" style="margin:auto">
<img src="6.jpg" alt="">
<p style="font-size:16px">
乐事薯片小包装整箱宿舍耐吃<br>
零食大礼包送女友散装小吃休
</p>
<p style="color:red ;font-size=25px">¥9.9</p>
</td>
<td align="" style="margin:auto">
<img src="7.jpg" alt="">
<p style="font-size:16px">
唇釉唇泥唇蜜旗舰店官方正品<br>
女小众品牌口红平价学生不掉
</p>
<p style="color:red ;font-size=25px">¥9.9</p>
</td>
<td align="" style="margin:auto">
<img src="8.jpg" alt="">
<p style="font-size:16px">
原裝正品 通用6s入耳式6适用<br>
蘋果iPhone小米oppo华为vivo
</p>
<p style="color:red ;font-size=25px">¥9.9</p>
</td>
<td align="" style="margin:auto">
<img src="9.jpg" alt=""><br>
<p style="font-size:16px" >
<img src="hot.png" alt="">
林氏木业全实木儿童双层<br>
上下铺床两层子母高
</p>
<p style="color:red ;font-size=25px">¥9.9</p>
</td>
<td align="" style="margin:auto">
<img src="10.jpg" alt="">
<p style="font-size:16px">
正宗柳州螺蛳粉3包酸辣螺丝<br>
粉广西特产螺狮粉方便面米线
</p>
<p style="color:red ;font-size=25px">¥9.9</p>
</td>
</tr>
<tr>
<td align="" style="margin:auto">
<img src="11.jpg" alt="">
<p style="font-size:16px">
刻度吸管玻璃杯ins家用奶茶网<br>
红牛奶果汁水杯子带盖少女可
</p>
<p style="color:red ;font-size=25px">¥9.9</p>
</td>
<td align="" style="margin:auto">
<img src="12.jpg" alt="">
<p style="font-size:16px">
全自动雨伞女晴雨两用折叠遮<br>
阳伞太阳伞防晒防紫外线定
</p>
<p style="color:red ;font-size=25px">¥9.9</p>
</td>
<td align="" style="margin:auto">
<img src="13.jpg" alt=""><br>
<p style="font-size:16px">
网红镜子台式化妆镜双面ins风<br>
少女心桌面可立宿舍大号学生
</p>
<p style="color:red ;font-size=25px">¥9.9</p>
</td>
<td align="" style="margin:auto">
<img src="14.jpg" alt=""><br>
<p style="font-size:16px" >
<img src="hot.png" alt="">
cobor可贝尔补水紧致眼<br>
膜
</p>
<p style="color:red ;font-size=25px">¥9.9</p>
</td>
<td align="" style="margin:auto">
<img src="15.jpg" alt="">
<p style="font-size:16px">
网红夕阳日落灯ins落日黄昏投<br>
影拍照补光氛围感迷你卧室壁
</p>
<p style="color:red ;font-size=25px">¥9.9</p>
</td>
</tr>
<tr>
<td align="" style="margin:auto">
<img src="16.jpg" alt="">
<p style="font-size:16px">
可爱搞怪袜子粉色长袜亮绿色<br>
卡通中筒袜ins同款插画秋冬
</p>
<p style="color:red ;font-size=25px">¥9.9</p>
</td>
<td align="" style="margin:auto">
<img src="17.jpg" alt="">
<p style="font-size:16px">
迷你夹板女男士烫直卷两用卷<br>
发棒迷小型拉直板夹刘海神器
</p>
<p style="color:red ;font-size=25px">¥9.9</p>
</td>
<td align="" style="margin:auto">
<img src="18.jpg" alt="">
<p style="font-size:16px">
超能袋装洗衣液2袋补充替换<br>
装家庭装低泡天然皂液手洗机
</p>
<p style="color:red ;font-size=25px">¥9.9</p>
</td>
<td align="" style="margin:auto">
<img src="19.jpg" alt=""><br>
<p style="font-size:16px" >
<img src="hot.png" alt="">
手动筛盅骰盅酒吧塞子高<br>
档甩盅塑料色盅直筒
</p>
<p style="color:red ;font-size=25px">¥9.9</p>
</td>
<td align="" style="margin:auto">
<img src="20.jpg" alt="">
<p style="font-size:16px">
VIVOTWS 2真无线降噪耳机保<br>
护套vivotws2蓝牙保护壳
</p>
<p style="color:red ;font-size=25px">¥9.9</p>
</td>
</tr>
</table>
</body>
</html>
```*实现效果如下:*
![在这里插入图片描述](https://img-blog.csdnimg.cn/302f6fcd40884d49a6c27ee6d440a65e.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAcXFfNDM3MTAxNTE=,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)