css 盒子模型应用
盒子模型应用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>盒子模型应用</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
} .top {
width: 100%;
height: 50px;
background-color: black;
} .top_content {
width: 75%;
height: 50px;
margin: 0px auto;
background-color: blue;
} .body {
margin: 20px auto;
width: 75%;
height: 1500px;
background-color: blanchedalmond;
} .body_img {
width: 100%;
height: 400px;
background-color: darkorange;
} .body_content {
width: 100%;
height: 111px;
background-color: blueviolet;
} .body_no {
width: 100%;
height: 50px;
background-color: aqua;
} .footing {
width: 75%;
height: 400px;
background-color: indigo;
margin: 0px auto;
} .footing_content {
width: 100%;
height: 330px;
background-color: darkseagreen;
} .footing_subnav {
width: 100%;
height: 70px;
background-color: black;
}
</style>
</head>
<body>
<div class="top">
<div class="top_content">
</div>
</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>
</body>
</html>
css 盒子模型应用的更多相关文章
- 深入理解CSS盒子模型
在CSS中浮动.定位和盒子模型,都是很核心的东西,其中盒子模型是CSS很重要基石之一,感觉还是很有必要把CSS盒子模型相关知识更新一下...... CSS盒子模型<BoxModel>示意图 ...
- CSS盒子模型的理解
标准的CSS盒子模型包括:内容(content).填充(padding).边框(border).边界(margin) 这些属性,可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子 ...
- 每天学点前端——基础篇1：css盒子模型，绝对定位和相对定位
什么是css盒子模型(Box Model)? W3C中解释为:规定了元素框处理元素内容.内边距.边框和外边距的方式: MDN:文档中的每个元素被描绘为矩形盒子.渲染引擎的目的就是判定大小,属性--比如 ...
- CSS 盒子模型概述
一.简介 CSS 盒子模型(元素框)由元素内容(content).内边距(padding).边框(border).外边距(margin)组成. 盒子模型,最里面的部分是实际内容:直接包围内 ...
- 标准的CSS盒子模型？与低版本IE的盒子模型有什么不同的？
CSS盒子模型:由四个属性组成的外边距(margin).内边距(padding).边界(border).内容区(width和height); 标准的CSS盒子模型和低端IE CSS盒子模型不同:宽高不 ...
- 理解CSS盒子模型
概述 网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin),CSS盒子模型都具备这些属性,也主要是这些属性. 这些属性我们可以把它转移到我 ...
- 几个容易出错的css盒子模型细节
css是前端必须掌握的技能之一.其中的box模型,如图所示: 大体就是border.margin.padding和content,概念挺好理解.但当盒子模型与其他属性一块使用时产生的现象,或许您还难以 ...
- <转>HTML+CSS总结/深入理解CSS盒子模型
原文地址:http://www.chinaz.com/design/2010/1229/151993.shtml 前言:前阵子在做一个项目时,在页面布局方面遇到了一点小问题,于是上stackoverf ...
- 聊聊css盒子模型
css盒子模型原理: 在网页设计中常听的属性名:内容(content).填充/内边距(padding).边框(border).外边距(margin), CSS盒子模式都具备这些属性. 这些属性我们可以 ...
- css 盒子模型理解
盒子模型是html+css中最核心的基础知识,理解了这个重要的概念才能更好的排版,进行页面布局.下面是自己积累和总结的关于css盒子模型的知识^_^,希望对初学者有用. 一.css盒子模型概念 CSS ...
随机推荐
- 聊聊面试中常问的GC机制
GC 中文直译垃圾回收,是一种回收内存空间避免内存泄漏的机制.当 JVM 内存紧张,通过执行 GC 有效回收内存,转而分配给新对象从而实现内存的再利用. JVM GC 机制虽然无需开发主动参与,减轻不 ...
- 201771010135杨蓉庆《面向对象程序设计（java）》第六周学习总结
实验六 继承定义与使用 1.实验目的与要求 (1) 理解继承的定义: (2) 掌握子类的定义要求 (3) 掌握多态性的概念及用法: (4) 掌握抽象类的定义及用途: (5) 掌握类中4个成员访问权限修 ...
- 【剑指Offer面试编程题】题目1508：把字符串转换成整数--九度OJ
题目描述: 将一个字符串转换成一个整数,要求不能使用字符串转换整数的库函数. 输入: 输入可能包含多个测试样例. 对于每个测试案例,输入为一个合法或者非法的字符串,代表一个整数n(1<= n&l ...
- ElementUI el-message 提示信息的用法
引入message Element 注册了一个$message方法用于调用,Message 可以接收一个字符串或一个 VNode 作为参数,它会被显示为正文内容. Element 为 Vue.prot ...
- SI架构设计与实践
拆分数据表 水平拆分: 水平拆分 路由算法 pavarotti17 f(pavarotti17) 路由算法——扩容 路由算法——非均匀分布 拆分表的数据访问——SQL转发 si的策略 MySQL集群替 ...
- 泛型DAO模型设计
aaarticlea/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKC
- MySQL之关系
目录 关系 多对多的关系,如何通过mysql来表示 一对一关系 关系 多对多的关系,如何通过mysql来表示 站在老师的角度 一个老师可以教多个学生, 一个老师也可以教一个学生. 站在学生的角度 一个 ...
- 1-使用React的方式
认识 React React是一个用于构建用户界面的 JAVASCRIPT 库.(JQuery也是) React主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图).mvvm Rea ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表格：为所有表格的单元格添加边框
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 杭电2014 （第一次用vector ac题目）
早就想用容器类来实现一些编程,今天也算是学了一点吧. vector的使用方法参考了某位博主的一篇文章,感觉写得还是不错的:http://blog.csdn.net/always2015/article ...