網站首頁
需求分析
根據產品文檔,完成商城首頁,顯示效果如圖
技術分析
表格標簽table
table標簽
常用的屬性:
- bgcolor : 背景色
- width : 寬度
- height : 高度
- align : 對齊方式
tr 標簽
td 標簽
合並單元格:
- colspan : 跨列操作
- rowspan : 跨行操作
注意: 跨行或者跨列操作之后,被占掉的格子需要刪除掉
表格的嵌套:在td中可以嵌套一個表格
常用的屬性:
width="100%"填充
步驟分析
- 創建一個8行一列的表格
- 第一部份: LOGO部分: 嵌套一個一行三列的表格
- 第二部分: 導航欄部分 : 放置5個超鏈接
- 第三部分: 輪播圖
- 第四部分: 嵌套一個三行7列表格
- 第五部分: 直接放一張圖片
- 第六部分: 抄第四部分的
- 第七部分: 放置一張圖片
- 第八部分: 放一堆超鏈接
代碼實現
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
1. 創建一個8行一列的表格
2. 第一部份: LOGO部分: 嵌套一個一行三列的表格
3. 第二部分: 導航欄部分 : 放置5個超鏈接
4. 第三部分: 輪播圖
5. 第四部分: 嵌套一個三行7列表格
6. 第五部分: 直接放一張圖片
7. 第六部分: 抄第四部分的
8. 第七部分: 放置一張圖片
9. 第八部分: 放一堆超鏈接
-->
<table width="100%" >
<!--第一部份: LOGO部分: 嵌套一個一行三列的表格-->
<tr>
<td>
<table width="100%">
<tr>
<td>
<img src="../img/logo2.png" />
</td>
<td>
<img src="../image/header.jpg" />
</td>
<td>
<a href="#">登錄</a>
<a href="#">注冊</a>
<a href="#">購物車</a>
</td>
</tr>
</table>
</td>
</tr>
<!--第二部分: 導航欄部分 : 放置5個超鏈接-->
<tr bgcolor="black">
<td height="50px">
<a href="#"><font color="white">首頁</font></a>
<a href="#"><font color="white">手機數碼</font></a>
<a href="#"><font color="white">鞋靴箱包</font></a>
<a href="#"><font color="white">電腦辦公</font></a>
<a href="#"><font color="white">香煙酒水</font></a>
</td>
</tr>
<!--第三部分: 輪播圖 -->
<tr>
<td>
<img src="../img/1.jpg" width="100%" />
</td>
</tr>
<!--第四部分: 嵌套一個三行7列表格-->
<tr>
<td>
<table width="100%" height="500px">
<tr>
<td colspan="7">
<h3>最新商品<img src="../img/title2.jpg"></h3>
</td>
</tr>
<tr align="center">
<!--左邊大圖的-->
<td rowspan="2" width="206px" height="480px">
<img src="../products/hao/big01.jpg" />
</td>
<td colspan="3" height="240px">
<img src="../products/hao/middle01.jpg" width="100%" height="100%" />
</td>
<td>
<img src="../products/hao/small06.jpg" />
<p>洗衣機</p>
<p><font color="red">$998</font></p>
</td>
<td>
<img src="../products/hao/small06.jpg" />
<p>洗衣機</p>
<p><font color="red">$998</font></p>
</td>
<td>
<img src="../products/hao/small06.jpg" />
<p>洗衣機</p>
<p><font color="red">$998</font></p>
</td>
</tr>
<tr align="center">
<td>
<img src="../products/hao/small06.jpg" />
<p>洗衣機</p>
<p><font color="red">$998</font></p>
</td>
<td>
<img src="../products/hao/small06.jpg" />
<p>洗衣機</p>
<p><font color="red">$998</font></p>
</td>
<td>
<img src="../products/hao/small06.jpg" />
<p>洗衣機</p>
<p><font color="red">$998</font></p>
</td>
<td>
<img src="../products/hao/small06.jpg" />
<p>洗衣機</p>
<p><font color="red">$998</font></p>
</td>
<td>
<img src="../products/hao/small06.jpg" />
<p>洗衣機</p>
<p><font color="red">$998</font></p>
</td>
<td>
<img src="../products/hao/small06.jpg" />
<p>洗衣機</p>
<p><font color="red">$998</font></p>
</td>
</tr>
</table>
</td>
</tr>
<!--第五部分: 直接放一張圖片-->
<tr>
<td>
<img src="../products/hao/ad.jpg" width="100%" />
</td>
</tr>
<!--第六部分: 抄第四部分的-->
<tr>
<td>
<table width="100%" height="500px">
<tr>
<td colspan="7">
<h3>熱門商品<img src="../img/title2.jpg"></h3>
</td>
</tr>
<tr align="center">
<!--左邊大圖的-->
<td rowspan="2" width="206px" height="480px">
<img src="../products/hao/big01.jpg" />
</td>
<td colspan="3" height="240px">
<img src="../products/hao/middle01.jpg" width="100%" height="100%" />
</td>
<td>
<img src="../products/hao/small06.jpg" />
<p>洗衣機</p>
<p><font color="red">$998</font></p>
</td>
<td>
<img src="../products/hao/small06.jpg" />
<p>洗衣機</p>
<p><font color="red">$998</font></p>
</td>
<td>
<img src="../products/hao/small06.jpg" />
<p>洗衣機</p>
<p><font color="red">$998</font></p>
</td>
</tr>
<tr align="center">
<td>
<img src="../products/hao/small06.jpg" />
<p>洗衣機</p>
<p><font color="red">$998</font></p>
</td>
<td>
<img src="../products/hao/small06.jpg" />
<p>洗衣機</p>
<p><font color="red">$998</font></p>
</td>
<td>
<img src="../products/hao/small06.jpg" />
<p>洗衣機</p>
<p><font color="red">$998</font></p>
</td>
<td>
<img src="../products/hao/small06.jpg" />
<p>洗衣機</p>
<p><font color="red">$998</font></p>
</td>
<td>
<img src="../products/hao/small06.jpg" />
<p>洗衣機</p>
<p><font color="red">$998</font></p>
</td>
<td>
<img src="../products/hao/small06.jpg" />
<p>洗衣機</p>
<p><font color="red">$998</font></p>
</td>
</tr>
</table>
</td>
</tr>
<!-- 第七部分: 放置一張圖片-->
<tr>
<td>
<img src="../image/footer.jpg" width="100%" />
</td>
</tr>
<!--第八部分: 放一堆超鏈接-->
<tr>
<td 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 傳智商城 版權所有
</td>
</tr>
</table>
</body>
</html>