<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table布局</title>
</head>
<body marginheight="0px" marginwidth="0px">
<table width="100%" height="950px" style="background-color: aqua">
    <tr>
        <td colspan="2" width="100%" height="10%" style="background-color: #9e5ea5" align="center">这是头部</td>
    </tr>
    <tr>
        <td width="30" height="80%" style="background-color:blue" align="center">左菜单</td>
        <td width="70" height="80%" style="background-color:blueviolet" align="center">右菜单</td>
    </tr>
    <tr>
        <td colspan="2" width="100" height="10%" style="background-color:darkcyan">底部</td>
    </tr>
</table>
</body>
</html>
按 Ctrl+C 复制代码按 Ctrl+C 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div控制</title>
    <style>
        div {
            border: 1px solid red;
            width: 400px;
            height: 150px;
            font-size: 35px;
        }

        .temple2 {
            /*隐藏超出的区域*/
            overflow: hidden;
        }

        .temple3 {
            /*显示滚动条*/
            overflow: scroll;
        }

        .temple4 {
            /*自动设置是否显示滚动条*/
            overflow: auto;
        }
    </style>
</head>
<body>
<div class="temple">
    床前明月光，<br/>
    肚子饿得慌。<br/>
    举头望腊肉，<br/>
    低头闻香肠。
</div>
<br/><br/><br/><br/><br/><br/>
<div class="temple2">
    床前明月光，<br/>
    肚子饿得慌。<br/>
    举头望腊肉，<br/>
    低头闻香肠。
</div>
<br/><br/><br/><br/><br/><br/>
<div class="temple3">
    床前明月光，<br/>
    肚子饿得慌。<br/>
    举头望腊肉，<br/>
    低头闻香肠。
</div>
<br/><br/><br/><br/><br/><br/>
<div class="temple4">
    床前明月光，<br/>
    肚子饿得慌。<br/>
    举头望腊肉，<br/>
    低头闻香肠。
</div>
</body>
</html>
按 Ctrl+C 复制代码按 Ctrl+C 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div布局</title>
    <style type="text/css">
        body {
            margin: 0px;
        }

        #container {
            width: 100%;
            height: 950px;
            background-color: #9e5ea5;
        }

        #heading {
            width: 100%;
            height: 10%;
            background-color: #df89ff;
        }

        #content_menu {
            width: 30%;
            height: 80%;
            background-color: #ff309e;
            float: left;
        }

        #content_body {
            width: 70%;
            height: 80%;
            background-color: #7fffd4;
            float: left;
        }

        #footing {
            width: 100%;
            height: 10%;
            background-color: cadetblue;
            clear: both;
        }
    </style>
</head>
<body>
<div id="container">
    <div id="heading"> 头部</div>
    <div id="content_menu"> 内容菜单</div>
    <div id="content_body"> 内容主题</div>
    <div id="footing"> 底部</div>
</div>
</body>
</html>

HTML学习笔记 div布局及table布局案例 第三节 （原创）参考使用表的更多相关文章

  1. CSS3与页面布局学习笔记（四）——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)

    一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...

  2. HTML5学习笔记<四>: 列表, 块和布局

    HTML列表 列表标签 标签 描述 <ol> 定义有序列表. <ul> 定义无序列表. <li> 定义列表项. <dl> 定义定义列表. <dt& ...

  3. 【前端】移动端Web开发学习笔记【2】 & flex布局

    上一篇:移动端Web开发学习笔记[1] meta标签 width设置的是layout viewport 的宽度 initial-scale=1.0 自带 width=device-width 最佳实践 ...

  4. Duilib学习笔记《02》— 界面布局

    1. 界面描述XML文件 Duilib主要是通过XML来进行界面的布局配置,程序通过读取并解析XML文件来创建对应的窗体.DuiLib的页面布局分为三类:窗体(Window).容器(Contain)和 ...

  5. 电磁兼容性设计学习笔记--PCB中地的布局

    http://bbs.ednchina.com/BLOG_ARTICLE_3010439.HTM PCB上元器件的布局对整个PCB板的电磁兼容性影响很大,所以从事硬件电路设计的工程师很有必要学习PCB ...

  6. div+css与table布局

    1:速度和加载方式方面的区别 div 的加载方式是即读即加载,遇到 <div> 没有遇到 </div> 的时候一样加载 div 中的内容,读多少加载多少:table 的加载方式 ...

  7. html中DIV+CSS与TABLE布局方式的区别及HTML5新加入的结构标签（转）

    DIV与TABLE布局的区别 div 和 table 的加载方式不同,div 的加载方式是即读即加载,遇到 <div> 没有遇到 </div> 的时候一样加载 div 中的内容 ...

  8. AppleWatch___学习笔记（二）UI布局和UI控件

    1.UI布局 直接开发,你会发现Apple Watch并不支持AutoLayout,WatchKit里有个类叫做WKInterfaceGroup,乍一看像是UIView,但是这货其实是用来布局的.从 ...

  9. CSS学习笔记（11）--Flex 布局教程：语法篇

    原文--阮一峰博客 作者: 阮一峰 日期: 2015年7月10日 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 ...

随机推荐

  1. HTML 简述

    1.本页超链接 <a href="#t">查看 Chapter 4.</a> <a name="t">Test</a& ...

  2. 数据分析前戏：ipython使用技巧（上）

    不一定非得使用Jupyter Notebook,试试ipython命令行 安装 ipython 我只试过Windows 10环境下的. 1.安装python安装包之后,应该就有ipython了. 2. ...

  3. Nim or not Nim? hdu3032 SG值打表找规律

    Nim or not Nim? Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)T ...

  4. Judge Route Circle

    Initially, there is a Robot at position (0, 0). Given a sequence of its moves, judge if this robot m ...

  5. C#.net干货，最全公共帮助类

    比较全面的c#帮助类,日常工作收集,包括前面几家公司用到的,各式各样的几乎都能找到,所有功能性代码都是独立的类,类与类之间没有联系,可以单独引用至项目,分享出来,方便大家,几乎都有注释,喜欢的请点赞, ...

  6. DSCP 与IP 优先级IP优先级

    在IPv4的报文头中,TOS字段是1字节,如下图所示.根据RFC1122的定义,IP优先级(IPPrecedence)使用最高3比特(第0-2比特).+++++++++++++++++++++++++ ...

  7. HDU2036 改革春风吹满地

    第一次看到这题果断放弃,毕竟几何白痴,第二次刷没做的题的时候突然想到这个三角形面积的向量法:S=|x1*y2-x2*y1|  但是此题可能是凹多边形,所以不能加绝对值,可以画个凹四边形看看. HDU2 ...

  8. 使用jquery-qrcode在页面上生成二维码,支持中文

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. CodeSmith(C#)简单示例及相关小知识

    // 本文将介绍CodeSmith与数据库进行交互生成相应的存储过程,本例使用的数据库为SQL Server 2000. // 在与数据库进行交互时,我们使用到了一个CodeSmith自带的组件Sch ...

  10. J2EE走向成功路-02-Struts2 配置(Maven)

    在上一篇中,介绍了使用jar包搭建Struts2框架,这一篇中来介绍一下在Maven环境下搭建Struts2框架,主要为配置Maven. 1.下载Maven,官网:http://maven.apach ...