使用HTML设计商城首页
程序员文章站
2022-06-24 10:14:30
网站首页 需求分析 根据产品文档,完成商城首页,显示效果如图 技术分析 表格标签table table标签 常用的属性: bgcolor : 背景色 width : 宽度 height : 高度 align : 对齐方式 tr 标签 td 标签 合并单元格: colspan : 跨列操作 rowsp ......
网站首页
需求分析
根据产品文档,完成商城首页,显示效果如图
技术分析
表格标签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>