<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>仿真页面</title>
<style type="text/css">
body{background-color: bisque;}
a{text-decoration: none;}
table{border: 1 solid;}
table tr{height: 50px;}
input{margin-left:50px; ;height: 20px;width: 200px;}
.color{color: red;font-size: 25px;font-weight: bolder;}
#head{margin: auto;text-align: center;margin-bottom: 20px;}
#head img{height: 50px;}
#left{background-color: aqua;float: left;margin-right: 100px;height: 600px;}
#left img{width: 300px;height: 200px;margin-left: 20px;}
#right{float: left;background-color: azure;height: 710px;width: 900px;}
.first{font-size: 30px;color: blueviolet;text-align: center;}
#right div{float: left;height: 300px;width: 200px;background-color: beige;margin-right: 10px;margin-bottom: 10px;margin-left: 10px;}
#right div img{width: 200px;}
#right div p{text-align: center;}
</style>
</head>
<body>
<div id="head">
<img src="taobao.png">
<input type="text" name="" id="" value="搜索物品" />
</div>
<div id="left">
<p><strong>淘宝网 > > 淘宝分类</strong></p>
<hr></hr>
<table>
<tr><th>分类</th></tr>
<tr>
<td><a href="https://www.taobao.com/">数码产品 </a></td>
<td><a href="https://www.taobao.com/">潮服穿搭 </a></td>
<td><a href="https://www.taobao.com/">精美配饰 </a></td>
<td><a href="https://www.taobao.com/">鞋类 </a></td>
<td><a href="https://www.taobao.com/">美妆 </a></td>
</tr>
<tr>
<td><a href="https://consumer.huawei.com/cn/phones/">手机 </a></td>
<td><a href="https://www.taobao.com/">卫衣 </a></td>
<td><a href="https://www.taobao.com/">首饰 </a></td>
<td><a href="https://www.taobao.com/">靴子 </a></td>
<td><a href="https://www.taobao.com/">热门彩妆 </a></td>
</tr>
<tr>
<td><a href="https://www.taobao.com/">电脑 </a></td>
<td><a href="https://www.taobao.com/">外套 </a></td>
<td><a href="https://www.taobao.com/">帽子 </a></td>
<td><a href="https://www.taobao.com/">运动鞋 </a></td>
<td><a href="https://www.taobao.com/">面部护肤 </a></td>
</tr>
<tr>
<td><a href="https://www.taobao.com/">平板 </a></td>
<td><a href="https://www.taobao.com/">长裤 </a></td>
<td><a href="https://www.taobao.com/">配件 </a></td>
<td><a href="https://www.taobao.com/">时尚鞋履 </a></td>
<td><a href="https://www.taobao.com/">香水香氛 </a></td>
</tr>
</table>
<img src="taobao.png"/>
</div>
<div id="right">
<p class="first"><strong>猜你喜欢</strong></p>
<div>
<img src="1.png"/>
<p>宿舍零食大礼包</p>
<p class="color">9.9</p>
</div>
<div>
<img src="2.png"/>
<p>桌面杂物收纳盒</p>
<p class="color">9</p>
</div>
<div>
<img src="3.png"/>
<p>持久不易掉色口红</p>
<p class="color">5.8</p>
</div>
<div>
<img src="4.png"/>
<p>坚果零食大礼包</p>
<p class="color">9.9</p>
</div>
<div>
<img src="5.png"/>
<p>活底蛋糕模具</p>
<p class="color">11.8</p>
</div>
<div>
<img src="6.png"/>
<p>立白柔顺剂薰衣草香味</p>
<p class="color">13.9</p>
</div>
<div>
<img src="7.png"/>
<p>oversize棉服</p>
<p class="color">148</p>
</div>
<div>
<img src="8.png"/>
<p>同碗福韩式火鸡面</p>
<p class="color">12.5</p>
</div>
</div>
</body>
</html>
效果图
扫一扫
769
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
