HTML——传统布局的使用

传统布局:使用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="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">[email protected]</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="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>

贴一张效果图:

还没学样式,所以这个页面的样式还很朴素!

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

原文地址:https://www.cnblogs.com/gaoquanquan/p/9129723.html

时间: 2024-10-13 04:20:22

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

第27章 CSS传统布局(上)

第 27章 CSS传统布局[上]学习要点:1.布局模型2.表格布局3.浮动布局 本章主要探讨 HTML5中 CSS早期所使用的传统布局,很多情况下,这些布局方式还是非常有用的.一.布局模型在早期没有平板和智能手机等移动设备大行其道的时期,Web页面的设计主要是面向PC端电脑分辨率展开的.这种分辨率比例比较单一,基本上只要满足最低分辨率设计即可.一般来说有 4:3.16:10.16:9这样的主要分辨率.那么,从这种比例上来看,长度总是大于宽度的.从最低分辨率 1024 * 768设计即可.为了使浏

第27章 CSS传统布局(下)

第 27章 CSS传统布局[下]学习要点:1.定位布局2.box-sizing3.resize 本章主要探讨 HTML5中 CSS早期所使用的传统布局,很多情况下,这些布局方式还是非常有用的.一.定位布局在使用定位布局前,我们先了解一下定位属性的用法.CSS2提供了position属性来实现元素的绝对定位和相对定位. 属性 说明static 默认值,无定位.absolute 绝对定位,使用 top.right.bottom.left进行位移.relative 相对定位,使用 top.right.

第 27 章 CSS 传统布局[上]

学习要点: 1.布局模型 2.表格布局 3.浮动布局 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 早期所使用的传统布局,很多情况下,这些布局方式还是非常有用的. 一.布局模型 在早期没有平板和智能手机等移动设备大行其道的时期,Web 页面的设计主要是面向 PC 端电脑分辨率展开的.这种分辨率比例比较单一,基本上只要满足最低分辨率设计即可.一般来说有 4:3.16:10.16:9 这样的主要分辨率.那么,从这种比例上来看,长度总是大于宽度的.从最低分辨率 1024 * 768 设计即可

第 27 章 CSS 传统布局[下]

学习要点: 1.定位布局 2.box-sizing 3.resize 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 早期所使用的传统布局,很多情况下,这些布局方式还是非常有用的. 一.定位布局 在使用定位布局前,我们先了解一下定位属性的用法.CSS2 提供了 position 属性来实现元素的绝对定位和相对定位. 属性 说明 static 默认值,无定位. absolute 绝对定位,使用 top.right.bottom.left进行位移. relative 相对定位,使用 top.

34.CSS传统布局【上】

第二十七章    传统布局[上] 一.布局模型 二.表格布局 (非常不建议使用) 就是通过设定固定的单元格,去除表格边框和填充实现的布局,他应该在二维表格的数据显示 1.固定布局 //html部分 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>传统布局[上]</title> <link re

Android开发 - 掌握ConstraintLayout(一)传统布局的问题

在传统的Android开发中,页面布局占用了我们很多的开发时间,而且面对复杂页面的时候,传统的一些布局会显得非常复杂,每种布局都有特定的应用场景,我们通常需要各种布局结合起来使用来实现复杂的页面.随着ConstraintLayout的推出,这种现象有了很大的改善,而且它可以实现很多传统布局难以实现的功能. 本系列我们就一起来学习ConstraintLayout的使用,来大幅提高我们的生产力. 传统布局 在ConstraintLayout退出之前,我们经常使用FrameLayout, Linear

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

1.传统布局 盒状模型结合 display 属性.float 浮动以及 position 定位属性设计的各式传统布局形式. 2.说再多不如动手实践,下面举三个例子 html 部分代码: 1 <section> 2 <!-- 传统布局-例1结构:盒子模型 --> 3 <div class="layout-one"> 4 <div class="header">header</div> 5 <div cl

grid栅格布局

前面的话 Grid布局方式借鉴了平面装帧设计中的格线系统,将格线运用在屏幕上,而不再是单一的静态页面,可以称之为真正的栅格.本文将详细介绍grid布局 引入 对于Web开发者来说,网页布局一直是个比较重要的问题.但实际上,在网页开发很长的一段时间当中,我们甚至没有一个比较完整的布局模块.总的来说 Web 布局经历了以下四个阶段: 1.table表格布局,通过 Dreamweaver 拖拽表格或者手写 table 标签布局 2.float浮动及position定位布局,借助元素元素盒模型本身的特性

web前端教程:CSS 布局十八般武艺都在这里了

CSS布局 布局是CSS中一个重要部分,本文总结了CSS布局中的常用技巧,包括常用的水平居中.垂直居中方法,以及单列布局.多列布局的多种实现方式(包括传统的盒模型布局和比较新的flex布局实现),希望能给需要的小伙伴带来一些帮助. 目录 1.常用居中方法:水平居中,垂直居中, 2.单列布局 3.二列&三列布局:float+margin,position+margin,圣杯布局(float+负margin),双飞翼布局(float+负margin),flex布局 如果你想学习交流html5css3