|
1.table布局：通过table元素将页面空间划分成若干个单元格，将文字或图片等元素放入单元格中，隐藏表格边框，实现布局。也叫传统布局，主要用于广告邮件的页面，不是主流。
（1）按照设计图的尺寸设置表格的宽高以及单元格的宽高
（2）将表格border，cellpadding，cellspacing全设置为0，表格的边框和间距就不占页面空间，它只起到划分空间的作用。
（3）针对局部复杂的布局，可以在单元格里面嵌套表格，嵌套表格划分局部的空间。
（4）单元格中的元素或者嵌套的表格用align和valign设置对齐方式
（5）通过属性或者CSS样式设置单元格中元素的样式
<body topmargin="0">
<table width="800" height="800" border="1" cellpadding="0" cellspacing="0" align="center">
<tr>
<td width="260" valign="top" bgcolor="#F2F2F2">
<table width="200" border="0" align="center">
<tr><td height="100"></td></tr>
<tr>
<td align="center"><img src="image/路飞1.jpg" alt="证件照"></td>
</tr>
<tr>
<td align="right">小小雄</td>
</tr>
<tr>
<td align="right">13621553248</td>
</tr>
<tr>
<td align="right">126421@qq.com</td>
</tr>
</table>
</td>
<td width="30"></td>
<td width="480" valign="top">
<table width="480" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td height="80"></td>
</tr>
<tr>
<td align="right"><img src="image/简历图标.jpg" alt="标题"></td>
</tr>
</table >
<br />
<hr />
<table width="480" height="200" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2"><b>个人基本情况</b></td>
</tr>
<tr>
<td><b>姓名：</b>小熊熊</td>
<td><b>性别：</b>男</td>
</tr>
<tr>
<td><b>籍贯：</b>撒哈拉</td>
<td><b>民族：</b>亚特兰蒂斯</td>
</tr>
<tr>
<td><b>电话：</b>13597894221</td>
<td><b>地址：</b>大荒漠</td>
</tr>
<tr>
<td><b>身高：</b>200cm</td>
<td><b>体重：</b>100kg</td>
</tr>
<tr>
<td><b>爱好：</b>打猎</td>
<td><b>个性：</b>调皮</td>
</tr>
</table>
<br />
<table width="480" height="100" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><b>教育基本情况</b></td>
</tr>
<tr>
<td>2000-2010：骑射剑</td>
</tr>
<tr>
<td>2011-2018：琴书画</td>
</tr>
</table>
<br />
<table width="480" height="100" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><b>所获证书</b></td>
</tr>
<tr>
<td>2005年黄金骑士</td>
</tr>
<tr>
<td>2016诗仙</td>
</tr>
</table>
</td>
<td width="30"></td>
</tr>
</table>
</body>
2.HTML CSS布局（DIV CSS）:主要通过CSS样式设置来布局文字或图片等元素，需要用到CSS盒子模型，盒子类型，CSS浮动，CSS定位，CSS背景图定位等知识来布局，主流布局。
来源：http://www./content-4-94151.html
|
