写一个拼多多首页的html代码
时间: 2024-06-01 20:12:39 浏览: 40
<!DOCTYPE html>
<html>
<head>
<title>拼多多</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<div class="logo">
<img src="https://img.yzcdn.cn/public_files/2019/02/12/8b4dc4b4a4a1c8582b8a4fa582eea7f4.png">
</div>
<div class="search">
<input type="text" placeholder="搜索你喜欢的商品">
<button>搜索</button>
</div>
<div class="cart">
<a href="#">
<i class="iconfont icon-cart"></i>
<span>购物车</span>
</a>
</div>
<div class="login">
<a href="#">登录</a>
<a href="#">注册</a>
</div>
</header>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">海淘</a></li>
<li><a href="#">9.9包邮</a></li>
<li><a href="#">拼团</a></li>
<li><a href="#">超级品牌日</a></li>
</ul>
</nav>
<main>
<div class="banner">
<img src="https://img.yzcdn.cn/public_files/2019/06/12/273b057a5b7d3b3a3f3a2d1cbf2db6c1.jpg">
</div>
<div class="recommend">
<h2>为你推荐</h2>
<ul>
<li>
<a href="#">
<img src="https://img.yzcdn.cn/upload_files/2019/05/23/FqPq3Z5fLJ1dO2QjABRtX9D1lJ0t.jpg!thumb100x100.jpg">
<p>小米电视4A 32英寸</p>
<span>¥899.00</span>
</a>
</li>
<li>
<a href="#">
<img src="https://img.yzcdn.cn/upload_files/2019/05/23/FqPq3Z5fLJ1dO2QjABRtX9D1lJ0t.jpg!thumb100x100.jpg">
<p>小米电视4A 32英寸</p>
<span>¥899.00</span>
</a>
</li>
<li>
<a href="#">
<img src="https://img.yzcdn.cn/upload_files/2019/05/23/FqPq3Z5fLJ1dO2QjABRtX9D1lJ0t.jpg!thumb100x100.jpg">
<p>小米电视4A 32英寸</p>
<span>¥899.00</span>
</a>
</li>
<li>
<a href="#">
<img src="https://img.yzcdn.cn/upload_files/2019/05/23/FqPq3Z5fLJ1dO2QjABRtX9D1lJ0t.jpg!thumb100x100.jpg">
<p>小米电视4A 32英寸</p>
<span>¥899.00</span>
</a>
</li>
</ul>
</div>
<div class="hot">
<h2>热门活动</h2>
<div class="row">
<div class="col">
<a href="#">
<img src="https://img.yzcdn.cn/public_files/2019/05/14/9a1b6f1e51a7b6a73a8f7c6d1a6c3280.jpg">
<p>美妆达人推荐</p>
</a>
</div>
<div class="col">
<a href="#">
<img src="https://img.yzcdn.cn/public_files/2019/05/14/9a1b6f1e51a7b6a73a8f7c6d1a6c3280.jpg">
<p>美妆达人推荐</p>
</a>
</div>
<div class="col">
<a href="#">
<img src="https://img.yzcdn.cn/public_files/2019/05/14/9a1b6f1e51a7b6a73a8f7c6d1a6c3280.jpg">
<p>美妆达人推荐</p>
</a>
</div>
<div class="col">
<a href="#">
<img src="https://img.yzcdn.cn/public_files/2019/05/14/9a1b6f1e51a7b6a73a8f7c6d1a6c3280.jpg">
<p>美妆达人推荐</p>
</a>
</div>
</div>
</div>
<div class="new">
<h2>新品上架</h2>
<ul>
<li>
<a href="#">
<img src="https://img.yzcdn.cn/upload_files/2019/05/23/FqPq3Z5fLJ1dO2QjABRtX9D1lJ0t.jpg!thumb100x100.jpg">
<p>小米电视4A 32英寸</p>
<span>¥899.00</span>
</a>
</li>
<li>
<a href="#">
<img src="https://img.yzcdn.cn/upload_files/2019/05/23/FqPq3Z5fLJ1dO2QjABRtX9D1lJ0t.jpg!thumb100x100.jpg">
<p>小米电视4A 32英寸</p>
<span>¥899.00</span>
</a>
</li>
<li>
<a href="#">
<img src="https://img.yzcdn.cn/upload_files/2019/05/23/FqPq3Z5fLJ1dO2QjABRtX9D1lJ0t.jpg!thumb100x100.jpg">
<p>小米电视4A 32英寸</p>
<span>¥899.00</span>
</a>
</li>
<li>
<a href="#">
<img src="https://img.yzcdn.cn/upload_files/2019/05/23/FqPq3Z5fLJ1dO2QjABRtX9D1lJ0t.jpg!thumb100x100.jpg">
<p>小米电视4A 32英寸</p>
<span>¥899.00</span>
</a>
</li>
</ul>
</div>
</main>
<footer>
<div class="links">
<a href="#">关于我们</a>
<a href="#">联系我们</a>
<a href="#">商家入驻</a>
<a href="#">招聘信息</a>
<a href="#">友情链接</a>
</div>
<div class="copy">
<p>© 2021 拼多多 版权所有</p>
</div>
</footer>
</body>
</html>