DIV+css布局入门Word文档下载推荐.docx
- 文档编号:3098089
- 上传时间:2023-05-01
- 格式:DOCX
- 页数:10
- 大小:17.92KB
DIV+css布局入门Word文档下载推荐.docx
《DIV+css布局入门Word文档下载推荐.docx》由会员分享,可在线阅读,更多相关《DIV+css布局入门Word文档下载推荐.docx(10页珍藏版)》请在冰点文库上搜索。
}
#column1{float:
left;
width:
40%;
#column2{float:
right;
60%;
.clear{clear:
both;
}
position:
static|absolute|fixed|relative
static:
无特殊定位,对象遵循HTML定位规则
absolute:
将对象从文档流中拖出,使用left,right,top,bottom等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。
如果不存在这样的父对象,则依据body对象。
而其层叠通过z-index属性定义
fixed:
未支持。
对象定位遵从绝对(absolute)方式。
但是要遵守一些规范
relative:
对象不可层叠,但将依据left,right,top,bottom等属性在正常文档流中偏移位置
它来实现一行两列的例子
#wrap{position:
relative;
/*相对定位*/width:
770px;
#column1{position:
absolute;
top:
0;
left:
300px;
#column2{position:
right:
470px;
他们的区别在哪?
显然,float是相对定位的,会随着浏览器的大小和分辨率的变化而改变,而position就不行了,所以一般情况下还是float布局!
2.CSS常用布局实例
一列
单行一列
body{margin:
0px;
padding:
text-align:
center;
}
#content{
margin-left:
margin-right:
400px;
两行一列
body{
margin:
#content-top{margin-left:
#content-end{margin-left:
三行一列
#content-top{
#content-mid{margin-left:
#content-end{margin-left:
两列
单行两列
#bodycenter{width:
700px;
margin-right:
auto;
overflow:
#bodycenter#dv1{float:
left;
width:
280px;
#bodycenter#dv2{float:
right;
410px;
两行两列
#header{
margin-left:
overflow:
#bodycenter#dv1{float:
#bodycenter#dv2{float:
三行两列
#bodycenter{width:
#bodycenter#dv1{
float:
#footer{
三列
单行三列
绝对定位
#left{position:
absolute;
120px;
#middle{margin:
20px190px20px190px;
#right{position:
top:
float定位
column"
column3"
这里是第三列<
#column{float:
30%;
#column3{float:
float定位二
center"
class="
h1>
Thisisthemaincontent.<
/h1>
left"
h2>
Thisistheleftsidebar.<
/h2>
right"
Thisistherightsidebar.<
body{margin:
0;
padding-left:
200px;
padding-right:
190px;
min-width:
240px;
.column{position:
relative;
float:
#center{width:
100%;
#left{width:
180px;
-100%;
#right{width:
130px;
两行三列
header"
这里是顶行<
#header{width:
三行三列
footer"
这里是底部一行<
#footer{width:
PS:
这里列出的是常用的例子,而非研究之用,对一每个盒子,我都没有设置margin,padding,boeder等属性,是因为我个人觉得,含有宽度定位的时候,最好不好用到他们,除非必不得已,因为如果不是这样的话,解决浏览器兼容问题,会让你头疼,而且产生一系列CSS代码,我觉得这样的效率和效果都不好!
3.CSS布局高级技巧
margin和padding总是有可能要用到,而产生的问题如何解决呢?
由于浏览器解释容器宽度的方法不同:
IE6.0FirefoxOpera等是
真实宽度=width+padding+border+margin
IE5.X
真实宽度=width-padding-border-margin
很明显,第一种下很完美的布局在第二种情况下后果是很凄惨的!
解决的方法是hack
div.content{
400px;
//这个是错误的width,所有浏览器都读到了
voice-family:
"
\"
}\"
"
;
//IE5.X/win忽略了"
后的内容
inherit;
//包括IE6/win在内的部分浏览器读到这句,新的数值(300px)覆盖掉了旧的
html>
body.content{//html>
body是CSS2的写法
//支持CSS2该写法的浏览器(非IE5)有幸读到了这一句
300px!
important;
//这个是正确的width,大部分支持!
important标记的浏览器使用这里的数值
width(空格)/**/:
//IE6/win不解析这句,所以IE6/win仍然认为width的值是300px;
而IE5.X/win读到这句,新的数值(400px)覆盖掉了旧的,因为!
important标记对他们不起作用
//支持CSS2该写法的浏览器有幸读到了这一句
使用CSS层叠样式表设置行间距
教程»
css»
文本属性»
使用CSS层叠样式表设置行间距
主题
在html中使用css层叠样式表如何设置行间距?
我想让行之间有较大的间距,如何实现?
解释
属性:
线高度
用法:
line-height:
1cm;
40px;
40pt;
200%;
定义:
这是用来设置行间距。
属性可以取以下的值。
a)cm:
行间距以厘米为单位来设置,例如:
1cm或者2cm等...
b)px:
行间距以像素为单位来设置,例如:
1px或者10px等...
c)pt:
行间距以点为单位来设置,例如:
1pt或者10pt等...
d)%:
行间距以百分数为单位来设置,例如:
200%或者500%等....如果是100%意思就是原来的行间距。
示例1:
divstyle="
background-color:
RosyBrown;
line-height:
测试线高度-1号线<
br>
测试线高度-2号线<
结果:
测试线高度-1号线
测试线高度-2号线
示例2:
80px;
测试线高度<
测试线高度
测试线高度-2号线
示例3:
20pt;
测试线高度-2号线<
示例4:
如何设置div之间的水平间距:
建议:
尽可能的手写代码,可以有效的提高学习效率和深度。
设定两个div的水平间距可能是最基本的操作了,但是对于初学div+css布局者来说也并不是那么容易,下面就简单介绍一下。
先看一个代码实例:
!
DOCTYPEhtmlPUBLIC"
-//W3C//DTDXHTML1.0Transitional//EN"
http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
<
htmlxmlns="
//www.w3.org/1999/xhtml"
head>
metahttp-equiv="
Content-Type"
content="
text/html;
charset=utf-8"
/>
metaname="
author"
title>
蚂蚁部落<
/title>
styletype="
text/css"
.parent{width:
200px;
height:
border:
1pxsolidgreen;
overflow:
hidden;
}.left{width:
100px;
50px;
1pxsolidblue;
float:
left}.right{width:
80px;
1pxsolidred;
}<
/style>
/head>
body>
<
parent"
/body>
/html>
为了让两个div能够水平排列,使用了float属性,让两个div分别左浮动和右浮动。
这时候两个div分别紧靠容器的左右两侧内壁,这样我们就可以调整容器的宽度来调整两个div的水平间距了,要注意的是:
两个div的实际占用宽度一定不要忘记border。
代码中两个div的间距是:
200px-100px-1px-1px-80px-1px-1px=16px。
下面再介绍一使用使用外边距设置两个div的水平间距,还是先看一段代码:
margin-left:
10px;
以上代码是通过设置div的外边距来设置两个div之间的间距的。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- DIV css 布局 入门