传统布局：使用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>

贴一张效果图：

还没学样式，所以这个页面的样式还很朴素！

要继续学！不能这么朴素！

HTML——传统布局的使用的更多相关文章

  1. 第 27 章 CSS 传统布局[下]

    学习要点: 1.定位布局 2.box-sizing 3.resize 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 早期所使用的传统布局,很多情况下,这些布局方式还是非常有用的. 一．定位布 ...

  2. 第 27 章 CSS 传统布局[上]

    学习要点: 1.布局模型 2.表格布局 3.浮动布局 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 早期所使用的传统布局,很多情况下,这些布局方式还是非常有用的. 一．布局模型 在早期没有平 ...

  3. web开发布局---传统布局篇

    1.传统布局 盒状模型结合 display 属性.float 浮动以及 position 定位属性设计的各式传统布局形式. 2.说再多不如动手实践,下面举三个例子 html 部分代码: <sec ...

  4. Android开发 - 掌握ConstraintLayout（一）传统布局的问题

    在传统的Android开发中,页面布局占用了我们很多的开发时间,而且面对复杂页面的时候,传统的一些布局会显得非常复杂,每种布局都有特定的应用场景,我们通常需要各种布局结合起来使用来实现复杂的页面.随着 ...

  5. CSS传统布局之页面布局实例

    传统的页面布局依赖于盒模型+流动模型(flow)+浮动模型(float)+层模型(layer)来实现页面的布局,具体方法是通过盒模型+display属性+float属性+position属性来加以实现 ...

  6. CSS传统布局之display属性+float属性+position属性

    这三个属性是传统网页布局中经常用到的属性. 读这篇文章之前,希望你对css布局模型已经有了一定的了解.因为本文的三个属性是和css三个布局模型紧密联系在一起的.因此,如若你并不了解,我推荐你先看一下c ...

  7. CSS传统布局之布局模型

    刚开始准备这篇文章的时候,查到的有很多包含“布局模型”的中文博客或是资料,但是google上并未找到类似字眼,google到的是“flex layout module”“grid layout mod ...

  8. 网页DIV+CSS布局与ifame传统布局对比

    通常我们从设计师手上拿到设计稿,按照功能划分为很多小块,然后再利用div+css写成静态页面按照设计稿排列还原,最后把具体内容填充到小块里面.网页布局就是你想要的页面功能在你拿到设计图切块完成重新排列 ...

  9. [转 载] android 谷歌 新控件（约束控件 ）ConstraintLayout 扁平化布局

    序 在Google IO大会中不仅仅带来了Android Studio 2.2预览版,同时带给我们一个依赖约束的库. 简单来说,她是相对布局的升级版本,但是区别与相对布局更加强调约束.何为约束,即控件 ...

随机推荐

  1. mysql密码过期的修改方法（your password has expired）

    今天打开SQLyog提示密码过期:Your password has expired 解决方法:    1.  启动MySQL服务 2.  启动MySQL后台 3.  执行以下命令 step 1: S ...

  2. Linux_服务器_06_VMware虚拟机下安装CentOS7.0图文教程

    二.参考资料 1.VMware虚拟机下安装CentOS7.0图文教程

  3. [acm]HDOJ 2059 龟兔赛跑

    题目地址: http://acm.hdu.edu.cn/showproblem.php?pid=2059 起点和终点,共n+2个点,n+2个状态,简单DP即可. //11512698 2014-08- ...

  4. P1880 [NOI1995]石子合并[区间dp+四边形不等式优化]

    P1880 [NOI1995]石子合并 丢个地址就跑(关于四边形不等式复杂度是n方的证明) 嗯所以这题利用决策的单调性来减少k断点的枚举次数.具体看lyd书.这部分很生疏,但是我还是选择先不管了. # ...

  5. Codeforces Round #397 题解

    Problem A. Neverending competitions 题目大意 一个团队有多个比赛,每次去比赛都会先订机票去比赛地点,然后再订机票返回.给出\(n\)个含有起止地点的购票记录(不按时 ...

  6. MongoDB 分片的原理、搭建、应用 ！

    MongoDB 分片的原理.搭建.应用   一.概念: 分片(sharding)是指将数据库拆分,将其分散在不同的机器上的过程.将数据分散到不同的机器上,不需要功能强大的服务器就可以存储更多的数据和处 ...

  7. alter table *** add constraint *** 用法---约束

    1.主键约束:要对一个列加主键约束的话,这列就必须要满足的条件就是分空因为主键约束:就是对一个列进行了约束,约束为(非空.不重复)以下是代码   要对一个列加主键,列名为id,表名为emp 格式为:a ...

  8. gitea (git服务器), 修改配置,更换IP地址

    使用的gitea项目管理git 服务器 (可以不用备份项目, 通过直接修改gitea配置, 直接使用) 步骤1 可以直接访问项目, 步骤2 ,如果已有项目IP地址固定为192.168.1.x, 新的I ...

  9. openstack开发环境搭建

    1       目的 让linux下的openstack代码能在windows上面实现同步开发. 2       目标 使用samba实现window与Linux的文件共享. 3       实验环境 ...

  10. git base cli