<!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. shell查找指定时间段内的文件

    #!/bin/bash#20170905 输入参数格式echo "显示"$1"的备份文件"date_0=$1date_1=`expr $date_0 + 1`d ...

  2. css 浮动和清除浮动

    在写页面布局的过程中,浮动是大家经常用的属性.在好多的排版布局中都是用的的浮动比如说下面这些地方都是应用到了浮动. 在我学习浮动的时候可是熬坏了脑筋,在这里我分享一下我对浮动这块知识的总结. 一.浮动 ...

  3. Dubbo服务接口的设计原则

    1.接口粒度 1.1 服务接口尽可能大粒度,每个服务方法应代表一个功能,而不是某功能的一个步骤,否则将面临分布式事务问题,Dubbo暂未提供分布式事务支持.同时可以减少系统间的网络交互. 1.2 服务 ...

  4. Google赛马分析

    原题 想必田忌赛马的故事,大家都耳熟能详.但是,大家知道Goolge的童鞋们是怎么赛马的么?不过,首先,大家要先尝试一下:有25匹马,每次只能五匹一起跑,那么最少跑几次,才能确定前三甲呢? 分析 这样 ...

  5. java 学习笔记——类之间的关系之封装、继承与多态的详解

    封装 一个封装的简单例子 封装就是把对象的属性(状态)和方法(行为)结合在一起,并尽可能隐蔽对象的内部细节,成为一个不可分割的独立单位(即对象),对外形成一个边界,只保留有限的对外接口使之与外部发生联 ...

  6. 考了3年，工作四年，零基础在职终于拿到CFA证书

    大家都知道CFA Charterholder是独有的全球公认的投资管理从业人员高职业水平和道德水准的有力证明,是金融界卓越专业成就的象征:CFA资格强调和遵循极其严格的职业操守和道德准则,世界各主要发 ...

  7. vue2购物车ch4-(筛选v-for 点击的那个设置样式 设为默认地址其他 联动 非循环的列表选中和非选中 删除当前选中的列表)

    1 address.html <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  8. java web Servlet学习笔记-2 请求重定向和请求转发的区别

    请求转发与请求重定向的区别 请求重定向和转发 1.请求重定向:浏览器的行为(通过响应对象HttpServletResponse来执行) 特点:可以重新定向访问其他Web应用下的资源 浏览器发出了2次请 ...

  9. 解决Jqyery的Trigger事件中两个按钮相互触发至死循环问题

    今天做项目,其中有个功能需要两个图表的联动,用到两个按钮,这两个按钮分别控制两个图表,第一次直接在btn1的单击事件中使用了$("btn2").trigger("clic ...

  10. java抽象类、抽象方法、接口、实现接口详解

    对于java中的抽象类,抽象方法,接口,实现接口等具体的概念就不在这里详细的说明了,网上书本都有很多解释,主要是我懒,下面通过一个例子来说明其中的精髓要点,能不能练成绝世武功,踏上封王之路,就看自己的 ...