传统布局：使用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. ResNeXt——与 ResNet 相比，相同的参数个数，结果更好：一个 101 层的 ResNeXt 网络，和 200 层的 ResNet 准确度差不多，但是计算量只有后者的一半

    from:https://blog.csdn.net/xuanwu_yan/article/details/53455260 背景 论文地址:Aggregated Residual Transform ...

  2. Meta viewport 学习整理

    The meta viewport tag contains instructions to the browser in the matter of viewports and zooming. I ...

  3. linux命令学习笔记（29）:chgrp命令

    在lunix系统里,文件或目录的权限的掌控以拥有者及所诉群组来管理.可以使用chgrp指令取变更文件与目录所属群 组,这种方式采用群组名称或群组识别码都可以.Chgrp命令就是change group ...

  4. pod lib lint 报错 Unable to find a specification for `AMap2DMap` depended upon by `DingtalkPod

    执行 pod验证 报错如下 ➜  DingtalkPod git:(2.0.0) ✗ pod lib lint --sources='https://github.com/AloneMonkey/Mo ...

  5. CodeForces - 311B:Cats Transport (DP+斜率优化)

    Zxr960115 is owner of a large farm. He feeds m cute cats and employs p feeders. There's a straight r ...

  6. BZOJ_1304_[CQOI2009]叶子的染色_树形DP

    BZOJ_1304_[CQOI2009]叶子的染色_树形DP Description 给一棵m个结点的无根树,你可以选择一个度数大于1的结点作为根,然后给一些结点(根.内部结点和叶子均可)着以黑色或白 ...

  7. bzoj 3771: Triple 快速傅里叶变换 FFT

    题目大意: 给出\(n\)个互不相同的物品,每个物品有价值\(x_i(x_i \leq 40000)\)如果可以从中取一个或两个或三个物品.问能够组合出来的所有价值和对应的方案数,全部输出.取值时,\ ...

  8. [SHOI 2017] 分手是祝愿

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=4872 [算法] 首先发现 , 对于一个开关 , 按下2次和没按是等价的 , 因此每个 ...

  9. python爬虫知识点总结（三）urllib库详解

    一.什么是Urllib? 官方学习文档:https://docs.python.org/3/library/urllib.html 廖雪峰的网站:https://www.liaoxuefeng.com ...

  10. x264源代码分析-转

    相关说明: 1.     使用版本:  x264-cvs-2004-05-11 2.     这次的分析基本上已经将代码中最难理解的部分做了阐释,对代码的主线也做了剖析,如果这个主线理解了,就容易设置 ...