版权声明：以上所有博客均为冷漠的小猿所有，引用请注明出处 https://blog.csdn.net/lyf1997115/article/details/82318323
整理笔记，淘出来了以前刚学HTML时的简单网页，贴出来留个纪念吧….
预览：
代码：
HTML部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>淘宝特卖</title>
<link rel="stylesheet" type="text/css" href="css/淘宝.css"/>
</head>
<body>
<div id="main" align="center">
<hr />
<div class="top_0">
<div class="top_0_0">
<a href="#" class="a1">亲，请登录</a> <a href="#"class="a2">免费注册</a> <a href="#" class="a2">手机逛淘宝</a>
</div>
<div class="top_0_1">
<a href="#" class="a1">淘宝网首页<a href="#" class="a1">
<a href="#"class="a2">我的淘宝 </a>
<a href="#"class="a2">购物车 </a>
<a href="#"class="a2">收藏夹 </a>
<a href="#"class="a2">商品分类 </a>
<a href="#"class="a2">卖家中心 </a>
<a href="#"class="a2">联系客服 </a>
<a href="#"class="a2">网站导航 </a>
</div>
</div>
<div id="top_1">
<div style="float: left; width: 260px;" >
<img style="margin-top:25px;" src="img/0001.png"/>
</div>
<div style="float: left; height: 100%; width: 800px;">
<input id="selBox" type="text" name="selectBox"/>
<input id="submit" type="submit" value="搜索" />
<p style="margin-left: -350px; margin-top: 0px; font-size: 14px;">客厅灯 冲锋衣 床底 沙发垫 电脑桌 鞋柜</p>
</div>
</div>
<div style="text-align: left; padding-top: 10px;" class="top_0">
<p style="margin: 0px 20px; font-size: 12px ;">您是不是想找：客厅灯 | 冲锋衣 | 床底 | 沙发垫 | 电脑桌 | 鞋柜</p>
</div>
<div id="middle_0">
<div style="float: left; margin: 2px 20px;">
价格：<input type="text" name="min" />---<input type="text" name="max"/>
</div>
<div style="float: right; margin: 5px 20px;">
<input type="checkbox" name="baoyou" value="包邮"/>包邮
<input type="checkbox" name="baoyou" value="包邮"/>包邮
<input type="checkbox" name="baoyou" value="包邮"/>包邮
</div>
</div>
<div id="allCommodity">
<div class="commodity">
<img src="img/002.png"/>
<span class="s1">￥40.0 包邮</span><br />
<span class="s2">世界上最好的商品</span><br />
<span class="s3">浪色服饰专营店</span><br />
<p class="s4">如实描述4.8</p>
</div>
<div class="commodity">
<img src="img/003.png"/>
<span class="s1">￥40.0 包邮</span><br />
<span class="s2">世界上最好的商品</span><br />
<span class="s3">浪色服饰专营店</span><br />
<p class="s4">如实描述4.8</p>
</div>
<div class="commodity">
<img src="img/004.png"/>
<span class="s1">￥40.0 包邮</span><br />
<span class="s2">世界上最好的商品</span><br />
<span class="s3">浪色服饰专营店</span><br />
<p class="s4">如实描述4.8</p>
</div>
<div class="commodity">
<img src="img/005.png"/>
<span class="s1">￥40.0 包邮</span><br />
<span class="s2">世界上最好的商品</span><br />
<span class="s3">浪色服饰专营店</span><br />
<p class="s4">如实描述4.8</p>
</div>
<div class="commodity">
<img src="img/006.png"/>
<span class="s1">￥40.0 包邮</span><br />
<span class="s2">世界上最好的商品</span><br />
<span class="s3">浪色服饰专营店</span><br />
<p class="s4">如实描述4.8</p>
</div>
<div class="commodity">
<img src="img/007.png"/>
<span class="s1">￥40.0 包邮</span><br />
<span class="s2">世界上最好的商品</span><br />
<span class="s3">浪色服饰专营店</span><br />
<p class="s4">如实描述4.8</p>
</div>
<div class="commodity">
<img src="img/008.png"/>
<span class="s1">￥40.0 包邮</span><br />
<span class="s2">世界上最好的商品</span><br />
<span class="s3">浪色服饰专营店</span><br />
<p class="s4">如实描述4.8</p>
</div>
<div class="commodity">
<img src="img/009.png"/>
<span class="s1">￥40.0 包邮</span><br />
<span class="s2">世界上最好的商品</span><br />
<span class="s3">浪色服饰专营店</span><br />
<p class="s4">如实描述4.8</p>
</div>
<div class="commodity">
<img src="img/010.png"/>
<span class="s1">￥40.0 包邮</span><br />
<span class="s2">世界上最好的商品</span><br />
<span class="s3">浪色服饰专营店</span><br />
<p class="s4">如实描述4.8</p>
</div>
<div class="commodity">
<img src="img/011.png"/>
<span class="s1">￥40.0 包邮</span><br />
<span class="s2">世界上最好的商品</span><br />
<span class="s3">浪色服饰专营店</span><br />
<p class="s4">如实描述4.8</p>
</div>
</div>
</div>
</body>
</html>
css样式：
body{
margin-top: 0;
text-align: center;
}
#main{
width: 1350px;
text-align: center;
margin: 0 auto;
}
.top_0{
background-color: #DDD;
height: 30px;
width: 98%;
border-radius: 5px;
margin: 0 auto;
}
.top_0_0{
margin: 2px 30px;
float: left;
}
.top_0_1{
margin-top: 2px;
margin-right: 30px;
float: right;
}
.a1{
text-decoration: none;
font-size: 12px;
color: darkorange;
}
.a2{
text-decoration: none;
font-size: 12px;
color: black;
}
#top_1{
height: 115px;
width: 98%;
margin: 0 auto;
}
#selBox{
margin-top: 30px;
width: 500px;
height: 25px;
border-radius: 10px;
}
#submit{
font-size: 18px;
height: 30px;
width: 60px;
border-radius: 10px;
margin-left: 30px;
}
#middle_0{
border: 1px solid #DDD;
height: 30px;
width: 98%;
border-radius: 5px;
margin: 0 auto;
margin-top: 10px;
}
#allCommodity{
margin-left:10px;
}
#allCommodity div{
float: left;
margin-left: 10px;
margin-top: 15px;
}
.commodity{
height: 370px;
width:250px ;
border: 1px solid #AAA;
}
.commodity img{
width: 220px;
height: 280px;
}
.commodity span{
font-weight: 700;
font-family: '宋体';
}
.s1{
color: darkorange;
}
.s3{
color: #AAA;
}
.commodity p{
font-weight: 700;
font-family: '宋体';
color: #AAA;
margin-top: 0;
margin-right: -140px;
}