网站首页信息展示(table布局)
网站首页信息展示(table布局)
需求:
通过表格布局将首页信息展示
技术分析:
表格
表格标签:*
<table></table>
常用的子标签 :行
<tr></tr>
常用的子标签 :列
:表头单元格 默认居中加粗
注意:一行必须只有一个单元格或者一列
table的常用属性:
border:边框 像素值
width:
align:表格对齐方式
tr 的常用属性:
align:内容对齐
td 的常用属性:
align:内容对齐
colspan:跨列合并 值:合并的列数
rowspan:跨行合并
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table border="1" width="40%" height="200px" align="center" bgcolor="aqua">
<!--
作者:ygd
时间:2018-09-16
描述:创建一个四行三列的表格
-->
<tr align="center">
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>15</td>
<td>16</td>
<td>17</td>
</tr>
<tr>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
<tr>
<td>21</td>
<td align="center" bgcolor="red">22</td>
<td>23</td>
</tr>
</table>
<table border="1" width="30%" height="150px" align="center" bgcolor="chartreuse">
<tr align="center">
<th>11</th>
<th>12</th>
<th>13</th>
</tr>
<tr>
<td>15</td>
<td colspan="2" align="center" >16 & 17</td>
</tr>
<tr>
<td rowspan="2" align="center">18 & 21</td>
<td>19</td>
<td>20</td>
</tr>
<tr>
<td>22</td>
<td>23</td>
</tr>
</table>
</body>
</html>
步骤分析:
常见一个8行1列的表格
在第1行 放logo
嵌套一个1行3列的表格
第2行 放菜单
第3行 放图片
第4行 热门商品
嵌套一个2行7列的表格
第5行 放广告图片
第6行 最新商品
嵌套一个2行7列的表格
第7行 放一个图片
第8行 两个段落
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table border="1" width="100%" height="100px">
<!--八行一列-->
<!--
logo一行三列表格
-->
<tr>
<td>
<table width="100%">
<td>
<img src="../img/商城.jpg"/>
</td>
<td align="center">
<img src="../img/header.jpg"
</td>
<td align="right">
<a href="#">登录 </a>
<a href="#">注册 </a>
<a href="#">购物车 </a>
</td>
</table>
</td>
</tr>
<!--菜单-->
<tr>
<td bgcolor="black" height="40px">
<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>
<font size="6" face="微软雅黑">热门商品</font>
<img src="../img/title2.jpg" />
<table width="100%">
<tr >
<td rowspan="2" >
<img src="../img/big01.jpg" />
</td>
<td colspan="3">
<img src="../img/middle01.jpg"/>
</td>
<td>
<img src="../img/small08.jpg" />
<p align="center"><a href="#"><font color="black">电饭煲</font></a></p>
<p align="center"><font color="red">200¥</font> </p>
</td>
<td>
<img src="../img/small08.jpg" />
<p align="center"><a href="#"><font color="black">电饭煲</font></a></p>
<p align="center"><font color="red">200¥</font> </p>
</td>
<td>
<img src="../img/small08.jpg" />
<p align="center"><a href="#"><font color="black">电饭煲</font></a></p>
<p align="center"><font color="red">200¥</font> </p>
</td>
</tr>
<tr>
<td>
<img src="../img/small08.jpg" />
<p align="center"><a href="#"><font color="black">电饭煲</font></a></p>
<p align="center"><font color="red">200¥</font> </p>
</td>
<td>
<img src="../img/small08.jpg" />
<p align="center"><a href="#"><font color="black">电饭煲</font></a></p>
<p align="center"><font color="red">200¥</font> </p>
</td>
<td>
<img src="../img/small08.jpg" />
<p align="center"><a href="#"><font color="black">电饭煲</font></a></p>
<p align="center"><font color="red">200¥</font> </p>
</td>
<td>
<img src="../img/small08.jpg" />
<p align="center"><a href="#"><font color="black">电饭煲</font></a></p>
<p align="center"><font color="red">200¥</font> </p>
</td>
<td>
<img src="../img/small08.jpg" />
<p align="center"><a href="#"><font color="black">电饭煲</font></a></p>
<p align="center"><font color="red">200¥</font> </p>
</td>
<td>
<img src="../img/small08.jpg" />
<p align="center"><a href="#"><font color="black">电饭煲</font></a></p>
<p align="center"><font color="red">200¥</font> </p>
</td>
</tr>
</table>
</td>
</tr>
<!--广告-->
<tr>
<td>
<img src ="../img/ad.jpg" width="100%"/>
</td>
</tr>
<!--最新商品-->
<tr>
<td>
<font size="6" face="微软雅黑">最新商品</font>
<img src="../img/title2.jpg" "/>
<table width="100%">
<tr>
<td rowspan="2">
<img src="../img/big01.jpg" />
</td>
<td colspan="3">
<img src="../img/middle01.jpg"/>
</td>
<td>
<img src="../img/small08.jpg" />
<p align="center"><a href="#"><font color="black">电饭煲</font></a></p>
<p align="center"><font color="red">200¥</font> </p>
</td>
<td>
<img src="../img/small08.jpg" />
<p align="center"><a href="#"><font color="black">电饭煲</font></a></p>
<p align="center"><font color="red">200¥</font> </p>
</td>
<td>
<img src="../img/small08.jpg" />
<p align="center"><a href="#"><font color="black">电饭煲</font></a></p>
<p align="center"><font color="red">200¥</font> </p>
</td>
</tr>
<tr>
<td>
<img src="../img/small08.jpg" />
<p align="center"><a href="#"><font color="black">电饭煲</font></a></p>
<p align="center"><font color="red">200¥</font> </p>
</td>
<td>
<img src="../img/small08.jpg" />
<p align="center"><a href="#"><font color="black">电饭煲</font></a></p>
<p align="center"><font color="red">200¥</font> </p>
</td>
<td>
<img src="../img/small08.jpg" />
<p align="center"><a href="#"><font color="black">电饭煲</font></a></p>
<p align="center"><font color="red">200¥</font> </p>
</td>
<td>
<img src="../img/small08.jpg" />
<p align="center"><a href="#"><font color="black">电饭煲</font></a></p>
<p align="center"><font color="red">200¥</font> </p>
</td>
<td>
<img src="../img/small08.jpg" />
<p align="center"><a href="#"><font color="black">电饭煲</font></a></p>
<p align="center"><font color="red">200¥</font> </p>
</td>
<td>
<img src="../img/small08.jpg" />
<p align="center"><a href="#"><font color="black">电饭煲</font></a></p>
<p align="center"><font color="red">200¥</font> </p>
</td>
</tr>
</table>
</td>
</tr>
<!--一张图片-->
<tr width="100%">
<td >
<img src ="../img/footer.jpg" width="100%"/>
</td>
</tr>
<!--版权root
两个段落
-->
<tr>
<td>
<p 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>
</p>
<p align="center">
Copyright © 2017-2018 幸运商城 版权所有
</p>
</td>
</tr>
</table>
</body>
</html>
附:[html转义](file:///E:/Java%E8%A7%A3%E5%8E%8B/%E5%B0%B1%E4%B8%9A%E7%8F%AD+Hadoop%E5%A4%A7%E6%95%B0%E6%8D%AE/%E3%80%90%E9%98%B6%E6%AE%B501%E3%80%91Javaweb/day01-html/resource/api/html%E8%BD%AC%E4%B9%89ll.html)