| 用css+div进行页面布局 |
刚刚接触css布局，还真有点不适应，相比较传统的table布局，css实在是比较难用。但这是一场web页面制作的一次新革命，目的是为了适应不同终端的需要，其次是提高显示速度。至于别的好处，我到现在还没感觉到。
如何对css进行布局？在布局之前，我有必要提一下“内容，结构，表现，行为分离”这一思想。我们用div进行结构的制作；用ul,ol,li,table,p,span等描述内容；用font,pading,等控制表现；behaver来描述行为。这几个元素分开，就是要把这些个东西分别写在不同的文件里面（我暂时这样理解），而不象传统的html文件一样，混杂在一起。
一，要认识常用的控制div 的css元素：
如下：
#head{
margin:10px 10px 10px 10px;
padding-left:20px;
padding-top:20px;
padding-right:20px;
padding-bottom:20px;
border-right:#CCCC 2px solid;
border-left:#CCCC 2px solid;
}border-top:#CCCC 2px solid;
border-bottom:#CCCC 2px solid;
background:url(images/bg.gif) #ffccdd no-repeat right bottom;
color:#6666;
text-align:center;
line-height:150%;
width:60%;
//height:20px;
}
1，层的名称为head，在页面中用<div id="sample">就可以调用这个样式。不过我觉得为了class的重用性高，不如用class。
2，MARGIN是指层的边框以外留的空白，用于页边距或者与其它层制造一个间距。"10px 10px 10px 10px"分别代表"上右下左"(顺时针方向)四个边距，如果都一样，可以缩写成"MARGIN: 10px;"。如果边距为零，要写成"MARGIN: 0px;"。注意：当值是零时，除了RGB颜色值0%必须跟百分号，其他情况后面可以不跟单位"px"。MARGIN是透明元素，不能定义颜色。
3，PADDING是指层的边框到层的内容之间的空白。"PADDING-LEFT"是指左边边框到内容的距离，以此类推。如果都一样，可以缩写成"PADDING:0px"。PADDING是透明元素，不能定义颜色。
4，BORDER是指层的边框，"BORDER-RIGHT: #CCC 2px solid;"是定义层的右边框颜色为"#CCC"，宽度为"2px"，样式为"solid"直线。如果要虚线样式可以用"dotted"。
5，BACKGROUND是定义层的背景。分2级定义，先定义图片背景，采用"url(../images/bg_logo.gif)"来指定背景图片路径；其次定义背景色"#FEFEFE"。"on-repeat"指背景图片不需要重复，如果需要横向重复用"repeat-x",纵向重复用"repeat-y",重复铺满整个背景用"repeat"。后面的"right bottom;"是指背景图片从右下角开始。如果没有背景图片可以只定义背景色BACKGROUND: #FEFEFE 。
6，COLOR用于定义字体颜色，这些大家都应知道的。
7，TEXT-ALIGN用来定义层中的内容排列方式，center居中,left居左,right居右。
8，LINE-HEIGHT定义行高，150%是指高度为标准高度的150%，也可以写作：LINE-HEIGHT:1.5或者LINE-HEIGHT:1.5em，都是一样的意思。
9，WIDTH是定义层的宽度，可以采用固定值，例如500px，也可以采用百分比，象这里的"60%"。要注意的是:这个宽度仅仅指你内容的宽度，不包含margin,border和padding。所以这一些相对table来说在设置边框方面就不太好控制，但可以考虑边框也用div来实现。
10，HEIGHT是定义层的高度，但一般都不需要设置的，这样会导致页面里面的内容溢出。
这些是div最基本的常用的样式了。
二，层与层之间的控制
刚开始大家用层来布局，可能觉得别扭。实际上没什么难的，只要按照原来如何用表格来布局的思想转化成用层就可以了。
以下我们用一个常见的三行两列的例子来描述层与层之间的位置关系设置：
第一步：创建一静态用层定义好整体框架
代码：
<div id="contenter">
<div id="top">
<h1>Head</h1>
</div>
<div id="leftnav">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</div>
第二步：为了控制整个页面在浏览器中显示的宽度，需要设置contenter的width:100%，如果小于100% ，则要指定是否居中margin:10px auto(注意auto可能在IE中不支持，则需设置text-align:center)
css代码：
#container
{
width: 90%;
margin: 10px auto;
background-color: #fff;//用来设置背景色
color: #333;
border: 1px solid gray;//用来设置边框
line-height:130%;
}
其中margin指body和四周的距离；background-color指背景色;border指边框的大小。但一般情况下不要设置这一参数。因为对宽会有影响。
为了增加页面的可读性，易读性可以增加line-height属性，设置完之后其它的层都会继承下来。
第三步定义Top的样式。我们如下定义
css代码:
#top
{
padding:5px;
background-color:#ff0000;
border-bottom:1px solid #ffffff;
}
在top 的css中有一个h1我们来定义它的样式
#top h1
{
padding:0;
margin:0;
}
第四步：要设置左边菜单的排方式，我们应用到float了,float:left。
当一个div被设置成float时，宽度是必须要设定的width:160px。另外我们需设定padding让内容离边距远些。
＃leftnav
{
float:left;
width:160px;
margin:0px;
padding:5px;
}
当用padding时要特别注意如果层是浮动的，容易造成内容溢出的情况。比如我左边菜单设置的宽为160px，padding为10px，那么中间content的margin-left就必须是大于170px的，这样左边的菜单的内容才不会出现在层外面。至于em和px之间是什么换算规则，我会稍后补上。
第五步：是最重要的一步，用来设置content的位置关系。margin-left是必须的。然后再设一个左边线。border-left:1px solid #ffffff;padding用来指定当前内容和边框的距离；background-color用来指定当前背景的颜色；height的指定是为了尽可能地不出滚动条。
css代码:
#content
{
margin-left: 200px;
border-left: 1px solid gray;
padding: 1em;
}
注意content的padding在一些情况下还是比较重要的。
第六步：设置bottom，这一步要先做clear:both.目的是为了在所有float层的最下方。
代码如下：
#footer
{
clear: both;
margin: 0;
padding: .5em;
color: #333;
background-color: #ddd;
border-top: 1px solid gray;
}
到此三行两列布局完成。
三，补充说明
设置body的常用css，规定边距为0px;
body {
margin:0;
padding:0;
} |
|
发表于 @ 2005年10月12日 22:51:00|评论(loading...)|编辑