* {
    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. 初学node.js有感二

    node.js进阶 一.回顾与继续   对于一种语言的认识都是经历这样的一个过程的,首先从原生的环境(CMD)中开始学习,找到一门语言之间各种引用的本质和相互之间的调用方式,明澈各种依赖关系,在这个基 ...

  2. 【JVM命令系列】javap

    命令基本概述 javap是JDK自带的反汇编器,可以查看java编译器为我们生成的字节码.通过它,可以对照源代码和字节码,从而了解很多编译器内部的工作.可以在命令行窗口先用javap -help看下j ...

  3. 一次生产环境下MongoDB备份还原数据

    最近开发一个版本的功能当中用到了MongoDB分页,懒于造数据,于是就研究了下从生产环境上导出数据到本地来进行测试. 研究了一下,发现MongoDB的备份还原和MySQL语法还挺类似,下面请看详细介绍 ...

  4. Codeforces Round #424 (Div. 2, rated, based on VK Cup Finals)

    http://codeforces.com/contest/831 A. Unimodal Array time limit per test 1 second memory limit per te ...

  5. php中常用的字符串查找函数strstr()、strpos()实例解释

    string strstr ( string $haystack , mixed $needle [, bool $before_needle = false ] ) 1.$haystack被查找的字 ...

  6. windows无法启动MySQL服务 错误1067

    启动wampmysqld 出现 1067 错误 解决方法:删除在MySQL安装目录下的Data目录中的ib_logfile0和ib_logfile1这两个文件. 重新启动MySQL服务

  7. 实现mysql在windows server 2008下自动备份

    环境:MySQL   安装位置:D:\MySQL论坛数据库名称为:Db_Test数据库备份目的地:D:\db_bak\ 1.首先新建一个bat文件 rem ********************** ...

  8. Asp.Net MVC4 系列-- 进阶篇之路由（1）

    创建一个路由 打开 RouteConfig.cs  ,发现已经创建了一个默认路由 : routes.MapRoute( name:"Default", url:"{con ...

  9. Echarts数据可视化series-line线图，开发全解+完美注释

    全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...

  10. 如何使用 C# 爬虫获得专栏博客更新排行

    昨天,梦姐问我们,她存在一个任务,找到 关注数排行100 和 浏览量排行100 的专栏博客,在2017年还有更新的专栏. 梦姐说他要出去一趟,M大神在吃饭,于是我估算时间,只有半个钟. 整理一下:半个 ...