HTML学习笔记 w3sCss盒子模型应用案例(div布局) 第十一节 (原创) 参考使用表

* {
    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%[email protected]]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>
时间: 2024-12-23 19:09:00

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

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

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>W3sCSS盒子模型</title> <!--其实就是div加css样式设计出一些逻辑页面--> <link rel="stylesheet" href="tzy.css" type="te

HTML学习笔记 w3sCss盒子模型 第十节 (原创)

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>W3sCSS盒子模型</title> <!--其实就是div加css样式设计出一些逻辑页面--> <link rel="stylesheet" href="tzy.css" type="text

HTML学习笔记 w3sCss盒子模型应用 第十一节 (原创)

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="tzy.css" type="text/css"></head><body>&l

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

1.CSS盒子模型概述 盒子模型的内容范围包括:margin(外边距).border(边框).padding(内边距).content(内容)部分组成. 2.内边距 内边距在content外,border内,属性有5个: padding:设置所有边距 padding-bottom:设置底边距 padding-left:设置左边距 padding-right:设置右边距 padding-top:设置上边距 3.边框 我们可以创建效果出色的边框,并且可以应用于任何元素.边框的样式为border-st

CSS学习笔记06 盒子模型

1.盒子模型 所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器.每个矩形都由元素的内容.内边距(padding).边框(border)和外边距(margin)组成. 用公式表示就是:盒子=边框+内边距+内容区域+外边距 元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘是边框.边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素. 注意:背景应用于由内容和内边距.边框组成的区域.       可以看到背景色穿

Linux学习笔记——例说makefile 综合案例

0.前言 从学习C语言开始就慢慢开始接触makefile,查阅了很多的makefile的资料但总感觉没有真正掌握makefile,如果自己动手写一个makefile总觉得非常吃力.所以特意借助博客总结makefile的相关知识,通过例子说明makefile的具体用法. 例说makefile大致分为4个部分 1.只有单个C文件 2.含有多个C文件 3.需要包括头文件路径 4.一个较为复杂的例子 [代码仓库]--makefile-example 代码仓库位于bitbucket,可借助Tortoise

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

下面接着之前经过简化并调整好视觉效果的模型继续工作流,为了使模型能受控制运动起来必须在合适的位置上添加相应的运动副/关节.一般情况下我们可以查阅手册或根据设计图纸获得这些关节的准确位置和姿态,知道这些信息以后就可以通过[Menu bar --> Add --> Joints --> ...]来添加关节了, 之后可以通过位置和姿态对话框来调整关节位置姿态.在之前写过的V-rep学习笔记:曲柄摇杆机构中就是按照这种方式添加的关节. 如果我们有机器人的DH参数表也可以使用VREP中的工具来生成

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

接着之前写的V-rep学习笔记:机器人模型创建2-添加关节继续机器人创建流程.如果已经添加好关节,那么就可以进入流程的最后一步:搭建层次结构模型和模型定义(build the model hierarchy and finish the model definition).但是想要进行动力学仿真(碰撞.接触.自由落体...)的话,还需要进行额外的一些操作: Building the dynamic shapes VREP中几何体的属性可以分为: dynamic or static: 具有动态属性

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

操作系统学习笔记----进程/线程模型----Coursera课程笔记 进程/线程模型 0. 概述 0.1 进程模型 多道程序设计 进程的概念.进程控制块 进程状态及转换.进程队列 进程控制----进程创建.撤销.阻塞.唤醒.... 0.2 线程模型 为什么引入线程 线程的组成 线程机制的实现 用户级线程.核心级线程.混合方式 1. 进程的基本概念 1.1 多道程序设计 允许多个程序同时进入内存运行,目的是为了提高CPU系统效率 1.2 并发环境与并发程序 并发环境: 一段时间间隔内,单处理器上