* {
    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. java初学者（新手）应该如何选择学习教材与网站

    作者:天天向上 1.学习教材选择推荐<JAVA核心技术>,想多看点代码多练习可以找<java开发实战经典>&amp;amp;lt;img src="https ...

  2. MTVERIFY

    MTVERIFY宏即适用于GUI程序也适用于console程序,这个宏内部其实是记录并解释了Win32 GetLastError()的结果.如果Win32函数失败,MTVERIFY()会打印出一段简短 ...

  3. netty4.x 传输文件

    一:简介 netty传输文件的例子并不多,当前的项目刚才需要使用netty,所以就记录一下使用方法,使用netty传输文件,首先需要启动一个服务端,等待服务端请求监听,然后传输文件的时候,启动一个客户 ...

  4. 每周刷题记录--by noble_

    学习hzwer的博客. ----------------------------------------------------------------- 2017.10.3 主要是水题与傻逼dp: ...

  5. 快速双边滤波 附完整C代码

    很早之前写过<双边滤波算法的简易实现bilateralFilter>. 当时学习参考的代码来自cuda的样例. 相关代码可以参阅: https://github.com/johng12/c ...

  6. JAVAWEB复习资料-01

    CSS中@import和link两种插入样式表方式有什么不同? 1.link属于HTML标签,除了引入css文件之外还能定义RSS等,而@import只能用于加载CSS. 2.link在引用CSS时, ...

  7. 2017-03-02学习心得之Java代码

    package com.lovo.classes;import java.util.Random;import java.util.TreeSet;import java.util.Scanner;p ...

  8. win10 uwp 自定义控件初始化

    我遇到一个问题,我在 xaml 用了我的自定义控件,但是我给他设置了一个值,但是什么时候我才可以获得这个值? 本文告诉大家,从构造函数.loaded.Initialized 的调用过程. 用最简单的方 ...

  9. UWP win10 app 新关键字x:Bing

    原本使用MVVM开发,我们使用数据绑定是x:Binging 新的关键字x:Bing使用和原来x:Binging区别不大. <TextBox x:Name="textBox" ...

  10. Python和SQL 2017的强大功能

    Python和SQL Server 2017的强大功能   原文来自:https://www.red-gate.com/simple-talk/sql/sql-development/power-py ...