<!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. 终极解决方案 at org.apache.jsp.index_jsp._jspInit(index_jsp.java:22) 报空指针

    java.lang.NullPointerException  at org.apache.jsp.index_jsp._jspInit(index_jsp.java:22) 出现这种问题,可能有多方 ...

  2. Java并发/多线程系列——初识篇

    回到过去,电脑有一个CPU,一次只能执行一个程序.后来多任务处理意味着计算机可以同时执行多个程序(AKA任务或进程).这不是真的"同时".单个CPU在程序之间共享.操作系统将在运行 ...

  3. Bear and Floodlight 状态压缩DP啊

    Bear and Floodlight Time Limit: 4000MS   Memory Limit: 262144KB   64bit IO Format: %I64d & %I64u ...

  4. The area 积分积分

    The area Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submit Sta ...

  5. 在linux上安装rz、sz包

    在SecureCRT这样的ssh登录软件里, 通过在Linux界面里输入rz/sz命令来上传/下载文件. 对于RHEL5, rz/sz默认没有安装所以需要手工安装.sz: 将选定的文件发送(send) ...

  6. vue 实现 换一换 功能

    点击按钮列表页随机获取三个商品并渲染 后台返回的数据为 d为一个数组 数组 arr=[0,1,2]初始值 data:{ list:d, arr:[0,1,2] } 生产随机数 replace:func ...

  7. 使用wget做站点镜像及wget的高级用法

    本文为大家介绍 使用wget做站点镜像及wget的高级用法,供大家学习参考. # wget -r -p -np -k http://xxx.edu.cn -r 表示递归下载,会下载所有的链接,不过要注 ...

  8. 窗口迅速关闭的解决办法/scanf/if/for/break

    break if的格式 if(a>b) { printf("max=%d\n",a); } else printf("max=%d\n",b); scan ...

  9. PyCharm 2017 官网 下载 安装 设置 配置 (主题 字体 字号) 使用 入门 教程

    一.安装 Python 3.6 首先,要安装好 Python 3.6.如果你还没有安装,可以参考咪博士之前的教程 Python 3.6.3 官网 下载 安装 测试 入门教程 (windows) 二.官 ...

  10. 温故而知新 Volley源码解读与思考

    相比新的网络请求框架Volley真的很落后,一无是处吗,要知道Volley是由google官方推出的,虽然推出的时间很久了,但是其中依然有值得学习的地方.  从命名我们就能看出一些端倪,volley中 ...