HTML实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table border="0" width = "90%" align="center">
<!--
第一部分
-->
<tr>
<td>
<table width="100%" border="0">
<td>
<img src="img/logo2.png" />
</td>
<td>
<img src="img/header.png" />
</td>
<td width="15%">
<a href="#" style="text-decoration: none;">登录</a>
<a href="#" style="text-decoration: none;">注册</a>
<a href="#" style="text-decoration: none;">购物车</a>
</td>
</table>
</td>
</tr>
<!--
第二部分
-->
<tr>
<td>
<table width="100%" bgcolor="#000000" height=40>
<tr>
<td>
<a href="#" style="text-decoration: none;">首页</a>
<a href="#" style="text-decoration: none;">手机数码</a>
<a href="#" style="text-decoration: none;">电脑办公</a>
<a href="#" style="text-decoration: none;">烟酒糖茶</a>
<a href="#" style="text-decoration: none;">鞋靴箱包</a>
</td>
</tr>
</table>
</td>
</tr>
<!--
第三部分
-->
<tr>
<td>
<img src="img/okwu-athletics.jpg" width="100%"/>
</td>
</tr>
<!--
热门商品展示
-->
<tr>
<td>
<table width="100%">
<tr>
<td><font size="5"><b>热门商品展示</b></font><img src="images/title2.jpg"</td>
</tr>
<tr>
<td>
<table border="0" width="100%">
<tr>
<td rowspan="2" width="16%" height="400">
<img src="image/big01.jpg" width="100%" height="100%"/>
</td>
<td colspan="3" width="42%" height="200">
<img src="image/middle01.jpg" width="100%" height="100%"/>
</td>
<td align="center">
<img src="image/0ff130db-0a1b-4b8d-a918-ed9016317009-thumbnail.jpg" width="100%"
</td>
<td align="center">
<img src="image/0ff130db-0a1b-4b8d-a918-ed9016317009-thumbnail.jpg" width="100%"
</td>
<td align="center">
<img src="image/0ff130db-0a1b-4b8d-a918-ed9016317009-thumbnail.jpg" width="100%"
</td>
</tr>
<tr>
<td align="center">
<img src="image/0ff130db-0a1b-4b8d-a918-ed9016317009-thumbnail.jpg" width="100%"
</td>
<td align="center">
<img src="image/0ff130db-0a1b-4b8d-a918-ed9016317009-thumbnail.jpg" width="100%"
</td>
<td align="center">
<img src="image/0ff130db-0a1b-4b8d-a918-ed9016317009-thumbnail.jpg" width="100%"
</td>
<td align="center">
<img src="image/0ff130db-0a1b-4b8d-a918-ed9016317009-thumbnail.jpg" width="100%"
</td>
<td align="center">
<img src="image/0ff130db-0a1b-4b8d-a918-ed9016317009-thumbnail.jpg" width="100%"
</td>
<td align="center">
<img src="image/0ff130db-0a1b-4b8d-a918-ed9016317009-thumbnail.jpg" width="100%"
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!--
广告位
-->
<tr>
<td height="80">
<img src="image/ad.jpg" width="100%" height="100%">
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>
<font size="5"><b>最新商品</b></font><img src="images/title2.jpg" />
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td rowspan="2" width="16%" height="400">
<img src="image/big01.jpg" width="100%" height="100%"/>
</td>
<td colspan="3" width="42%" height="200">
<img src="image/middle01.jpg" width="100%" height="100%"/>
</td>
<td align="center">
<img src="image/0ff130db-0a1b-4b8d-a918-ed9016317009-thumbnail.jpg" width="100%"
</td>
<td align="center">
<img src="image/0ff130db-0a1b-4b8d-a918-ed9016317009-thumbnail.jpg" width="100%"
</td>
<td align="center">
<img src="image/0ff130db-0a1b-4b8d-a918-ed9016317009-thumbnail.jpg" width="100%"
</td>
</tr>
<tr>
<td align="center">
<img src="image/0ff130db-0a1b-4b8d-a918-ed9016317009-thumbnail.jpg" width="100%"
</td>
<td align="center">
<img src="image/0ff130db-0a1b-4b8d-a918-ed9016317009-thumbnail.jpg" width="100%"
</td>
<td align="center">
<img src="image/0ff130db-0a1b-4b8d-a918-ed9016317009-thumbnail.jpg" width="100%"
</td>
<td align="center">
<img src="image/0ff130db-0a1b-4b8d-a918-ed9016317009-thumbnail.jpg" width="100%"
</td>
<td align="center">
<img src="image/0ff130db-0a1b-4b8d-a918-ed9016317009-thumbnail.jpg" width="100%"
</td>
<td align="center">
<img src="image/0ff130db-0a1b-4b8d-a918-ed9016317009-thumbnail.jpg" width="100%"
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="100%">
<img src="image/footer.jpg" width="100%"/>
</td>
</tr>
<tr>
<td align="center">
<a href="#" style="text-decoration: none;">关于我们</a>
<a href="#" style="text-decoration: none;">联系我们</a>
<a href="#" style="text-decoration: none;">招贤纳士</a>
<a href="#" style="text-decoration: none;">法律声明</a>
<a href="#" style="text-decoration: none;">友情链接</a>
<a href="#" style="text-decoration: none;">支付方式</a>
<a href="#" style="text-decoration: none;">配送方式</a>
<a href="#" style="text-decoration: none;">服务方式</a>
<a href="#" style="text-decoration: none;">广告声明</a>
<br />
------------------------------------------------------------------------------------------------------
<br />
<font> Copyright © 2005-2016 传智商城 版权所有 </font>
</td>
</tr>
</table>
</body>
</html>
CSS实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*整个body*/
#bodyDiv{
width: 85%;
margin:0 auto;/*设置body居中*/
}
/*第一栏logo*/
.logoDiv{
float: left;
width: 33%;
height: 80px;
}
.logoDiv a{
text-decoration:none;/*去下划线*/
line-height: 80px; /*设置line-height与父级元素的height相等*/
/*overflow: hidden; /*防止内容超出容器或者产生自动换行*/
}
.clear{
clear: both;/*去除浮动*/
}
/*菜单栏*/
#menuDiv{
width: 100%;
height: 40px;
background-color: black;
}
#menuDiv a{
font-size: 20px;
color: white;
line-height: 40px;
text-decoration:none;/*去下划线*/
}
/*图片滚动栏*/
#imgDiv{
width: 100%;
}
/*最新商品*/
.product{
width: 100%;
}
.contentclass{
width: 100%;
}
.contentclass font{
font-size: 30px;
color: black;
}
/*底部链接*/
.linkDiv a{
font-size: 15px;
color: blue;
text-decoration: none;
}
</style>
</head>
<body>
<!--整个body-->
<div id="bodyDiv">
<!--logo栏-->
<div>
<div class="logoDiv">
<img src="img/logo2.png" />
</div>
<div class="logoDiv">
<img src="img/header.jpg" />
</div>
<div class="logoDiv" style="vertical-align:middle">
<a href="#" >登录</a>
<a href="#" >注册</a>
<a href="#" >购物车</a>
</div>
<div class="clear"></div>
</div>
<!--菜单栏-->
<div id="menuDiv">
<a href="#">首页</a>
<a href="#">手机数码</a>
<a href="#">电脑办公</a>
<a href="#">烟酒茶糖</a>
<a href="#">鞋靴箱包</a>
</div>
<!--图片滚动栏-->
<div id="imgDiv">
<img src="img/okwu-athletics.jpg" width="100%"/>
</div>
<!--热门商品栏-->
<div class="product">
<!--
热门商品+图片
-->
<div class="contentclass">
<font><b>热门商品</b></font><img src="images/title2.jpg"/>
</div>
<!--
商品类型
-->
<div style="width: 100%">
<!--第一列-->
<div style="width: 16%;height: 460px;float: left;" >
<img src="image/big01.jpg" width="100%" height="100%"/>
</div>
<!--剩下的横着排的-->
<div style="width: 84%;height: 460px;float: left;">
<!--第一行-->
<div>
<div style="width: 48%;height: 230px;float: left;">
<img src="image/middle01.jpg" width="100%" height="100%"/>
</div>
<div style="width: 16%;height: 230px;float: left;">
<img src="image/0ff130db-0a1b-4b8d-a918-ed9016317009-thumbnail.jpg">
</div>
<div style="width: 16%;height: 230px;float: left">
<img src="image/0ff130db-0a1b-4b8d-a918-ed9016317009-thumbnail.jpg">
</div>
<div style="width: 16%;height: 230px;float: left">
<img src="image/0ff130db-0a1b-4b8d-a918-ed9016317009-thumbnail.jpg">
</div>
</div>
<!--第二行-->
<div>
<div style="width: 16%;height: 230px;float: left">
<img src="image/0ff130db-0a1b-4b8d-a918-ed9016317009-thumbnail.jpg">
</div>
<div style="width: 16%;height: 230px;float: left">
<img src="image/0ff130db-0a1b-4b8d-a918-ed9016317009-thumbnail.jpg">
</div>
<div style="width: 16%;height: 230px;float: left">
<img src="image/0ff130db-0a1b-4b8d-a918-ed9016317009-thumbnail.jpg">
</div>
<div style="width: 16%;height: 230px;float: left">
<img src="image/0ff130db-0a1b-4b8d-a918-ed9016317009-thumbnail.jpg">
</div>
<div style="width: 16%;height: 230px;float: left">
<img src="image/0ff130db-0a1b-4b8d-a918-ed9016317009-thumbnail.jpg">
</div>
<div style="width: 16%;height: 230px;float: left">
<img src="image/0ff130db-0a1b-4b8d-a918-ed9016317009-thumbnail.jpg">
</div>
</div>
</div>
</div>
</div>
<!--广告栏-->
<div style="width: 100%;">
<img src="image/ad.jpg" width="100%" height="100%">
</div>
<!--最新商品栏-->
<div class="product">
<!--
最新商品+图片
-->
<div class="contentclass">
<font><b>最新商品</b></font><img src="images/title2.jpg"/>
</div>
<!--
商品类型
-->
<div style="width: 100%">
<!--第一列-->
<div style="width: 16%;height: 460px;float: left;" >
<img src="image/big01.jpg" width="100%" height="100%"/>
</div>
<!--剩下的横着排的-->
<div style="width: 84%;height: 460px;float: left;">
<!--第一行-->
<div>
<div style="width: 48%;height: 230px;float: left;">
<img src="image/middle01.jpg" width="100%" height="100%"/>
</div>
<div style="width: 16%;height: 230px;float: left;">
<img src="image/0ff130db-0a1b-4b8d-a918-ed9016317009-thumbnail.jpg">
</div>
<div style="width: 16%;height: 230px;float: left">
<img src="image/0ff130db-0a1b-4b8d-a918-ed9016317009-thumbnail.jpg">
</div>
<div style="width: 16%;height: 230px;float: left">
<img src="image/0ff130db-0a1b-4b8d-a918-ed9016317009-thumbnail.jpg">
</div>
</div>
<!--第二行-->
<div>
<div style="width: 16%;height: 230px;float: left">
<img src="image/0ff130db-0a1b-4b8d-a918-ed9016317009-thumbnail.jpg">
</div>
<div style="width: 16%;height: 230px;float: left">
<img src="image/0ff130db-0a1b-4b8d-a918-ed9016317009-thumbnail.jpg">
</div>
<div style="width: 16%;height: 230px;float: left">
<img src="image/0ff130db-0a1b-4b8d-a918-ed9016317009-thumbnail.jpg">
</div>
<div style="width: 16%;height: 230px;float: left">
<img src="image/0ff130db-0a1b-4b8d-a918-ed9016317009-thumbnail.jpg">
</div>
<div style="width: 16%;height: 230px;float: left">
<img src="image/0ff130db-0a1b-4b8d-a918-ed9016317009-thumbnail.jpg">
</div>
<div style="width: 16%;height: 230px;float: left">
<img src="image/0ff130db-0a1b-4b8d-a918-ed9016317009-thumbnail.jpg">
</div>
</div>
</div>
</div>
</div>
<!--图片栏-->
<div style="width: 100%;">
<img src="image/footer.jpg" width="100%"/>
</div>
<!--底栏-->
<center>
<div class="linkDiv" >
<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>
</div>
<div>
<font>--------------------------------------------------------------------------------------------------</font>
<br />
<font> Copyright © 2005-2016 传智商城 版权所有 </font>
</div>
</center>
</div>
</body>
</html>