使用JS完成网上商城的制作代码实现:
<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<title>使用DIV+CSS完成首页布局</title>
<style>
#father{
border: 1px solid red;
width: 1100px;
height: 2065px;
margin:auto;
}
.top{
border: 1px solid black;
width: 364.5px;
height: 50px;
float: left;
}
#top{
padding-top: 12px;
height: 38px;
}
#menu{
border: 1px solid red;
width: 1100px;
height: 50px;
background-color: black;
}
ul li{
display: inline;
/*此句表示显示到一行去*/
color: white;
}
#clear{
clear: both;
}
#product{
border: 1px solid red;
width: 100%;
height: 600px;
}
#product_top{
border: 1px solid blue;
width: 100%;
height: 50px;
padding-top: 15px;
}
#product_bottom{
border: 1px solid green;
width: 100%;
height: 532px;
}
#product_bottom_left{
border: 1px solid red;
width: 200px;
height: 532px;
float: left;
}
#product_bottom_right{
border: 1px solid blue;
width: 896px;
height: 532px;
float: left;
}
#big{
border: 1px solid red;
width: 445px;
height: 263px;
float: left;
}
.small{
border: 1px solid blue;
width: 147px;
height: 263px;
float: left;
/*让里面文本居中显示*/
text-align: center;
}
#buttom{
text-align: center;
}
a{
text-decoration: none;
}
</style>
</head>
<body>
<div id="father">
<!--1.logo部分-->
<div id="logo">
<div class="top">
<img src="../img/logo2.png" height="46px"/>
</div>
<div class="top">
<img src="../img/header.png" height="46px" />
</div>
<div class="top" id="top">
<a href="#">登录</a>
<a href="../案例一:网站注册页面/regist.html">注册</a>
<a href="#">购物车</a>
</div>
</div>
<div id="clear">
</div>
<!--2.导航栏部分-->
<div id="menu">
<ul>
<li style="font-size: 20px;">首页</li>
<li>手机数码</li>
<li>家用电器</li>
<li>数码箱包</li>
<li>孕婴保健</li>
<li>汽车产品</li>
</ul>
</div>
<!--3.轮播图-->
<div id="">
<img src="../img/1.jpg" width="100%"/>
</div>
<!--4.最新商品-->
<div id="product">
<div id="product_top">
<span style="font-size: 25px;">最新商品</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">
<a href="#">
<img src="../img/middle01.jpg" width="100%" height="100%" />
</a>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#">
<p style="color: gray;">电炖锅</p>
</a>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#">
<p style="color: gray;">电炖锅</p>
</a>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#">
<p style="color: gray;">电炖锅</p>
</a>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#">
<p style="color: gray;">电炖锅</p>
</a>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#">
<p style="color: gray;">电炖锅</p>
</a>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#">
<p style="color: gray;">电炖锅</p>
</a>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#">
<p style="color: gray;">电炖锅</p>
</a>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#">
<p style="color: gray;">电炖锅</p>
</a>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#">
<p style="color: gray;">电炖锅</p>
</a>
<p style="color: red;">¥399</p>
</div>
</div>
</div>
</div>
<!--5.广告图片-->
<div id="">
<img src="../img/ad.jpg" width="100%"height="100%" />
</div>
<!--6.热门商品-->
<div id="">
<span style="font-size: 25px;">热门商品</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">
<a href="#">
<img src="../img/middle01.jpg" width="100%" height="100%" />
</a>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#">
<p style="color: gray;">电炖锅</p>
</a>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#">
<p style="color: gray;">电炖锅</p>
</a>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#">
<p style="color: gray;">电炖锅</p>
</a>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#">
<p style="color: gray;">电炖锅</p>
</a>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#">
<p style="color: gray;">电炖锅</p>
</a>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#">
<p style="color: gray;">电炖锅</p>
</a>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#">
<p style="color: gray;">电炖锅</p>
</a>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#">
<p style="color: gray;">电炖锅</p>
</a>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#">
<p style="color: gray;">电炖锅</p>
</a>
<p style="color: red;">¥399</p>
</div>
</div>
<!--7.广告图片-->
<div id="">
<img src="../img/footer.jpg" width="100%"/>
</div>
<!--8.版权信息与友情链接-->
<div id="buttom">
<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>