当前位置: 代码迷 >> 综合 >> HTML 用div css布局商城-先将布局尺寸调节好后,再一点点往里面填东东
  详细解决方案

HTML 用div css布局商城-先将布局尺寸调节好后,再一点点往里面填东东

热度:0   发布时间:2024-02-13 18:21:14.0
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>网站首页</title><style>#father {border: 1px solid red;width: 1300px;height: 2170px;margin: auto;}#logo {border: 1px solid blue;height: 55px;padding: 3px;}.top {/* border: 1px solid green; */height: 60px;width: 427px;float: left;}.clear {clear: both;}#top {padding-top: 20px;height: 39px;}#menu {/* border: 1px solid blue; */height: 60px;background-color: black;padding-top: 1px;}#menu li {color: white;/* border: 1px solid green;			 */display: inline;}#product_top {/* border: 1px solid green;							 */padding-left: 3px;height: 50px;}#product_bottom {border: 1px solid green;height: 500px;}#product_bottom_left {border: 1px solid red;float: left;width: 200px;height: 500px;}#product_bottom_right {border: 1px solid blue;float: left;width: 1094px;height: 500px;}#big {border: 1px solid blue;float: left;height: 248px;width: 544px;}/* 热门样式 */#rmproduct_top {/* border: 1px solid green;							 */padding-left: 3px;height: 50px;}#rmproduct_bottom {border: 1px solid green;height: 500px;}#rmproduct_bottom_left {border: 1px solid red;float: left;width: 200px;height: 500px;}#rmproduct_bottom_right {border: 1px solid blue;float: left;width: 1094px;height: 500px;}#rmbig {border: 1px solid blue;float: left;height: 248px;width: 544px;}.small {border: 1px solid blue;float: left;height: 248px;width: 180px;text-align: center;}#bottom{text-align: center;}</style></head><body><div id="father"><!-- logo --><div id="logo"><div class="top"><img src="../img/logo2.png" /></div><div class="top"><img src="../img/header.png" /></div><div class="top" id="top"><a href="#">登陆</a><a href="#">注册</a><a href="#">购物车</a></div></div><div class="clear"></div><!-- 导航栏 --><div id="menu"><ul><a><li style="font-size:20px;">首页</li></a>&nbsp;&nbsp;&nbsp;&nbsp;<a><li>手机数码</li></a>&nbsp;&nbsp;&nbsp;&nbsp;<a><li>电脑办公</li></a>&nbsp;&nbsp;&nbsp;&nbsp;<a><li>电脑办公</li></a>&nbsp;&nbsp;&nbsp;&nbsp;<a><li>电脑办公</li></a>&nbsp;&nbsp;&nbsp;&nbsp;</ul></div><!-- 轮播图 --><div><img src="../img/1.jpg" width="100%" /></div><!-- 最新商品 --><div id="product"><div id="product_top"><span style="font-size: 20px;">最新商品</span><img src="../img/title2.jpg" /></div><div id="product_bottom"><div id="product_bottom_left"><img src="../img/big01.jpg" width="100%" height="100%" /></div><div id="product_bottom_right"><div id="big"><img src="../img/middle01.jpg" width="100%" height="100%" /></div><div class="small"><img src="../img/small03.jpg" /><a href="#"><p style="color: grey;">电炖锅</p></a><p style="color: red;">¥499</p></div><div class="small"><img src="../img/small03.jpg" /><a href="#"><p style="color: grey;">电炖锅</p></a><p style="color: red;">¥499</p></div><div class="small"><img src="../img/small03.jpg" /><a href="#"><p style="color: grey;">电炖锅</p></a><p style="color: red;">¥499</p></div><div class="small"><img src="../img/small03.jpg" /><a href="#"><p style="color: grey;">电炖锅</p></a><p style="color: red;">¥499</p></div><div class="small"><img src="../img/small03.jpg" /><a href="#"><p style="color: grey;">电炖锅</p></a><p style="color: red;">¥499</p></div><div class="small"><img src="../img/small03.jpg" /><a href="#"><p style="color: grey;">电炖锅</p></a><p style="color: red;">¥499</p></div><div class="small"><img src="../img/small03.jpg" /><a href="#"><p style="color: grey;">电炖锅</p></a><p style="color: red;">¥499</p></div><div class="small"><img src="../img/small03.jpg" /><a href="#"><p style="color: grey;">电炖锅</p></a><p style="color: red;">¥499</p></div><div class="small"><img src="../img/small03.jpg" /><a href="#"><p style="color: grey;">电炖锅</p></a><p style="color: red;">¥499</p></div></div></div></div><!-- 广告 --><div><img src="../img/ad.jpg" width="100%" /></div><!-- 热门商品 --><div><div id="rmproduct"><div id="rmproduct_top"><span style="font-size: 20px;">热门商品</span><img src="../img/title2.jpg" /></div><div id="rmproduct_bottom"><div id="product_bottom_left"><img src="../img/big01.jpg" width="100%" height="100%" /></div><div id="rmproduct_bottom_right"><div id="rmbig"><img src="../img/middle01.jpg" width="100%" height="100%" /></div><div class="small"><img src="../img/small03.jpg" /><a href="#"><p style="color: grey;">电炖锅</p></a><p style="color: red;">¥499</p></div><div class="small"><img src="../img/small03.jpg" /><a href="#"><p style="color: grey;">电炖锅</p></a><p style="color: red;">¥499</p></div><div class="small"><img src="../img/small03.jpg" /><a href="#"><p style="color: grey;">电炖锅</p></a><p style="color: red;">¥499</p></div><div class="small"><img src="../img/small03.jpg" /><a href="#"><p style="color: grey;">电炖锅</p></a><p style="color: red;">¥499</p></div><div class="small"><img src="../img/small03.jpg" /><a href="#"><p style="color: grey;">电炖锅</p></a><p style="color: red;">¥499</p></div><div class="small"><img src="../img/small03.jpg" /><a href="#"><p style="color: grey;">电炖锅</p></a><p style="color: red;">¥499</p></div><div class="small"><img src="../img/small03.jpg" /><a href="#"><p style="color: grey;">电炖锅</p></a><p style="color: red;">¥499</p></div><div class="small"><img src="../img/small03.jpg" /><a href="#"><p style="color: grey;">电炖锅</p></a><p style="color: red;">¥499</p></div><div class="small"><img src="../img/small03.jpg" /><a href="#"><p style="color: grey;">电炖锅</p></a><p style="color: red;">¥499</p></div></div></div></div></div><!-- 广告 --><div><img src="../img/footer.jpg" width="100%" /></div><!--8.友情链接和版权信息--><div id="bottom"><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><p>Copyright ? 2005-2016 传智商城 版权所有</p></div></div></body>
</html>

 

  相关解决方案