<!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. Mysql连接报错：1130-host ... is not allowed to connect to this MySql server如何处理

    这个问题是因为在数据库服务器中的mysql数据库中的user的表中没有权限(也可以说没有用户),下面将记录我遇到问题的过程及解决的方法. 在搭建完LNMP环境后用Navicate连接出错 遇到这个问题 ...

  2. Java EE开发环境——MyEclipse2017破解 和 Tomcat服务器配置

    Java EE开发,我们可以搭建如下开发环境: 底层运行环境:jdk 和 jre. Web服务器:Tomcat 后台数据库:SQL Server 可视化集成开发环境:MyEclipse Java EE ...

  3. HDU1698 线段树(区间更新区间查询)

    In the game of DotA, Pudge's meat hook is actually the most horrible thing for most of the heroes. T ...

  4. linux视频之media媒体框架

    linux视频媒体(kernel层分析)主要包括三个文件: (/drivers/media/media-device.c ,  /drivers/media/media-devnode.c , /dr ...

  5. PHP合并两张图片（水印）

    $dst_im = "http://img6.cache.netease.com/photo/0001/2016-04-15/BKMTUO8900AP0001.jpg"; $src ...

  6. 运行Vue在ASP.NET Core应用程序并部署在IIS上

    前言 项目一直用的ASP.NET Core,但是呢我对ASP.NET Core一些原理也还未开始研究,仅限于会用,不过园子中已有大量文章存在,借着有点空余时间,我们来讲讲如何利用ASP.NET Cor ...

  7. Java web JavaScript DOM 编程

     JavaScript DOM 编程 (1).DOM概述及分类 (2).DOM结构模型:XML DOM 和 HTML DOM 关系? (3).结点,结点树,结点属性与方法? 1.DOM是什么? d ...

  8. IDL 指针

    IDL指针与C.C++和FORTRAN等其他程序语言的指针不同,它所处的多变量是可以动态分配内存的全局变量,不只想真正的内存地址 1.创建和访问指针 指针用指针函数Ptr_New()来创建,通过“*” ...

  9. 发布系统Git使用指南 - the Git Way to Use Git

    发布系统Git使用指南 --the Git Way to Use Git 背景 ​ 有文章曾归纳,Git是一套内容寻址文件系统,意思是,Git的核心是存储键值对^[1]^.显然,这样的形式不利于普通人 ...

  10. GPUImage库的使用

    GPUImage开源项目地址:https://github.com/BradLarson/GPUImage GPUImage使用说明:https://github.com/BradLarson/GPU ...