<!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. centos7.2 linux 64位系统上安装mysql

    1.在线安装mysql 在终端中命令行下输入(在官网下载mysql): # wget https://dev.mysql.com/downloads/repo/yum/mysql57-communit ...

  2. MySQL数据备份之mysqldump使用（转）

    mysqldump常用于MySQL数据库逻辑备份. 1.各种用法说明 A. 最简单的用法: mysqldump -uroot -pPassword [database name] > [dump ...

  3. 翻译：MLAPP（2.1节）

    笔者:尝试翻译MLAPP(Machine Learning: a Probabilistic Perspective)一书,供机器学习的学者参考,如有错误理解之处请指出,不胜感激!(如需转载,请联系本 ...

  4. 代理模式与java中的动态代理

    前言    代理模式又分为静态代理与动态代理,其中动态代理是Java各大框架中运用的最为广泛的一种模式之一,下面就用简单的例子来说明静态代理与动态代理. 场景    李雷是一个唱片公司的大老板,很忙, ...

  5. NOIP2017SummerTraining0705

    个人感受:这一场考试是网开着的,然后第一题就水过了,第二三题应该是暴力吧,然后各水了50.拿了200分.排名第10. 问题 A: 重复字符串 时间限制: 1 Sec  内存限制: 256 MB提交: ...

  6. 记一次Java的内存泄露分析

    当前环境 jdk == 1.8 httpasyncclient == 4.1.3 代码地址 git 地址:https://github.com/jasonGeng88/java-network-pro ...

  7. Python实战之Selenium自动化测试web登录(2)

    #!/usr/bin/env python3 # -*- coding:utf-8 -*- from selenium import webdriver from selenium.webdriver ...

  8. ch1-vuejs基础入门（hw v-bind v-if v-for v-on v-model 应用组件简介 小案例）

    1 hello world 引入vue.min.js 代码: ----2.0+版本 <div id="test"> {{str}} </div> <s ...

  9. JavaWeb（七）之详解JavaWeb路径

    前言 在我们的实际开发中,经常要写路径,不管是链接,重定向还是转发,这都是需要路径的.那这一篇我给大家详细的分享一下Web中的各种路径问题. 世界上一切东西都是相对的,对于这点而言,相信大家并不陌生, ...

  10. mysql explain 分析sql语句

    鉴于最近做的事情,需要解决慢sql的问题,现补充一点sql语句性能分析之explain的使用方式! 综合返回数据情况,分析各个参数,可以了解sql 使用方法:explain  + sql语句 如 :e ...