<!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