首页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>淘宝官网</title>
<style>
*{
margin: 0;
padding: 0;
}
ul li{
list-style-type: none;
}
/* 首页nav */
.a{
height: 35px;
width: 100%;
background-color: white;
}
/* nav盒子 */
.a1{
width: 1190px;
height: 100%;
margin: auto;
background-color: gainsboro;
}
/* 主体内容 */
.c{
width: 100%;
height: auto;
}
/* 主体内容盒子 */
#b{
width: 1190px;
height: auto;
margin: auto;
}
.b1{
width: 100%;
height: 150px;
}
.b2{
display: flex;
width: 1190px;
height: 100%;
margin: auto;
background-color: gainsboro;
}
.b3{
width: 143px;
height: 58px;
text-align: center;
}
/* 搜索框 */
.s{
width: 627px;
height: 65px;
border: 5px solid rgb(243, 85, 12);
background-color: rgb(250, 249, 249);
}
input[type='text']{
width: 550px;
height: 63px;
}
input[type='submit']{
width: 60px;
height: 60px;
background-color: rgb(252, 179, 142);
}
/* 所有商品内容 */
.n{
width: 100%;
height: auto;
background-color: white;
margin-bottom: 30px;
display: inline;
}
.n1{
border-top: 40px solid white;
background-color: rgb(237, 231, 231);
width: 250px;
height: 490px;
float: left;
}
.n2{
border-top: 40px solid white;
background-color: white;
}
</style>
</head>
<body>
<nav class="a">
<div class="a1">
https://www.taobao.com/
</div>
</nav>
<section class="c">
<div id="b">
<header class="b1">
<div class="b2">
<a href="https://www.taobao.com/">
<img src="./head.png" height="100px" width="200px">
</a>
<form action="" class="s">
<input type="text" class="text" placeholder="毛绒玩具">
<input type="submit" class="submit" value="搜索">
</form>
</div>
</header>
<div class="n">
<div class="n1">
<ul>
<li><b>分类</b></li><br>
<li>电脑 / 办公 / 文具</li><br>
<li>工业品 / 商业 / 定制</li><br>
<li>家电 / 手机 / 数码</li><br>
<li>家具 / 家装 / 家居</li><br>
<li>女装 / 男装 / 内衣</li><br>
<li>女鞋 / 男鞋 / 运动</li><br>
<li>汽车 / 珠宝 / 箱包</li><br>
<li>食品 / 生鲜 / 健康</li><br>
<li>母婴 / 童装 / 潮玩</li><br>
<li>美妆 / 洗护 / 宠物</li><br>
<li>娱乐 / 图书 / 鲜花</li><br>
</ul>
</div>
<div class="n2"><img src="./n2.png" height="65%" width="75%"></div>
</div>
</div>
</section>
</body>
</html>
商品
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>商品展示</title>
<style>
body {
font-family: Arial, sans-serif;
}
.header {
background-color: rgb(237, 145, 16);
color: white;
padding: 10px;
text-align: center;
border-radius: 5px 5px 0 0;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 20px;
}
.product {
width: 30%;
margin: 10px;
border: 1px solid gainsboro;
border-radius: 5px;
overflow: hidden;
position: relative;
cursor: pointer;
}
.product img {
width: 100%;
height: auto;
}
</style>
<script>
function showProductId(productId) {
alert("商品ID: " + productId);
}
</script>
</head>
<body>
<div class="header">淘宝</div>
<div class="container">
<div class="product">
<img src="./1.png" alt="商品图片">
</div>
<div class="product">
<img src="./2.png" alt="商品图片">
</div>
<div class="product">
<img src="./3.png" alt="商品图片">
</div>
<div class="product">
<img src="./4.png" alt="商品图片">
</div>
<div class="product">
<img src="./5.png" alt="商品图片">
</div>
<div class="product">
<img src="./6.png" alt="商品图片">
</div>
</body>
</html>
登录
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录页面</title>
<style>
*{
margin: 0;
padding: 0;
}
.div{
width: 100%;
height: 800px;
background-image: url(./hui.png);
background-size: 100%;
}
.login{
margin-top: 10px;
margin-left: 350px;
width: 700px;
height: 450px;
background-color: white;
}
input[type='text']{
margin-top: 100px;
margin-left: 35px;
width: 350px;
height: 60px;
}
input[type='password']{
margin-top: 50px;
margin-left: 35px;
width: 350px;
height: 60px;
}
input[type='submit']{
margin-top: 50px;
margin-left: 35px;
width: 350px;
height: 60px;
background-color: rgb(251, 82, 21);
color: white;
}
.login img{
margin-top: 10px;
margin-bottom: 10px;
width: 300px;
height: 350px;
float: right;
}
.login div{
margin-top: auto;
margin-left: 125px;
}
</style>
</head>
<body>
<div class="div">
<header>
<img src="./head.png" alt="">
</header>
<div class="login">
<img src="./扫码.png" alt="">
<div style="font-size: 35px;"><b>密码登录</b></div>
<input type="text" placeholder="用户名/邮箱/手机号"><br>
<input type="password" name="password" id="" placeholder="请输入登录密码"><br>
<input type="submit" value="登录">
</div>
</div>
</body>
</html>