用表格做，具体代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>#案例2-html实现类淘宝页面#</title> </head> <body> <table width="80%" align="center"> <tr> <td> <table width="100%" align="center" cellpadding="0px" cellspacing="0px" border="1"> <tr> <td width="33.3%"> <img src="01_ali_logo.png"> </td> <td width="33.3%"> </td> <td width="33.3%" align="center"> <a href="#">登录</a> <a href="#">注册<a> <a href="#">购物车</a> </td> </tr> </table> </td> </tr> <tr style="height: 50px"> <td bgcolor="#ff8c00" style="border: 1px solid red"> <a href="#" style="padding: 50px"><span style="font-size: 25px;color: white;">首页</span> <a href="#" style="padding: 50px"><span style="font-size: 20px;color: white;">电子数码</span> <a href="#" style="padding: 50px"><span style="font-size: 20px;color: white;">电脑办公</span> <a href="#" style="padding: 50px"><span style="font-size: 20px;color: white;">运动户外</span> <a href="#" style="padding: 50px"><span style="font-size: 20px;color: white;">衣服家具</span> <a href="#" style="padding: 50px"><span style="font-size: 20px;color: white;">生活用品</span> <a href="#" style="padding: 50px"><span style="font-size: 20px;color: white;">浏览历史</span> </td> </tr> <tr> <td> <img src="https://s1.tuchong.com/content-image/201805/bb6532bae9f17785ab3191642bd9b292.jpg" width="100%"> </td> </tr> <tr> <td> <table style="height: 500px;width: 100%;" border="1"> <tr style="height: 50px"> <td bgcolor="#ff8c00" colspan="7"> <b style="color: white;font-size: 20px;padding: 30px">最新商品</b> </td> </tr> <tr> <td bgcolor="#ff8c00" rowspan="2"> <img src="01_ali_logo.png" style="width: 300px"> </td> <td align="center" colspan="3"> <img src="01_ali_logo.png"> </td> <td align="center" style="margin: auto"> <img src="01_ali_logo.png"> <p style="font-size: 15px">巴厘岛沙滩裙女夏2017新款显瘦海边度假白色仙女裙泰国普吉岛裙子</p> <p style=" color:red;font-size:25px;">¥99.90</p> </td> <td align="center" style="margin: auto"> <img src="01_ali_logo.png"> <p style="font-size: 15px">巴厘岛沙滩裙女夏2017新款显瘦海边度假白色仙女裙泰国普吉岛裙子</p> <p style=" color:red;font-size:25px;">¥99.90</p> </td> <td align="center" style="margin: auto"> <img src="01_ali_logo.png"> <p style="font-size: 15px">巴厘岛沙滩裙女夏2017新款显瘦海边度假白色仙女裙泰国普吉岛裙子</p> <p style=" color:red;font-size:25px;">¥99.90</p> </td> </tr> <tr> <td align="center" style="margin: auto"> <img src="01_ali_logo.png"> <p style="font-size: 15px">巴厘岛沙滩裙女夏2017新款显瘦海边度假白色仙女裙泰国普吉岛裙子</p> <p style=" color:red;font-size:25px;">¥99.90</p> </td> <td align="center" style="margin: auto"> <img src="01_ali_logo.png"> <p style="font-size: 15px">巴厘岛沙滩裙女夏2017新款显瘦海边度假白色仙女裙泰国普吉岛裙子</p> <p style=" color:red;font-size:25px;">¥99.90</p> </td> <td align="center" style="margin: auto"> <img src="01_ali_logo.png"> <p style="font-size: 15px">巴厘岛沙滩裙女夏2017新款显瘦海边度假白色仙女裙泰国普吉岛裙子</p> <p style=" color:red;font-size:25px;">¥99.90</p> </td> <td align="center" style="margin: auto"> <img src="01_ali_logo.png"> <p style="font-size: 15px">巴厘岛沙滩裙女夏2017新款显瘦海边度假白色仙女裙泰国普吉岛裙子</p> <p style=" color:red;font-size:25px;">¥99.90</p> </td> <td align="center" style="margin: auto"> <img src="01_ali_logo.png"> <p style="font-size: 15px">巴厘岛沙滩裙女夏2017新款显瘦海边度假白色仙女裙泰国普吉岛裙子</p> <p style=" color:red;font-size:25px;">¥99.90</p> </td> <td align="center" style="margin: auto"> <img src="01_ali_logo.png"> <p style="font-size: 15px">巴厘岛沙滩裙女夏2017新款显瘦海边度假白色仙女裙泰国普吉岛裙子</p> <p style=" color:red;font-size:25px;">¥99.90</p> </td> </tr> </table> </td> </tr> <tr> <td> <img src="https://img.alicdn.com/simba/img/TB1J.BIcWmWBuNkHFJHSuuatVXa.jpg" width="100%"> </td> </tr> <tr> <td> <table style="height: 500px;" border="1"> <tr style="height: 50px"> <td bgcolor="purple" colspan="7"> <b style="color: white;font-size: 20px;padding: 30px">热门商品</b> </td> </tr> <tr> <td bgcolor="#ff8c00" rowspan="2"> <img src="01_ali_logo.png" style="width: 300px"> </td> <td align="center" colspan="3" width="300px" height="200px"> <img src="01_ali_logo.png"> </td> <td align="center" style="margin: auto"> <img src="01_ali_logo.png"> <p style="font-size: 15px">巴厘岛沙滩裙女夏2017新款显瘦海边度假白色仙女裙泰国普吉岛裙子</p> <p style=" color:red;font-size:25px;">¥99.90</p> </td> <td align="center" style="margin: auto"> <img src="01_ali_logo.png"> <p style="font-size: 15px">巴厘岛沙滩裙女夏2017新款显瘦海边度假白色仙女裙泰国普吉岛裙子</p> <p style=" color:red;font-size:25px;">¥99.90</p> </td> <td align="center" style="margin: auto"> <img src="01_ali_logo.png"> <p style="font-size: 15px">巴厘岛沙滩裙女夏2017新款显瘦海边度假白色仙女裙泰国普吉岛裙子</p> <p style=" color:red;font-size:25px;">¥99.90</p> </td> </tr> <tr> <td align="center" style="margin: auto"> <img src="01_ali_logo.png"> <p style="font-size: 15px">巴厘岛沙滩裙女夏2017新款显瘦海边度假白色仙女裙泰国普吉岛裙子</p> <p style=" color:red;font-size:25px;">¥99.90</p> </td> <td align="center" style="margin: auto"> <img src="01_ali_logo.png"> <p style="font-size: 15px">巴厘岛沙滩裙女夏2017新款显瘦海边度假白色仙女裙泰国普吉岛裙子</p> <p style=" color:red;font-size:25px;">¥99.90</p> </td> <td align="center" style="margin: auto"> <img src="01_ali_logo.png"> <p style="font-size: 15px">巴厘岛沙滩裙女夏2017新款显瘦海边度假白色仙女裙泰国普吉岛裙子</p> <p style=" color:red;font-size:25px;">¥99.90</p> </td> <td align="center" style="margin: auto"> <img src="01_ali_logo.png"> <p style="font-size: 15px">巴厘岛沙滩裙女夏2017新款显瘦海边度假白色仙女裙泰国普吉岛裙子</p> <p style=" color:red;font-size:25px;">¥99.90</p> </td> <td align="center" style="margin: auto"> <img src="01_ali_logo.png"> <p style="font-size: 15px">巴厘岛沙滩裙女夏2017新款显瘦海边度假白色仙女裙泰国普吉岛裙子</p> <p style=" color:red;font-size:25px;">¥99.90</p> </td> <td align="center" style="margin: auto"> <img src="01_ali_logo.png"> <p style="font-size: 15px">巴厘岛沙滩裙女夏2017新款显瘦海边度假白色仙女裙泰国普吉岛裙子</p> <p style=" color:red;font-size:25px;">¥99.90</p> </td> </tr> </table> </td> </tr> <tr> <td> <img src="https://img.alicdn.com/simba/img/TB1J.BIcWmWBuNkHFJHSuuatVXa.jpg" width="100%"> </td> </tr> <tr> <td align="center"> <br> <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> <a href="#">法律声明</a> <a href="#">知识产权</a> <br> <p>© 2003-现在 Taobao.com 版权所有</p> </td> </tr> </table> </body> </html>
运行结果如下图所示：
*****************END************************