列表:
DIV:
<style>
.logo{
float: left;
width: 33%;
height: 60px;
line-height: 60px;
}
.menu{
width: 18%;
display: inline-block;
text-align: center;
text-decoration: none;
line-height: 50px;
height: 50px;
}
.product{
float: left;
text-align: center;
width: 16.6%;
height: 240px;
}
</style>
<div style="background-color: black;height: 50px">
<a href="#" class="menu"><font color="white">首页</font></a>
<a href="#" class="menu"><font color="white">手机数码</font></a>
<a href="#" class="menu"><font color="white">鞋靴箱包</font></a>
<a href="#" class="menu"><font color="white">电脑办公</font></a>
<a href="#" class="menu"><font color="white">香烟酒水</font></a>
</div>
<div>
<img src="../img/1.jpg" width="100%">
</div>
<div>
<div><h2>最新商品<img src="../img/title2.jpg"></h2></div>
<div style="float: left;height: 480px">
<img src="../products/hao/big01.jpg">
</div>
<div style="float: left;height: 480px;width: 80%">
<div style="float: left;width: 50%;height: 240px">
<img src="../products/hao/middle01.jpg" width="100%" height="100%">
</div>
<div class="product">
<img src="../products/hao/small06.jpg">
<p>洗衣机</p>
<p style="color: red;">$999</p>
</div>
<div class="product">
<img src="../products/hao/small06.jpg">
<p>洗衣机</p>
<p style="color: red;">$999</p>
</div>
<div class="product">
<img src="../products/hao/small06.jpg">
<p>洗衣机</p>
<p style="color: red;">$999</p>
</div>
<div class="product">
<img src="../products/hao/small06.jpg">
<p>洗衣机</p>
<p style="color: red;">$999</p>
</div>
<div class="product">
<img src="../products/hao/small06.jpg">
<p>洗衣机</p>
<p style="color: red;">$999</p>
</div>
<div class="product">
<img src="../products/hao/small06.jpg">
<p>洗衣机</p>
<p style="color: red;">$999</p>
</div>
<div class="product">
<img src="../products/hao/small06.jpg">
<p>洗衣机</p>
<p style="color: red;">$999</p>
</div>
<div class="product">
<img src="../products/hao/small06.jpg">
<p>洗衣机</p>
<p style="color: red;">$999</p>
</div>
<div class="product">
<img src="../products/hao/small06.jpg">
<p>洗衣机</p>
<p style="color: red;">$999</p>
</div>
</div>
</div>
<div>
<img src="../products/hao/ad.jpg" width="100%">
</div>
<div>
<img src="../img/footer.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>
</div>
<div style="text-align: center">
Copyright @ 2019-2039 中软国际 版权所有
</div>