CSS篇之DIV+CSS布局
<div></div>
div与其他标签一样，也是一个XHTML所支持的标签。
div是XHTML中指定的，远门用于布局设计的容器标记。
简单的CSS布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.header{
width: 1000px;
height: 100px;
background-color:#ccc;
} .content{
width: 1000px;
height: 500px;
background-color: bisque;
} .footer{
width: 1000px;
height: 100px;
background-color: darkkhaki;
}
</style>
</head>
<body>
<div class="header">头部</div>
<div class="content">内容</div>
<div class="footer">页脚</div>
</body>
</html>
上面是简单地布局方法，然而上面有多个值可以精简我最后精简的（把它们相同的值另起一个class名称 三个都有就可以了）
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.container{
width: 1000px;
height: 100px;
} .header{
background-color:#ccc;
} .content{
height: 500px;
background-color: bisque;
} .footer{
background-color: darkkhaki;
}
</style>
</head>
<body>
<div class="header container">头部</div>
<div class="content container">内容</div>
<div class="footer container">页脚</div>
</body>
</html>
如果内容要分开两个部分或更多时可以这样
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.container {
width: 1000px;
height: 100px;
background-color: #FF0000;
border: 1px solid #333;
} .content {
height: 500px;
} .left {
float:left;
height: 500px;
width: 300px;
background-color: #5CBE3E;
} .right {
float:left;
height: 500px;
width: 300px;
background-color: #CCCCCC;
} </style>
</head> <body>
<div class="header container">头部</div>
<div class="content container">
<div class="left">内容1</div>
<div class="right">内容2</div>
</div>
<div class="footer container">页脚</div>
</body> </html>
这里用到一个float（元素的浮动）
float（元素浮动）
left：向左浮动
right：向右浮动
none：不浮动
它的改变属于行内元素。浮动有个注意的地方。浮动的窗口宽度越大可以放的数量越多，反之窗口宽度越下它的数量多的话就会自动换行显示。
div{float:left}
clear（浮动清除）
none：默认值。两边都有浮动
left：清楚左浮动
right：清除右浮动
both：不允许有浮动（这个比较常用）
div{clear：both}
position（对象定位）
staitc：无定位，默认。
absolute：绝对定位。脱离文档流通过top、right、left、bottom定位。
如果父元素position为static时，将以body坐标原点进行定位。
如果父元素position为relative时，将父元素进行定位。
div { position:absolute; left:100px; top:100px;}
relative：相对定位。（想对自己原来的位置而言）
不脱离文档流
参考自身静态位置通过top、right、left、bottom定位。
div { position: relative; left:100px; top:100px;}
fixed：固定定位
固定死的位置一直在那里不会乱跑。它是以浏览器窗口来固定的，而不是相对于其包含元素，即时滚动页面，它也会在浏览器窗口一模一样的地方。
（可以用作返回顶部功能）
div { position: fixed; right:; bottom:;}
z-index
当元素发生重叠是可以通过z-index属性，设置其层叠的先后顺序。较大number值的对象会覆盖在较小number值的对象之上。
z-index：none| number
div { z-index:number}
display（元素显示模式
block 块对象指的是元素显示为一个方块，默认显示状态下将占据整行，其他的元素只能另起一行显示。（可以调节宽度和高度）
inline 行间对象与block刚好相反，它允许多个元素在同一行显示。（不可以调节宽度和高度）
none 隐藏对象
inline-block 上面两个元素的集合体可以调节宽度和高度。
div{display:block}
CSS篇之DIV+CSS布局的更多相关文章
- css两端对齐——div+css布局实现2端对齐的4种方法总结
div+css布局实现2端对齐是我们网页排版中经常会使用到的,这篇文章将总结一下可以实现的方法: html结构 实现demo里面的div通过Css进行2端对齐. <div class=" ...
- CSS学习笔记--Div+Css布局（div+span以及盒模型）
1.DIV与SPAN 1.1简介 1.DIV和SPAN在整个HTML标记中,没有任何意义,他们的存在就是为了应用CSS样式 2.DIV和span的区别在与,span是内联元素,div是块级元素 内联元 ...
- CSS学习笔记--Div+Css布局实战(入门)
基本页面布局 本教程带着大家做一个简单的页面布局 最重效果如下: 1.第一部,先创建上下左右4个DIV <!DOCTYPE html> <html> <head lang ...
- 12.04 css小测div+css...
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 使用Div+CSS布局设计网站的优点
网页设计业界越来越关注DIV+CSS的标准化设计,大到各大门户网站,小到不计其数的个人网站,在Div+CSS标准化的影响下,网页设计人员已经把这一要求作为行业标准.那么什么是Div+CSS标准?Div ...
- 使用DIV+CSS布局网站的优点和缺陷
随着WEB2.0标准化设计理念的普及,国内很多大型门户网站已经纷纷采用DIV+CSS制作方法,从实际应用情况来看,此种方法绝对好于表格制作页面的方法. 如今大部分网站仍然采用表格嵌套内容的方式来制作网 ...
- DIV+CSS规范命名大全
网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率,具体DIV CSS命名规则CSS命名大全内容篇. 常用DIV+CSS命名大全集合,即CSS命名规则 D ...
- DIV+CSS规范命名大全集合
(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-06-19) 网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率,具体DI ...
- YUI前端优化之javascript,css篇
三.JavaScript和CSS篇 JavaScript和CSS也是我们页面中经常用到的内容,对它们的优化也提高网站性能的重要方面:CSS:把样式表置于顶部避免使用CSS表达式(Expression) ...
随机推荐
- mysql常用函数
一.数学函数 数学函数主要用于处理数字,包括整型.浮点数等. 注:对大小写不敏感 ABS(x) 返回x的绝对值 SELECT ABS(-1) -- 返回1 CEIL(x),CEILING(x) 返回大 ...
- cout 格式化输出
一直习惯于C语言的printf函数来打印,突然有一天要用cout来打印,发现有点不适应. 原来cout也是有格式化输出的. 首先要引入头文件 #include<iostream> // 在 ...
- python之模块
模块即一推代码的集合来实现某个功能,使用时直接调用,甚是方便. 模块又分为三种 自定义模块 内置模块 第三方模块 下面就来介绍介绍什么是内置模块及如何去使用它和内置模块的好处. 使用模块模块前首先导入 ...
- js立即调用的函数表达式
1.多种实现 // 下面2个括弧()都会立即执行 (function () { /* code */ } ()); // 推荐使用这个 (function () { /* code */ })(); ...
- 名词含义阅读 todolist
1.node webkit 2.C#设计模式 3.算法导论 4.SQLSERVER RowNum() 5.图片文字识别 6.tuple 7.yield 8.Web语义化 (多用 p ul ol li ...
- Python ToDo List
这是我在学习python过程中,想做又没来得及做的事情一览.最初只有寥寥几个字,我会尽力去消化,让它不会只增不减. 由于博客园奇怪的算法,明明是一篇非常没有含量的东西(连字数都没有达到),居然能荣登p ...
- 前端js调用七牛制作评价页面案例
一.需求 公司所有的上传页面都用七牛,前端不免要直接调用七牛的代码进行上传,以下是一个实现七牛上传的案例,制作一个常见的商品评价页面,页面需求很常见当上传到第五章图片的时候,上传按钮消失,上传需要显示 ...
- windows 物理内存获取
由于我一般使用的虚拟内存, 有时我们需要获取到物理内存中的数据(也就是内存条中的真实数据), 按理说是很简单,打开物理内存,读取就可以了.但似乎没这么简单: #include "window ...
- 安装Kafka
1.默认安装好zookeeper和scala2.下载安装包,解压 tar -zxvf kafka_2.11-0.9.0.1.tgz kafka_2.11-0.9.0.13.配置环境变量 vim /et ...
- [算法总结]partition (quicksort)
private int partition(int[] nums, int lo, int hi) { if (lo >= hi) { return lo; } int i = lo; int ...