* {
    margin: 0px;
    padding: 0px;
}

.top {
    width: 100%;
    height: 50px;
    background-color: antiquewhite;
}

.top_content {
    width: 75%;
    height: 50px;
    margin: 0px auto;
    /*上下为0，左右自适应*/
    background-color: aqua;
}

.body {
    margin: 20px auto;
    width: 75%;
    height: 1500px;
    background-color: aquamarine;
}

.body_img {
    width: 100%;
    height: 400px;
    background-color: beige;
    background-image: url(http://images.cnblogs.com/cnblogs_com/ttzzyy/1076163/t_8L7BYYH7PD%606Z@3F4X]2V8H.png);
}

.body_content {
    width: 100%;
    height: 1100px;
    background-color: chartreuse;
}

.body_no {
    width: 100%;
    height: 50px;
    background-color: coral;
}

.footing {
    width: 75%;
    height: 400px;
    background-color: darkblue;
    margin: 0px auto;
}
.footing_content{
    width: 100%;
    height: 350px;
    background-color: forestgreen;
}
.footing_subnav{
    width: 100%;
    height: 50px;
    background-color: mediumturquoise;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="tzy.css" type="text/css">
</head>
<body>
<div class="top">
    <div class="top_content">
    </div>
    <div class="body">
        <div class="body_img"></div>
        <div class="body_content">
            <div class="body_no"></div>
        </div>
    </div>
    <div class="footing">
        <div class="footing_content"></div>
        <div class="footing_subnav"></div>
    </div>
</div>
</body>
</html>

HTML学习笔记 w3sCss盒子模型应用案例（div布局） 第十一节 （原创） 参考使用表的更多相关文章

  1. HTML学习笔记 w3sCss盒子模型（阴影）（div的一些使用）案例 第十节 （原创） 参考使用表

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. [CSS3] 学习笔记--CSS盒子模型

    1.CSS盒子模型概述 盒子模型的内容范围包括:margin(外边距).border(边框).padding(内边距).content(内容)部分组成. 2.内边距 内边距在content外,bord ...

  3. CSS学习笔记07 盒子模型

    1.盒子模型 所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器.每个矩形都由元素的内容.内边距(padding).边框(border)和外边距(margin)组成. ...

  4. CSS学习笔记：盒子模型

    盒子模型(CSS basic box model):When laying out a document, the browser's rendering engine represents each ...

  5. ArcGIS模型构建器案例学习笔记-字段处理模型集

    ArcGIS模型构建器案例学习笔记-字段处理模型集 联系方式:谢老师,135-4855-4328,xiexiaokui@qq.com 由四个子模型组成 子模型1:判断字段是否存在 方法:python工 ...

  6. 操作系统学习笔记----进程/线程模型----Coursera课程笔记

    操作系统学习笔记----进程/线程模型----Coursera课程笔记 进程/线程模型 0. 概述 0.1 进程模型 多道程序设计 进程的概念.进程控制块 进程状态及转换.进程队列 进程控制----进 ...

  7. V-rep学习笔记：机器人模型创建3—搭建动力学模型

    接着之前写的V-rep学习笔记:机器人模型创建2—添加关节继续机器人创建流程.如果已经添加好关节,那么就可以进入流程的最后一步:搭建层次结构模型和模型定义(build the model hierar ...

  8. V-rep学习笔记：机器人模型创建2—添加关节

    下面接着之前经过简化并调整好视觉效果的模型继续工作流,为了使模型能受控制运动起来必须在合适的位置上添加相应的运动副/关节.一般情况下我们可以查阅手册或根据设计图纸获得这些关节的准确位置和姿态,知道这些 ...

  9. 汇编入门学习笔记 （七）—— dp，div，dup

    疯狂的暑假学习之  汇编入门学习笔记 (七)--  dp.div.dup 參考: <汇编语言> 王爽 第8章 1. bx.si.di.和 bp 8086CPU仅仅有4个寄存器能够用 &qu ...

随机推荐

  1. 【OOM】GC overhead limit exceeded

    我遇到这样的问题,本地部署时抛出异常java.lang.OutOfMemoryError:GC overhead limit exceeded导致服务起不来,查看日志发现加载了太多资源到内存,本地的性 ...

  2. 浅析前端开发中的 MVC/MVP/MVVM 模式

    MVC,MVP和MVVM都是常见的软件架构设计模式(Architectural Pattern),它通过分离关注点来改进代码的组织方式.不同于设计模式(Design Pattern),只是为了解决一类 ...

  3. 解决子级用css float浮动 而父级div没高度不能自适应高度

    解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层的父级DIV不能自适应高度-不能随对象撑开没有高度 当在对象内的盒子 ...

  4. 委托、事件、Observer观察者模式的使用解析一

    一.前言 委托.事件得理论我就不解释了,不会的时候觉得很难,会了发现挺简单的,回头想想其实在JavaScript中常常用到,譬如:setTimeout()就是典型的委托. 二.传统编码方式 传统的调用 ...

  5. Python自学笔记-with详解

    with的作用: with关键字是一个替你管理实现上下文协议对象的东西,适用于对资源进行访问的场合,确保不管使用过程中是否发生异常都会执行必要的"清理"操作,释放资源,比如文件使用 ...

  6. 【转】Python正则表达式指南

    1. 正则表达式基础 1.1. 简单介绍 正则表达式并不是Python的一部分.正则表达式是用于处理字符串的强大工具,拥有自己独特的语法以及一个独立的处理引擎,效率上可能不如str自带的方法,但功能十 ...

  7. spring <context:annotation-config> 跟 <context:component-scan>诠释及区别

    <context:annotation-config> 和 <context:component-scan>的区别 Difference between <context ...

  8. Sql Server 数据库中调用dll文件

    1.首先新建一个空的解决方案,并添加一个类库,代码如下,编译并生产dll using System; using System.Collections.Generic; using System.Da ...

  9. 项目常见函数封装，基于Jquery

    /// <reference path="jquery-1.8.0.min.js" /> /* * DIV或元素居中 * @return */ jQuery.fn.mC ...

  10. asp.net(C#)利用QRCode生成二维码

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="QRCode.aspx.cs&q ...