根据产品文档,完成商城首页,显示效果如图
表格标签table
table标签
常用的属性:
tr 标签
td 标签
合并单元格:
colspan : 跨列操作rowspan : 跨行操作表格的嵌套:在td中可以嵌套一个表格
常用的属性:
width=”100%”填充
<!doctype html><html><head><meta chart="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/big0英文名取名1.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"><orlando bloomh3>热门商品<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>
本文发布于:2023-04-07 10:42:07，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/b6f7e2392fdd9c7a414bb11a1293044a.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：使用HTML设计商城首页.doc
本文 PDF 下载地址：使用HTML设计商城首页.pdf
| 留言与评论（共有 0 条评论） |
