HTML（四）
程序员文章站
2022-04-21 20:10:14
...
4.网站首页
4.1需求分析:
根据产品文档,完成商城首页，如下图:
4.2技术分析:
表格标签table：
table标签:
常用的属性:
bgcolor : 背景色
width : 宽度
height : 高度
align : 对齐方式
tr 标签（行）
td 标签（列）
合并单元格:
colspan : 跨列操作
rowspan : 跨行操作
注意: 跨行或者跨列操作之后,被占掉的格子需要删除掉
表格的嵌套:
在td中可以嵌套一个表格
4.3步骤分析
创建一个8行一列的表格
第一部份: LOGO部分: 嵌套一个一行三列的表格
第二部分: 导航栏部分 : 放置5个超链接
第三部分: 轮播图
第四部分: 嵌套一个三行7列表格
第五部分: 直接放一张图片
第六部分: 抄第四部分的
第七部分: 放置一张图片
第八部分: 放一堆超链接
4.4代码实现
<!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 border="1px" width="100%">
<!--第一部份: LOGO部分: 嵌套一个一行三列的表格-->
<tr>
<td>
<table border="1px" width="100%">
<tr>
<td align="center">
<img src="../img/logo.jpg" height="44" />
</td>
<td align="center">
<img src="../img/header.png"/>
</td>
<td align="center">
<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"><b>首页</b></font></a>
<a href="#"><font color="white"><b>手机数码</b></font></a>
<a href="#"><font color="white"><b>鞋靴箱包</b></font></a>
<a href="#"><font color="white"><b>电脑办公</b></font></a>
<a href="#"><font color="white"><b>香烟酒水</b></font></a>
</td>
</tr>
<!--第三部分: 轮播图-->
<tr>
<td>
<img src="../img/1.jpg" width="100%"/>
</td>
</tr>
<!--第四部分: 嵌套一个三行7列表格-->
<tr>
<td>
<table border="1px" 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="../ProductsImg/big01.jpg"/>
</td>
<td colspan="3" height="240px">
<img src="../ProductsImg/middle01.jpg" width="100%" height="100%"/>
</td>
<td >
<img src="../ProductsImg/small03.jpg" />
<p><b>火锅</b></p>
<p><font color="red"><b>￥199</b></font></p>
</td>
<td>
<img src="../ProductsImg/small04.jpg" />
<p><b>电烤箱</b></p>
<p><font color="red"><b>￥398</b></font></p>
</td>
<td>
<img src="../ProductsImg/small05.jpg" />
<p><b>饮水机</b></p>
<p><font color="red"><b>￥298</b></font></p>
</td>
</tr>
<tr align="center">
<td >
<img src="../ProductsImg/small03.jpg" />
<p><b>火锅</b></p>
<p><font color="red"><b>￥199</b></font></p>
</td>
<td>
<img src="../ProductsImg/small04.jpg" />
<p><b>电烤箱</b></p>
<p><font color="red"><b>￥398</b></font></p>
</td>
<td>
<img src="../ProductsImg/small05.jpg" />
<p><b>饮水机</b></p>
<p><font color="red"><b>￥298</b></font></p>
</td> <td >
<img src="../ProductsImg/small03.jpg" />
<p><b>火锅</b></p>
<p><font color="red"><b>￥199</b></font></p>
</td>
<td>
<img src="../ProductsImg/small04.jpg" />
<p><b>电烤箱</b></p>
<p><font color="red"><b>￥398</b></font></p>
</td>
<td>
<img src="../ProductsImg/small05.jpg" />
<p><b>饮水机</b></p>
<p><font color="red"><b>￥298</b></font></p>
</td>
</tr>
</table>
</td>
</tr>
<!--第五部分: 直接放一张图片-->
<tr>
<td>
<img src="../ProductsImg/ad.jpg" width="100%"/>
</td>
</tr>
<!--第六部分: 抄第四部分的-->
<tr>
<td>
<table border="1px" 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" headers="480px">
<img src="../ProductsImg/big01.jpg" />
</td>
<td colspan="3" height="240px">
<img src="../ProductsImg/middle01.jpg" width="100%" height="100%"/>
</td>
<td >
<img src="../ProductsImg/small03.jpg" />
<p><b>火锅</b></p>
<p><font color="red"><b>￥199</b></font></p>
</td>
<td>
<img src="../ProductsImg/small04.jpg" />
<p><b>电烤箱</b></p>
<p><font color="red"><b>￥398</b></font></p>
</td>
<td>
<img src="../ProductsImg/small05.jpg" />
<p><b>饮水机</b></p>
<p><font color="red"><b>￥298</b></font></p>
</td>
</tr>
<tr align="center">
<td >
<img src="../ProductsImg/small03.jpg" />
<p><b>火锅</b></p>
<p><font color="red"><b>￥199</b></font></p>
</td>
<td>
<img src="../ProductsImg/small04.jpg" />
<p><b>电烤箱</b></p>
<p><font color="red"><b>￥398</b></font></p>
</td>
<td>
<img src="../ProductsImg/small05.jpg" />
<p><b>饮水机</b></p>
<p><font color="red"><b>￥298</b></font></p>
</td> <td >
<img src="../ProductsImg/small03.jpg" />
<p><b>火锅</b></p>
<p><font color="red"><b>￥199</b></font></p>
</td>
<td>
<img src="../ProductsImg/small04.jpg" />
<p><b>电烤箱</b></p>
<p><font color="red"><b>￥398</b></font></p>
</td>
<td>
<img src="../ProductsImg/small05.jpg" />
<p><b>饮水机</b></p>
<p><font color="red"><b>￥298</b></font></p>
</td>
</tr>
</table>
</td>
</tr>
<!--第七部分: 放置一张图片-->
<tr>
<td>
<img src="../ProductsImg/footer.jpg" width="100%"/>
</td>
</tr>
<!--第八部分: 放一堆超链接-->
<tr>
<td align="center">
<a href="#"><font color="blue">关于我们</font></a>
<a href="#"><font color="blue">联系我们</font></a>
<a href="#"><font color="blue">招贤纳士</font></a>
<a href="#"><font color="blue">法律声明</font></a>
<a href="#"><font color="blue">友情链接</font></a>
<a href="#"><font color="blue">支付方式</font></a>
<a href="#"><font color="blue">配送方式</font></a>
<a href="#"><font color="blue">服务声明</font></a>
<a href="#"><font color="blue">广告声明</font></a>
<p><font size="1">Copyright © 2015-2016 网站商城 版权所有</font></p>
</td>
</tr>
</table>
</body>
</html>
上一篇： 人人商城秒杀redis配置