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

    1. 安装Java JDK 移步 :sdfa 2. 下载elasticsearch url : https://artifacts.elastic.co/downloads/elasticsearch ...

  2. C语言中mktime函数功能及用法

    今天联系写一个日历的程序,需要算出月份中的第一天是星期几,用到了mktime()这个函数,感觉这个函数挺有用的,分享给大家. 原型:time_t mktime(struct tm *) 其中的tm结构 ...

  3. 如何将 Python 程序打包成 .exe 文件？

    有不少订阅本公众号的朋友都不是玩 Python,甚至都不是计算机相关专业的,当我给他们一个 Python 程序时,他们是完全不知道该怎么运行的. 于是我想是不是可以将我的程序打包成可执行文件,直接运行 ...

  4. Hadoop安装全教程 Ubuntu14.04+Java1.8.0+Hadoop2.7.6

    最近听了一个关于大数据的大牛的经验分享,在分享的最后大牛给我们一个他之前写好的关于大数据和地理应用demo.这个demo需要在Linux环境上搭建Hadoop平台.这次就简单的分享一下我关于在 Lin ...

  5. session.write类型引发的思考---Mina Session.write流程探索.doc--zhengli

    基于Mina开发网络通信程序,在传感器数据接入领域应用的很广泛,今天我无意中发现一个问题,那就是我在前端session.write(msg)数据出去之后,却没有经过Filter的Encoder方法,同 ...

  6. POJ 3258 最小值最大化 二分搜索

    题意:牛要到河对岸,在与河岸垂直的一条线上,河中有N块石头,给定河岸宽度L,以及每一块石头离牛所在河岸的距离, 现在去掉M块石头,要求去掉M块石头后,剩下的石头之间以及石头与河岸的最小距离的最大值. ...

  7. idea 调试技巧1

    1 多线程调试 开发过多线程应用的朋友应该有体会,有些时候,为了观察多个线程间变量的不同状态,以及锁的获取等,就会想到在代码里加个断点debug一下. 在IDE里断点停下来的时候,可以切换到另外的线程 ...

  8. POJ-2718

    Smallest Difference Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 12158   Accepted: 3 ...

  9. 32bit / 64bit co-exist Linux, ld-linux.so, linux-gate.so.1 etc

    before this, confirm that you don't have 32bit libs notably 32bit libc, e.g. you have /lib64/ld-linu ...

  10. R 中数据导入

    R语言数据导入  数据导入 1.保存和加载R的数据(与R.data的交互:save()函数和load()函数) a <- 1:10 save(a, file = "data/dumDa ...