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背景图定位等知识来布局,主流布局。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。