传统布局：使用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处理字符串函数（转）

    http://www.jb51.net/article/27458.htm 感觉上MySQL的字符串函数截取字符,比用程序截取(如PHP或JAVA)来得强大,所以在这里做一个记录,希望对大家有用. 函 ...

  2. ES6 generator 基础

    参考文档 harmony:generators Generator是ES6的新特性,通过yield关键字,可以让函数的执行流挂起,那么便为改变执行流程提供了可能. 创建Generator functi ...

  3. array_1.array_map

    note: 为数组的每个元素应用回调函数 <?php $arr = [1, 2, 3]; $arr1 = array_map( function ($value) { return $value ...

  4. 在Windows7 下 mingw32 开发环境中采用 glut3.7 学习 OpenGL

    2015年10月2日更新: 发现 freeglut 很好用兼容于 gut ,而且开源还在更新中.因此我觉得放弃以前的 glut 了,转而用 freeglut 了. 买了本<计算机图形学第4版&g ...

  5. kettle脚本定时任务不执行

    问题描述:在centos机器上部署了kettle脚本,每天定时跑一次,但是并没有成功跑,手动执行命令是可以的.而且写了一个测试的shell脚本也是可以执行的. 解决方案: 将2的错误输出,/usr/l ...

  6. linux 进程学习笔记-信号semaphore

    信号灯(信号量)不是进程通信手段,其是用于控制和协调在进程间通信过程中的共享资源访问,就如同互斥锁(两者的区别可以参考这里) 可以将简单地将信号灯想象成一个计数器,初始时计数器值为n(有n个资源可供使 ...

  7. django 模板中通过变量替代key取字典内容

    模板中通过变量替代key取字典内容 templatetags/├── get_item.py├── __init__.py ###get_item.py # coding=utf-8 from dja ...

  8. [CTSC 2012] Cheat

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=2806 [算法] 首先建立广义后缀自动机 注意到问题具有单调性 , 不妨对于每组询问二 ...

  9. WPF DelegateCommand CanExecute

     private DelegateCommand searchCommand;         public DelegateCommand SearchCommand         {       ...

  10. POJ2349(求生成树中符合题意的边)

    Arctic Network Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 14977   Accepted: 4777 D ...