动态WEB入门 CSS+Div
传统的网页制作采用两层架构,在表现层控制页面显示,代码比较混乱而且维护性不好,现在一般都采用div+css架构来实现网站页面的开发,本文只是一个简明手册,起到一个抛砖引玉的作用。
一.css-----层叠样式表
使用css文件可以灵活控制表现层。同一个页面文件,使用不同的CSS,可以具有不同的外观效果。因此,需要修改外观时,仅修改css文件,而不需要对页面文件做任何改动。
css文件1 |
页面文件1 |
css文件2 |
页面文件1 |
页面文件1 |
后台处理文件 |
表现层 |
业务层 |
|
目标----设计结构化的页面
u 以往的代码:
<table width=“500px" cellpadding="3" border="2" align="left">
u 结构化的代码
<table>
width、border等属性都称为表现层属性。结构化的页面,表现层属性全部在css中描述,不再出现在页面文件。
以上代码的css描述
table{
width:500px;
cellpadding:3;
border:2;
align:left;
}
注:属性后面使用冒号(:)来设定值
二.css基本知识
u css的引入:
1、页面引入
样式描述存在于页面文件中。样式仅在该页面有效。
<style type="text/css" media="screen">
table{width:500px;cellpadding:3;border:2;align:left;}
</style>
2、css文件引入
样式文件单独存在于一个样式文件,通常以.css为后缀。样式为全局有效。页面文件需要链接该样式文件才能使用样式描述。
通常会为一个网站建立一个css文件,以统一全局效果。对于局部特殊之处,再通过页面级样式以局部限定。
u 拾取器
table{width:500px;cellpadding:3;border:2;align:left;}
-------------------对table标记有效的样式
#mydiv{width:500px;border:2}
-------------------对标记内 id=“mydiv“ 有效
.atag{width:500px;border:2}
-------------------对标记内 class=“atag” 有效
input.myinput{width:500px;border:2}
-------------------对标记为input class=“myinput“ 有效
#mydiv #mysubdiv{width:500px;border:2}
-------------对id=“mydiv”的内嵌标记id=“mysubdiv”有效
mytag{width:500px;border:2}
-------------自定义拾取器
使用举例
<div id=“mydiv”>
<div id=“mysubdiv”> -------------将该div放置于mydiv外,则该div不具有样式
<table>
<tr>
<td class=“atag”>
<input type=“input” class=“myinput”></input>
</td>
</tr>
</table>
</div>
<mytag>helloworld</mytag>
</div>
三.结构化界面布局--div+css
u 现代理念:用div实现对页面结构的划分,用css控制表现。
head |
left |
main |
foot |
head |
left |
foot |
middle |
right |
div
u div是很好的布局元素,有几个重要属性需要了解:
1、position(absolute/relative)
定位属性。通常用absolute绝对定位,然后用其left、top等属性指明其坐标。但注意,是相对于父容器的坐标。
#wrap{left:100;top:100;}
#sub{left:50;top:50;}
wrap |
sub |
<div id=“wrap”> </div> <div id=“sub”> </div> |
<div id=“wrap”> <div id=“sub”> </div> </div> |
无嵌套:sub层的父容器为body |
有嵌套:sub层的父容器为wrap |
wrap |
sub |
wrap |
2、float(left/right/none)
如果没有设置该属性,当浏览器变大或变小时,层的位置不变。设置该属性后,层随着浏览器变化,始终居左或居右。
但注意,设置position:absolute后,该属性不起作用。
3、width(百分比/像素)
注:百分比仅对拾取器为id时有效。
用百分比表示与父容器之间的相对关系,用像素则表示绝对宽度。
4、height(像素)
无法用百分比设置相对高度,只能设计绝对大小,即高度不变,这是设计时的一个难点。网上有资料关于高度自适应问题的解决。
小技巧:使用height:expression(screen.height)/5,设置层的高度为显示器的1/5,使得层可以随浏览器不同而自动变化。
5、overflow(hidden/scroll/auto)
当层内的内容超过(溢出)层的高度和宽度时,层的显示方式。
hidden:溢出部分不显示
scroll:层显示水平、垂直滚动条
auto:水平溢出自动显示水平滚动条,垂直溢出自动显示垂直滚动条。
通常用auto。这样可以设计时就设定层的大小,运行时,其大小都不变,层的内容溢出时通过滚动条显示溢出部分,因此不至于影响其他页面元素,而导致破坏页面整体结构。
四.需要考虑的因素
客户端浏览器、分辨率大小是不固定的,页面元素如何适应客户端?
解决的方法无非就是两个:
思路一、外层固定大小,内层(包括div,table元素)相对大小。
很多网站采用这一思路。最外层的div的width设置成800,并居中。使得无论是15寸、17寸或19寸显示器,页面元素均不变化。但必然会有部分显示区域不能使用。
思路二、所有大小均用相对大小。
最外层大小通常根据计算客户端浏览器大小决定,内嵌层(包括div,table元素)用相对大小。提高显示区域的利用率。
五.结构化设计页面
u 1、设计页面结构,考虑采用是相对还是绝对大小思路;
u 2、用div规划整个页面布局,有时可以用框架(frameset)来划分页面布局;
u 3、用css控制div属性;
u 4、考虑整个网站会有哪些页面元素,并为他们设计css,包括拾取器的选用及命名。
u 5、页面引入css,并观察效果并改进css。
注意结构化:
1、用div结构化布局;
2、所有表现层属性均在css中定义。