網站首頁案例
阿新 • • 發佈：2018-11-07
目標網站
分析
1. 建立一個8行一列的表格
2. 第一部份: LOGO部分: 巢狀一個一行三列的表格
3. 第二部分: 導航欄部分 : 放置5個超連結
4. 第三部分: 輪播圖
5. 第四部分: 巢狀一個三行7列表格
6. 第五部分: 直接放一張圖片
7. 第六部分: 抄第四部分的
8. 第七部分: 放置一張圖片
9. 第八部分: 放一堆超連結
程式碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <table> <!--第一部分--> <tr> <td> <table width="100%" > <tr> <td> <img src="../img/logo2.png"/> </td> <td> <img src="../img/header.jpg" /> </td> <td width="300px"> <a href="#">登入</a> <a href="#">註冊</a> <a href="#">購物車</a> </td> </tr> </table> </td> </tr> <!--第二部分--> <tr bgcolor="black"> <td width="100%"> <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> <!--第四部分--> <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"> <img src="../products/hao/big01.jpg" width="100%" height="100%"/> </td> <td colspan="3"> <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"> <img src="../products/hao/big01.jpg" width="100%" height="100%"/> </td> <td colspan="3"> <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="../img/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>
執行結果：
