动态WEB入门 CSS+Div

来源：互联网发布：pdf.js具体怎么用编辑：程序博客网时间：2024/05/22 09:41

动态WEB入门 CSS+Div

传统的网页制作采用两层架构，在表现层控制页面显示，代码比较混乱而且维护性不好，现在一般都采用div+css架构来实现网站页面的开发，本文只是一个简明手册，起到一个抛砖引玉的作用。

一．css-----层叠样式表

使用css文件可以灵活控制表现层。同一个页面文件，使用不同的CSS，可以具有不同的外观效果。因此，需要修改外观时，仅修改css文件，而不需要对页面文件做任何改动。

css文件1

页面文件1

css文件2

页面文件1

后台处理文件

表现层

业务层

目标----设计结构化的页面

u 以往的代码：

u 结构化的代码

<table>

width、border等属性都称为表现层属性。结构化的页面，表现层属性全部在css中描述，不再出现在页面文件。

以上代码的css描述

table{

width:500px;

cellpadding:3;

border:2;

align:left;

}

注：属性后面使用冒号（：）来设定值

二．css基本知识

u css的引入：

１、页面引入

样式描述存在于页面文件中。样式仅在该页面有效。

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=“mysubdiv”> -------------将该div放置于mydiv外，则该div不具有样式

<table>

<tr>

</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>

</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中定义。