<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网站首页美化版</title>
<style>
.top{
float: left;
width: 33%;
height: 65px;
}
.amenu{
color: white;
text-decoration: none;
line-height: 50px;
}
.price{
color: red;
}
.pot{
float: left;
width: 16.66%;
height: 50%;
text-align: center;
}
</style>
</head>
<body>
<div>
<div class="top"><img src="img/6.png"/></div>
<div class="top"><img src="img/5.jpg"/></div>
<div class="top" style="line-height: 50px; text-align: center;">
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</div>
</div>
<div style="clear: both;"></div>
<div style="height: 50px; background-color: black; width: 100%;">
<a href="#" class="amenu"><font color="white">首页</font></a>
<a href="#" class="amenu"><font color="white">手机数码</font></a>
<a href="#" class="amenu"><font color="white">鞋靴箱包</font></a>
<a href="#" class="amenu"><font color="white">电脑办公</font></a>
<a href="#" class="amenu"><font color="white">香烟酒水</font></a>
</div>
<div>
<img src="img/1.jpg" width="100%"/>
</div>
<div>
<h3>最新商品<img src="img/9.jpg"/></h3>
</div>
<div style="float: left; width: 15%; height: 475px; border: 1px;">
<img src="img/3.jpg" width="100%" height="100%"/>
</div>
<div style="float: left; width: 85%; height: 475px;">
<div style="float: left; width: 50%; height: 50%;">
<img src="img/7.jpg" width="100%" height="100%"/>
</div>
<div class="pot">
<img src="img/8.jpg"/>
<p>锅</p>
<p class="price">￥99</p>
</div>
<div class="pot">
<img src="img/8.jpg"/>
<p>锅</p>
<p class="price">￥99</p>
</div>
<div class="pot">
<img src="img/8.jpg"/>
<p>锅</p>
<p class="price">￥99</p>
</div>
<div class="pot">
<img src="img/8.jpg"/>
<p>锅</p>
<p class="price">￥99</p>
</div>
<div class="pot">
<img src="img/8.jpg"/>
<p>锅</p>
<p class="price">￥99</p>
</div>
<div class="pot">
<img src="img/8.jpg"/>
<p>锅</p>
<p class="price">￥99</p>
</div>
<div class="pot">
<img src="img/8.jpg"/>
<p>锅</p>
<p class="price">￥99</p>
</div>
<div class="pot">
<img src="img/8.jpg"/>
<p>锅</p>
<p class="price">￥99</p>
</div>
<div class="pot">
<img src="img/8.jpg"/>
<p>锅</p>
<p class="price">￥99</p>
</div>
</div>
<div style="clear: both;"></div>
<div>
<img src="img/2.jpg" width="100%"/>
</div>
<div>
<h3>热门商品<img src="img/9.jpg"/></h3>
</div>
<div style="float: left; width: 15%; height: 475px; border: 1px;">
<img src="img/3.jpg" width="100%" height="100%"/>
</div>
<div style="float: left; width: 85%; height: 475px;">
<div style="float: left; width: 50%; height: 50%;">
<img src="img/7.jpg" width="100%" height="100%"/>
</div>
<div class="pot">
<img src="img/8.jpg"/>
<p>锅</p>
<p class="price">￥99</p>
</div>
<div class="pot">
<img src="img/8.jpg"/>
<p>锅</p>
<p class="price">￥99</p>
</div>
<div class="pot">
<img src="img/8.jpg"/>
<p>锅</p>
<p class="price">￥99</p>
</div>
<div class="pot">
<img src="img/8.jpg"/>
<p>锅</p>
<p class="price">￥99</p>
</div>
<div class="pot">
<img src="img/8.jpg"/>
<p>锅</p>
<p class="price">￥99</p>
</div>
<div class="pot">
<img src="img/8.jpg"/>
<p>锅</p>
<p class="price">￥99</p>
</div>
<div class="pot">
<img src="img/8.jpg"/>
<p>锅</p>
<p class="price">￥99</p>
</div>
<div class="pot">
<img src="img/8.jpg"/>
<p>锅</p>
<p class="price">￥99</p>
</div>
<div class="pot">
<img src="img/8.jpg"/>
<p>锅</p>
<p class="price">￥99</p>
</div>
</div>
<div style="clear: both;"></div>
<div>
<img src="img/4.jpg"/ width="100%">
</div>
<div style="text-align: center;">
<a href="#">关于我们</a>
<a href="#">联系我们</a>
<a href="#">招贤纳士</a>
<a href="#">法律声明</a>
<a href="#">友情链接</a>
<a href="#">支付方式</a>
<a href="#">配送方式</a>
<a href="#">服务声明</a>
<a href="#">广告声明</a>
<br/>
Copyright © 2005-2016 传智商城 版权所有
</div>
</body>
</html>
来源：https://www.cnblogs.com/yxfyg/p/12637229.html