HTML——传统布局的使用
2024-10-21 06:18:27
传统布局:使用table来做整体页面的布局
总结:这种方式来制作页面现在也不是很多了,感觉并不是很高效。
需要先用photoshop量出页面布局具体的尺寸位置,再将其划分为表格,对每个格子进行编辑。
每个格子可以嵌套表格,这样有时候写着写着还有点迷糊,要重新找到编辑位置属于哪一个表格的哪个位置,通常会将表格的border设置为1,方便检查
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简历</title>
</head>
<body>
<table width="800" height="800" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td width="260" valign="top" bgcolor="#f2f2f2">
<table width="260" border="0">
<tr height="100">
<td></td>
<td></td>
</tr>
<tr>
<td width="230"align="right"><img src="data:images/0032.jpg" alt="小动物"></td>
<td width="30"></td>
</tr>
<tr>
<td align="right">高圈圈</td>
<td></td>
</tr>
<tr>
<td align="right">17612341234</td>
<td></td>
</tr>
<tr>
<td align="right">18812341234@163.com</td>
<td></td>
</tr>
</table> </td> <td width="30"></td> <td width="480" valign="top">
<table border="0" cellspacing="0" cellpadding="=0" width="480">
<tr height="75"></tr>
<td></td>
<tr>
<td align="right">
<img src="data:images/resume.jpg">
</td>
</tr> </table> <hr /> <table border="0" cellspacing="0" cellpadding="=0" width="480" height="180">
<tr>
<td colspan="2"><b>个人基本情况</b></td>
</tr>
<tr height="10">
<td></td>
</tr>
<tr>
<td width="50%">姓名:高圈圈</td>
<td width="50%">籍贯:外太空</td>
</tr>
<tr>
<td>性别:女</td>
<td>民族:汉族</td>
</tr>
<tr>
<td>身高:168</td>
<td>体重:100</td>
</tr>
<tr>
<td>出生日期:2017.1.1</td>
<td>电话:17610101010</td>
</tr>
<tr>
<td>专业:啥都学!</td>
<td>现居住地:北京</td>
</tr>
</table> <br /> <table border="0" cellspacing="0" cellpadding="=0" width="480" height="100">
<tr>
<td><b>教育背景及工作经历</b></td></tr>
<tr>
<td>2013-2017 吉林大学 光通信专业</td>
</tr>
<tr>
<td>2017-至今 北京邮电大学 电子科学与技术专业</td>
</tr>
</table> <br /> <table>
<tr>
<td><b>专业技能</b></td>
</tr>
<tr>
<td>小仙女都是有超能力的!我啥都可能会哦!</td>
</tr>
</table> <br /> <table>
<tr>
<td><b>获奖情况</b></td>
</tr>
<tr>
<td>2013—2014 学年度:二等奖学金</td>
</tr>
<tr>
<td>2014—2015 学年度:二等奖学金、院优秀学生干部</td>
</tr>
<tr>
<td>2015—2016 学年度:二等奖学金</td>
</tr>
</table>
</td> <td width="30"></td>
</tr>
</table> </body>
</html>
贴一张效果图:
还没学样式,所以这个页面的样式还很朴素!
要继续学!不能这么朴素!
最新文章
- python迭代器实现斐波拉契求值
- MA均线组合
- spring.net 配置文件需要注意换行问题
- 《CSS3实战》读书笔记 第4章:样式继承
- py代码模糊工具
- 在WPF下快速生成线的方法
- ITF Demo代码(用VBScript构建的接口测试框架)
- ASP.NET MVC 基础(01)
- 在CentOS6.5下安装Memcached
- 未能导入activex控件,请确保它正确注册";的完美解决方案
- poj 3182 The Grove
- dumpbin
- 神经机器翻译(NMT)相关资料整理
- JavaScript 中禁止用户右键菜单,复制,选取,Ctrl,Alt,Shift. 获取宽高,清除浮动
- 题解——POJ 2234 Matches Game
- mongodb lock 出毛病时解决方法
- JS - 常用效果代码库 (四)
- Redis全方位详解--数据类型使用场景和redis分布式锁的正确姿势
- OLEDB Excel 与C# 的数据流通方法
- PHP:第六章——02正则基本语法