* {
    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. Object.defineProperty()方法的用法详解

    Object.defineProperty()函数是给对象设置属性的. Object.defineProperty(object, propertyname, descriptor); 一共有三个参数 ...

  2. 洗礼灵魂，修炼python（7）--元组，集合，不可变集合

    前面已经把列表的基本用法讲解完 接着讲python的几大核心之--元组(tuple) 1.什么是元组? 类似列表,但为不可变对象,之前提到列表是可变对象,所谓可变对象就是支持原处修改,并且在修改前后对 ...

  3. bzoj4403（模板题）

    序列统计,将答案转化,然后就是Lucas的模板题,用费马小定理瞎搞. #include<cstdio> #include<iostream> #include<algor ...

  4. Python 实现的随机森林

    随机森林是一个高度灵活的机器学习方法,拥有广泛的应用前景,从市场营销到医疗保健保险. 既可以用来做市场营销模拟的建模,统计客户来源,保留和流失.也可用来预测疾病的风险和病患者的易感性. 随机森林是一个 ...

  5. jQuery实现web页面固定列表搜索

    1.需求分析:现在有一个数据展示列表页面,列表内容固定,使用jQuery在固定的列表中实现搜索功能. 2.核心代码: <!-- 添加jquery库 --> <script type= ...

  6. 23.Linux-块设备驱动(详解)

    通过上节的块设备驱动分析,本节便通过内存来模拟块设备驱动  参考内核自带的块设备驱动程序: drivers/block /xd.c drivers/block /z2ram.c 1.本节需要的结构体如 ...

  7. 使用hive客户端java api读写hive集群上的信息

    上文介绍了hdfs集群信息的读取方式,本文说hive 1.先解决依赖 <properties> <hive.version>1.2.1</hive.version> ...

  8. 【特效】select美化

    select的默认样式往往很丑,为保证页面样式风格统一,需要对select进行美化.虽然其美化的插件很多,一搜一大把,但是需要引入长长的css文件和js文件实在是件头痛的事.其实select的实现原理 ...

  9. Sqoop1.99.7将MySQL数据导入到HDFS中

    准备 本示例将实现从MySQL数据库中将数据导入到HDFS中 参考文档: http://sqoop.apache.org/docs/1.99.7/user/Sqoop5MinutesDemo.html ...

  10. ABAP 数值四舍五入函数

    VALUE '12.5445' , dat1 . VALUE '12.540'. * 方法一 CALL FUNCTION 'HR_NZ_ROUNDING_DECIMALS' EXPORTING val ...