CSS方法

2024-09-21

CSS方法（共9篇）

CSS方法篇1

在网页制作中,TABLE布局在所谓的WEB2.0盛行前是比较流行的布局方式,甚至现在对于网页制作初学者来说,TABLE布局依然是一种很好的方式。基于TABLE布局具有搭建速度快、容易控制的特点,所以现在很多网络公司给客户制作网站(当然是在客户没有要求使用DIV+CSS的情况下)还在使用TABLE布局网页。但是如今的网页设计到了该考虑搜索引擎以及给用户带来更多的便利的时代,用DIV+CSS进行网页布局比用TABLE布局将体现出更多的优势。但是又由于CSS对不同浏览器存在兼容性问题,所以对于初学者来说,在使用DIV+CSS进行网页布局过程中可能会遇到各式各样的问题,在这里给大家探讨几点DIV+CSS布局的技巧。

一、DIV+CSS网页布局的分类

1、一列固定宽度

一列布局是所有布局的基础,也是最简单的布局方式,用DIV+CSS布局的代码如下:

2、一列自适应宽度

自适应的布局能够根据浏览器窗口的大小自动改变其宽度和高度值,是网页设计中一种非常灵活的布局形式,用DIV+CSS布局的代码如下:

3、一列固定宽度居中

页面整体居中是网页布局中最常见到形式,在传统的表格布局中,使用TABLE的align="center"属性来实现,在DIV+CSS布局中采用如下代码来实现:

4、二列固定宽度

在有一列固定宽度布局的基础上,实现二列固定宽度也就很简单了,用DIV+CSS布局的代码如下:

5、二列固定宽度居中

从一列固定宽度居中的布局方法中,我们就不难完成二列固定宽度居中了,可以使用一个居中的DIV作为容器,将二列分栏的DIV放置在容器中,从而就实现二列的居中显示。DIV+CSS的代码如下:

这里仅列举了一列、二列的布局方式,实际上三列、四列等多列的布局方式也和二列的布局方式的实现方法是一样的。事实上不管多么复杂的页面设计,在DIV+CSS网页布局中,均是以DIV为基础,通过一列、二列、三列这些基础的布局方式的相互组合与嵌套来实现复杂的布局。

二、CSS对不同浏览器的兼容性解决办法

由于CSS在不同浏览器中存在兼容性问题,所以在使用DIV+CSS布局中,可能导致相同的内容在不同浏览器中出现不同的显示效果,为了解决这些方面的问题,以下针对CSS某些属性的用法提出相应的一些解决办法。

1、页面居中问题

在IE浏览器下,可以通过定义CSS样式body{text-align:center;}来实现页面居中,但在Fire Fox(以下简写为FF)浏览器下此属性就失效了。

解决办法:使用"margin-left:auto;margin-right:auto;"

2、pa dding属性在不同浏览器的显示问题

当给DIV设置padding属性后,在FF浏览器中会导致width和height增加(DIV的实际宽度=DIV宽+Padding),但在IE浏览器中width和height不会增加,这就导致相同的内容在不同浏览器中出现不同的显示效果。

解决办法:给DIV设定IE、FF两个宽度,在IE的宽度前加上IE特有标记"*"号。例如:

3、奇怪的间隙问题

有的时候我们明明设好了高度,可在IE6上却看见一些奇怪的间隙。

解决办法:试试在有空隙的DIV上加上"font-size:0px;"

4、关于手形光标

要将页面内容的光标显示为手形,通常的做法是使CSS属性cursor:hand;但这于做法只适用于IE.

解决办法:cursor:pointer;

5、浮动在IE6产生双倍距离问题

例如:

这种情况之下IE6会产生200px的距离。

解决办法:在以上属性的基础上,加上display:inline,使浮动忽略。

6、UL和FORM标签的pa dding与ma rgin

ul标签在FF中默认是有padding值的,而在IE中只有margin默认有值。FORM标签在IE中,将会自动margin一些边距,而在FF中margin则是0;

解决办法:css中首先都使用这样的样式ul,form{margin:0;padding:0;}

7、截字省略号

这个CSS是定义当内容溢出宽度后会自行的截掉超出部分的文字,并以省略号结尾,但注意Firefox并不支持。

三、结束语

综合以上讨论的DIV+CSS网页布局的技巧,希望能给酷爱DIV+CSS网页布局的初学者带来一些启示,但在网站建设与网页设计过程中,我认为不可盲目跟风,如何更有效、更合理的运用WEB2.0设计标准,这需要很长时间的学习和锻炼。而如何将DIV+CSS运用的更好,我觉得这需要通过不断的实践和体验,积累丰富的设计经验,才能很好的掌握这门技术。

摘要：如今的网页设计考虑得更多的是搜索引擎以及给用户带来更多的便利,传统的TABLE网页布局由于其庞大的HTML代码,使得其在搜索引擎方面显得有些无能为力,而用DIV+CSS进行网页布局具有代码精简的优点使得其在这方面又体现出更多的优势。但是又由于CSS对不同浏览器存在兼容性问题,所以对于初学者来说,在使用DIV+CSS进行网页布局过程中可能会遇到各种问题,本文就给大家探讨几点DIV+CSS布局的技巧。

关键词：DIV+CSS,网页布局,浏览器,兼容性

参考文献

[1]览众,张晓景著.DIV+CSS网页布局商业案例精粹[M].电子工业出版社,2007.12

[2]Jeffrey Zeldman著.傅捷,王宗义,祝军译.网站重构——应用Web标准进行设计[M].电子工业出版社,2005.4.

[3]李烨著.别具光芒——CSS属性、浏览器兼容与网页布局[M].人民邮电出版社,2008.10.

CSS方法篇2

1、掌握HTML

要想学会CSS,首先必须掌握HTML，如果你没有学会HTML,那么你将无法有效使用CSS，因为他们是相铺相成，缺少了HTML的CSS是毫无意义的。HTML的学习是非常的重要，以至于你需要花费一半的学习时间在里面。

2、CSS概念

在学习CSS之前，首先要了解CSS是什么，为什么CSS是如此重要，在了解CSS基本概念后，你将能理解到网页设计中CSS扮演着什么角色。

3、CSS基本语法

所谓无规矩不成方圆，CSS基本语法的分为3部分：CSS选择器、CSS选择器声明、CSS的继承，这3部分是CSS的精髓，始终贯穿在编写CSS之中。在CSS语法学习中，我们会面临同一种结果却有着多种表达方式，这时要根据页面的需要采取合适的表达方式来实现。当我们对CSS有所理解时可以使用CSS缩写，这样可以精简CSS代码，降低CSS文件大小，提高网页打开速度，同时能使代码更加通俗易懂，

4、CSS兼容性

由于每个浏览器都有其默认的CSS，所以不同的浏览器下有着不同的显示效果。在我们开始编写CSS代码时，对CSS没有深入掌握的情况下，难免会犯下对浏览器兼容不一致的问题，这要求我们在编写CSS代码时，最好在两个不同的浏览器上进行预览，以便及时调整各个环节，通过这样不断的预览测试，发现然后解决问题来快速的掌握CSS在不同浏览器下的兼容性。

5、CSS工具

好的CSS工具不仅有助于帮助你学习CSS，而且还可以帮助你提高编写CSS代码的效率，当然你也可以使用Dreamweaver或者使用纯文本编辑器如记事本来编写，这取决你的习惯，正所谓萝卜白菜各有所爱。

6、利用各种渠道学习

学习CSS不要一味的埋头苦干，多去CSS相关的论坛和博客逛逛，要做到不耻下问，多听听前辈的讲解。还要多参考其他著名网站的CSS代码，毕竟都是些CSS高手写的代码，代表CSS代码的规范和一些前沿技术，这样对我们快速掌握各种CSS技巧并运用到实际编写中，是有很大好处的。

学习CSS是一个循环渐进的过程，面对学习CSS过程中可能会遇到这样那样的问题，所以心理要有准备，碰到难点时多查，多问，多实践才能发现和解决问题。有人说CSS很难，有人说CSS很容易，难与容易取决于自身的学习态度，因为学习态度决定一切

如何深入学习css

学习CSS有了一定基础后，有的人会觉得好象没有什么学的.因为知道一些基本的理论性的东西.CSS说它容易是因为它的知识点有限.说它难学就在于各浏览器对CSS的支持程度不同.

如何深入学习我给出以下几点见意：

1.去找机会多做一些项目，公司的，或是外包的，哪怕你没有人民币挣也要做.

这一条并不是多做就会好有的效果，有的人做的项目不少总是按着老的思路去做，做了很多，水平也不会有太大的提高，提高的也只能是熟练度.每一次在做的过程中要学会去思考，看看我们有没有更优化的的方法去实现同一个效果.多说一个题外话：有一个错误的观点认为HACK是不好的.想法也是错的.我们在做页面时原则是不使用HACK，但是如果在特别需求上有时还是要使用，前提是你不用HACK不行，一些人的能力有限，所以他没有办法了就用HACK，很多时候可以换个思路就可以不用HACK.多说了这一点儿.要做完项目时遇到了新的问题，一定要做笔记下来，以后忘了也可以知道在哪能查到这个问题.

2.多去BBS，这样可以多看看一些别人项目中遇到的问题.这是一个日积月累的过程，你看的东西多了.掌握的多了，因为你做的项目是有限的，不可能把所有的问题都遇到，别人遇到的你去思考，看如何解决.或看其它人如何解决这个问题的.当你在项目中遇到这个问题，你就可以不用在多费时间就几钟的事了.有经验与没有经验的区别也就是这一点，有经验的人不是天才，是他做的东西多了，一看就明白知道如何解决.而没有经验的人会现想这个问题如何解决，那可以要花好多时间的.

3.多看一些国外的好的CSS网站，CSS代码是公开的，可以很方便的看到.分析他们的页面和CSS.从好的网站你会学到很多东西，和你已有的一对比，你会发现他们的思路要比你开阔的多，也优秀的多.

CSS方法篇3

1 相关概念简介

Web标准:Web标准将网页划分为三个部分,即结构、表现、行为。结构是指用来对网页中的信息进行整理与分类,常用的技术有HTML、XHTML、XML;表现用于对已经被结构化的信息进行显示上的修饰,包括版式颜色大小等,主要技术就是CSS;行为是指对整个文档内部的一个模型进行定义及交互行为的编写,主要技术有DOM、ECMAScript(Java Script脚本语言)。

Div:Div元素是用来为HTML文档内大块的内容提供结构和背景的元素。它可以将文档分割成多个有意义的区域或模块,Div的起始标签和结束标签之间的所有的内容都是用来构成这个块的,其中所包含元素的特性由Div标签的属性来控制。

CSS:CSS(Cascading Style Sheet)译作层叠样式表,是用于控制网页样式并允许样式信息与网页内容分离的一种标记性语言。使用CSS技术,可以将表现和结构分离。能更好的控制页面布局。从而制作体积更小,下载更快的网页。

Div+CSS:Div+CSS是应用在XHTML中的一种布局方式,在XHTML网站设计标准中,不再使用Table定位技术,而是采用Div+CSS的方式实现各种定位。

2 解析Div+CSS网页布局

网页布局,是指在制作页面的过程中,将整个页面划分为横纵几个功能模块进行布局。本文通过一个具体的实例解析使用Div+CSS布局网页的主要技术步骤。

2.1 分析构架

图1是一个运动用品网站的主页,通过对主页架构的分析,笔者将页面中的各元素按其功能的不同划分成以下模块:顶部部分(header),包括了logo、menu和banner图片区;内容部分(pagebody),包括了左右边栏、主体内容;底部部分,包括了作者的邮箱地址、版权信息等。页面构架与Div布局如图1。

由上可得网页Div结构如下:

以上标签名称的命名要尽量的清晰透明,让其他跟进的人员可以快速理解该标签定义的模块及含义。需要时,子标签可以继承父标签的名称作为前缀,如在main层中再详细划分时,可以命名为main_left、main_right等。

2.2 模块拆分

按照Web标准,将页面的表现与内容分离,本部分主要定义各Div的CSS样式。

此时可新建一个样式文件style.css,为了使以后的阅读代码更简单易懂,也可以添加相关注释。样式代码如下:

以上定义的CSS样式中,首先定义了

元素的边界属性值为0,取消默认的边界。然后定义了container元素的100%宽度,接着通过宽度、高度以及边界属性确定了header元素的位置。再接下来定义了header元素中的两个横向分栏,分别是banner元素和menu元素。然后同样通过宽度、高度以及边界属性确定了主体元素pagebody的位置,并使用浮动定位属性,分别定义了左右两个纵向分栏sidebar和main元素的位置。最后再次使用定义宽度、高度以及边界属性定义了footer元素的大小和显示位置。

2.3 Div标签布局

本部分主要完成页面的布局和内容的填充。新建首页页面index.htm,按照上面所说页面构架插入Div标签,部分XHTML文档如下:

最后,将上面所建的样式文件附加到首页中即可,代码如下:

按照上述的方法,每一个模块又可以继续细分成小的模块,细分到可以表现每个不同功能的页面元素,本文就不再详细介绍内容的填充过程了。

这种布局方法的优点在于:每个元素之间按照文档流和属性值显示,具有很好的扩展性。其缺点在于:由于每个元素之间相互影响,更改某个元素的相关属性时,可能会影响其他元素的显示。

2.4 总体调整

本部分是对已完成页面做最后的调整,包括色彩、内容及CSS样式部分。

2.5 Div+CSS布局时的常用技巧

1)使用margin进行页面元素水平居中的设置。margin为边界属性,包含上、下、左、右四个边界距离的设置,当想要设置居中时,只要将左右边界设置为自动即可,如:

margin:0 auto;/*0表示上下边界为0,auto表示左右边界为自动*/

2)使用line-height进行页面元素垂直居中的设置。line-height为行高属性,当行高与元素本身高相同时,行内元素是垂直居中的。如:#menu{line-height:50px;height:50px;}/*行高和标签高同为50px*/。但是这种居中的方式在表单的文本框中是没有效果的,还有一个办法就是定义上下补白,即padding属性值就可以实现想要的效果了。

3)使用clear清除左右浮动。例如定义有两个Div布局如下:

浏览显示的结果是两个层水平并排显示,如果想让这两个层垂直排列,则可以在后一个层内添加{clear:left}。又如在Div定位使用浮动的时候,常发生下面的层被浮动的层所覆盖,或者层里嵌套的子层超出了外层的范围的情况,此时解决的办法是在样式表中加入这句代码:clearfloat{clear:both;height:0;font-size:1px;line-height:0px;},然后在页面中需要清除浮动的地方加入:
即可。

4)辅助图片一律用背景处理。这是一种与传统的Table布局不一样的思维方式,样式代码如下:background:url(images/bg.jpg#ffccbb no-repeat right bottom;虽然也可以直接插在内容里,但是我们一般不这么做。这里说的辅助图片是指那些不足做为页面要表达的内容的一部分,只是仅仅用于修饰、间隔或者提醒的图片。

3 解析Div+CSS布局的优缺点

3.1 Div+CSS布局的优势

随着当前大部分网站均采用Div+CSS进行网页的排版和布局,Div+CSS已经成为一种网页设计的标准和趋势,其独立、轻巧、易维护的特性展露无遗,具体分析如下:

1)网页的表现与内容分离。Div+CSS将样式设计部分剥离出来放在一个独立的样式文件中,html文件中只存放实质的内容,这样的页面代码量小,读取速度快,能提高页面浏览速度。对于同一个页面视觉效果,采用Div+CSS重构的页面大小要比table编码的页面文件小得多,前者一般只有后者的1/2大小,这样浏览器就不用去解析大量冗长的标签,同时对搜索引擎更加友好。

2)更加简洁轻巧的网页效果。CSS的设计更加灵活,对于图片,文字,方块等有无限多变的设计方案,可以实现多种不同的视觉效果。

3)易于维护和改版。由于多个页面可以享用一个CSS文件,这样只需简单的修改CSS文件就可以重新布局整个网站的页面。大大的提高了网站维护和改版的效率,降低了网站改版的成本。

4)易于保持视觉的一致和网站风格的一致。表格的嵌套会使页面和页面之间,区域和区域之间的显示效果有偏差,层的应用在不同的分辨率下也会有不用的视觉效果,而Div+CSS避免了这样的问题,只要遵循了相同的WEB标准,显示效果的毫无偏差的。

3.2 Div+CSS布局的劣势

虽然这种布局方法存在很多优势,但是,与Table布局的上手简单,所见即所得的特性相比,也存在着代码编写量大、依赖性强、所见非所得等缺点,具体分析如下:

1)网页设计比较复杂。Div不能像Table那样直接使用属性设计,从区域的大小、定位、背景、边框到设计元素的定位、表现形式都必须一一编写CSS代码,对与初学者来说很难上手。这在一定程度上影响了XHTML网站设计语言的普及。

2)对CSS文件的依赖。一旦在文件调用或者读取的过程中,CSS文件出现异常,就会影响到这个网站的正常浏览。整个网站将变的惨不忍睹。

3)浏览器的兼容性。不同的浏览器可以会有不用的WEB标准。使用Div+CSS设计的网站能IE浏览器中正常显示并不保证在其他,比如火狐浏览器(Fir Fox)中也能正常显示。还有待于浏览器的进一步支持。

4 结束语

综上所述,使用Div+CSS布局网页能够取代Table成为当今网站的主流是技术发展的必然趋势,对于我们这些高等职业技术院校来说,更是教学改革的必然,我们必须适当的调整教学思路,在部分保留Table布局的前提下,让网页设计课程焕然一新,不仅要让学生掌握Div+CSS的网页布局方法,更重要的是以此为契机,引导学生主动接触代码,培养和保持学生代码编写的兴趣。

摘要：Div+CSS布局网页的方法越来越多的被用于网页设计中,该文通过一个具体实例解析了Div+CSS布局方法的技术步骤,总结了在布局过程中的常用技巧并结合Table布局揭示了Div+CSS布局的优缺点,从而提出了网页设计课程的教改思想。

关键词：Div,Css,网页布局,网页构架

参考文献

[1]威克·史密斯.写给大家看的CSS书[M].李松峰.译.北京:人民邮电出版社,2009.

[2]林婷婷.以Div+CSS思想引导学生学习编写网页的新教法[J].科技信息,2009(11).

CSS方法篇4

CSS样式定义 -

简单地讲，CSS样式全称为Cascading Style. Sheets，中文翻译为“层叠样式表”，简称样式表有被我们称为CSS样式或认知的divcss样式，而就是Cascading Style. Sheets英文单词开头字母缩写，CSS样式是一种制作网页样式的新技术也就是本DIVCSS5介绍主题，

什么是css文件、css文件是什么？

，

走进CSS样式 -

大家可以这样理解CSS样式只是一个名称而已，就像自己名字为什么叫张三李四一样，从“CSS样式”短语可以理解，去除“CSS”后，只剩“样式”两字，所以可以通俗理解“样式”就有花样、种类多样、多种多样、各式各样等意思。顾名思义CSS样式就是通过“CSS”代名词后技术来制作开发多种多样不同样式、不同版面、版面区分、上下区分网页的一种CSS技术。

通俗认识 -

CSS方法篇5

WebGIS是在Internet环境下对GIS技术的扩展和应用[1], 它使GIS从传统的单机模式向网络化发展, 从而向更多用户提供更为广泛、方便和快捷的服务。由于GIS所特有的空间信息特征, WebGIS客户端必须在同一主页面下实现空间数据和属性数据的显示和浏览功能。因此, WebGIS主页面一般比较复杂, 在设计时需要合理布局, 精细设计, 选择先进而又易于实现的网页设计技术可以大大的降低开发和维护成本。目前, 与网页制作相关的技术层出不穷, 具有代表性的有CSS、javascript、ajax等等。其中在网页布局方面, CSS具有不可比拟的优势, “DIV+CSS”的组合已经成为了网页布局设计中的经典搭配。本文探讨在WebGIS客户端页面设计中采用CSS技术的思路、方法和实例以及若干值得注意的问题, 为类似问题的解决提供较好的解决方案。

二、CSS简介[2]

CSS (Cascading Style Sheet) 的全称是“层叠样式表”, 又称“级联样式表”, 产生于上个世纪末期, 伴随着HTML的迅猛发展而逐渐兴起。目前主流的CSS版本是W3C (World Wide Web Consortion, 万维网联盟) 于1998年5月发布的CSS第二版。值得一提的是, W3C于2005年将新一代CSS3标准的制定提上日程, 不过到目前为止, 还没有形成一个较为完备的标准。

通常, 人们会将CSS与DIV结合在一起。事实上, DIV是HTML的标签, 用来分区块为HTML文档内大块 (block-level) 的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的, 其中所包含元素的特性由DIV标签的属性来控制, 或者是通过使用样式表格式化这个块来进行控制。将CSS与DIV有机的结合起来, 无论是外观上还是性能上, 都将被大大优化。总体来讲, 两者结合主要具备以下优势[3]:

1) 简化代码, 提高页面浏览速度。

在以往的表格式布局中, 往往需要添加很多的属性和数字, 使得代码显得比较复杂。而CSS文件是与HTML文件相对分离的, 通常可以多个页面共用, 大大缩减了代码量, 这将对于浏览速度有所提高。

2) 对浏览器兼容较好。

CSS是W3C创建的标准, 它符合WEB标准规范的发展趋势, 可以在几乎所有浏览器上使用, 而且就显示效果而言也相差无几。

3) 缩短开发和维护周期。

在有一个主题的网站中, 通常会有一个通用的CSS文件, 只需要修改其中的部分代码, 即可实现不同页面的不同功能在进行代码网站维护时, 直接修改外部的CSS文件, 即可以更新页面风格。在很多情况下, 一个网站的各个页面都共用一个CSS文件, 这个CSS一经修改, 所有页面都将同步变化, 不用一页一页更新。因此, 无论是开发还是维护, 都会极其方便。

4) 文本控制力强。

相对于FONT标签, CSS在字体编辑及排版上具有较大的优势, 通过添加或者修改一些属性, 即可方便地改变文字的大小、颜色、样式等。

5) 优化布局控制。

通常页面的下载是按照代码的排列顺序, 而表格布局代码的排列代表从上向下, 从左到右, 无法改变。而通过CSS控制, 可以任意改变代码的排列顺序。这样, 开发者可以将更多的注意力放在外观设计上。

三、CSS布局的应用实例

GIS的应用需要与用户进行友好的交互, 我们借助已经实现的WebGIS网站“长大人人网”来论述如何利用CSS来实现更为理想的布局。

3.1“盒式模型”设计模式[4]

首先要强调一下CSS盒式模型的重要性。虽然CSS是W3C标准, 但不同的浏览器可能采用不同的布局渲染器 (Layout Engine) , 于是可能出现一些跨浏览器不兼容的问题。事实上, 在IE的规则中, width和height包含边框部分, 比CSS标准要大一些。所以, 理解CSS最基本的盒式模型, 对于跨浏览器编写代码来说尤为重要。怎样写出各种浏览器都能较好显示的布局文件, 需要长期的经验、技巧的积累。盒式模型并不复杂, 在编写布局文件的过程中, 脑海中需要有一个整体的的把握, 进行整体的控制。

使用CSS盒式模型, 主要关心的是以下几个方面[5]:

块级元素占用多大的空间;

边框以及边距是否会重叠或者覆盖;

盒子的体积;

在一个一面中, 盒子的位置与其他网页元素之间的关系。

3.2“长大人人网”首页布局举例

结合这个Web GIS网页, 简要介绍一下布局的流程:

1) 确定主页面的范围。

在这一步中, 需要设置最外层的“盒子”并作为母容器, 这个范围的大小将决定主页面的范围, 而余下的所有布局操作都在这个范围内进行。至于这个“盒子”宽度设置为多少为宜, 需要考虑页面显示效果、大多数用户的显示器宽度等因素。通常, 我们将宽度设为950～960px[6], 它能很好地展现网页内容。在CSS文件中设置该模块的width属性设置为950～960即可。

2) 将母容器分块。

对于设计师来说, 页面设计方式千变万化, 而万变不离其宗。人们习惯将页面分为三大块:页面顶部、主体部分、页面底部。这三个部分在目容器中自上而下依次排列, 一般不必设置宽度, CSS默认为宽度占满母容器的100%。为了美观, 在与母容器之间留一块空白部分, 也可以设置相应的内边距, 具体是设置该模块在CSS文件中的margin属性, 也可以分别设置margin-top、margin-right、margin-bottom、margin-left。

3) 继续细化布局。

之所以将这一步单独拿出来, 是因为以上步骤都是宏观上的, 页面是否令人耳目一新, 主要就在这里体现。可以选择继续分化容器, 进行更为精细的操控, 只要注意定位方式, 合理选取相对定位、绝对定位、固定定位等定位方式, 即position属性;也可以开始着手具体内容, 例如, 加入要增加文本, 可以设置文本颜色 (color) 、文本方向 (direction) 、文本背景 (background-color) 等。对于WebGIS来说, 我们要考虑将地图放在什么部位可以使用户方便地看到并操作。本页面是主页, 因此要放置其他的一些信息, 为了突出地图的重要性, 将它放在mainTop容器的rightBox里, 不至于太大, 但不妨碍进行一些简单的地图操作, 同时, 其他信息也能很好地显示。

四、需要注意的问题

在本人实际编写布局文件的过程中, 通常使用的开发工具是Dreamweaver CS5, 浏览器是IE浏览器和360安全浏览器。在DW的设计视图中与在浏览器中看到的视图并不是完全一致的, 需要将两者结合来看, 并据此修改CSS布局文件。因此, 学会了一些基本的语法并不意味着掌握了CSS的全部。在前面我强调了经验和技巧的重要性, 这里作一些简要的介绍。

1) 解决不同浏览器下默认样式差异问题

在用CSS文件布局文件为网页布局时, 不同浏览器间显示的差异往往是最常见的。有时候明明在IE浏览器中显示很正确的布局, 到了火狐浏览器中看到的却大不一样。

有人将CSS分为三层结构[7]来组织:base层、common层、page层。其中base层是最底层、重用度最高的, 是整个网站的基石。为了实现不同浏览器下默认样式的统一化, 通常可以从这一层来着手。有人提出对浏览器的默认样式进行重新设置, 也就是CSS Reset。所谓的CSS Reset指的是重新设置浏览器的样式。在各种浏览器中padding、margin、border等的默认值并不一定是0。为了在所有浏览器中都兼容, 会实现将这些属性进行人工设置。如今, 国内外有很多出色的CSS Rest方案, 不过盲目地使用CSS Reset会造成资源比较大的浪费, 对于大型的网站来说, 为了有效节约资源, 根据自身的需要进行CSS重设是十分必要的。

表面上看去, CSS Reset的一些代码显得毫无意义, 然而在设置了之后, 对于很多没有指明的属性, 浏览器会优先采用开发者设置的值, 而不是浏览器默认的, 这样就将浏览器的不兼容性大大降低。

2) 数字或英文字母自动换行问题

当设置了容器的宽度时, 中文换行是顺理成章的事情, 但遇到长串的英文或者数字, 可能就会将容器撑破。当然, 我们可以使用强制换行的HTML标签
和

, 但对于动态网页来说, 要显示的内容具有动态变化性, 在编写网页代码时很难完全预测到。因此, 用自动换行的方法是很有必要的。我们要用到的CSS属性为word-wrap, 并将其值设为break-word。先来看一下效果:

不过这种方法在IE浏览器中起作用, 但在Fire Fox浏览器中仍存在问题。这个时候, 再在该布局文件中加上“overflow:hidden”, 超出的部分会被隐藏。

3) 锚伪类的使用

在CSS中, 通过锚伪类的巧妙使用, 也可以实现比较丰富的文本样式变化。链接的文本可以有四种不同的状态[7], 包括未访问状态 (a:link) 、已访问状态 (a:visited) 、鼠标悬停状态 (a:hover) 、活动状态 (a:active) 。可以根据需要, 设定在某种状态下的文本状态, 如添加下划线、改变背景颜色、改变文本颜色等等。需要特别之处的是四种状态在CSS中注册的顺序并不是随意的, 而应该遵循a:link、a:visited、a:hover、a:active的顺序, 否则将无法产生有效效果。

4) 选择合适的CSS选择符[7]

进行网页设计时, id和class常作为CSS选择符的挂钩。他们之间的不同在于, 一个id只能在一个页面中出现一次, 而class可以出现任意多次。举个例子, 使用id作为某一模块的挂钩, 假如这个模块只在一个地方使用, 与使用class没有太大的差别, 但如果想在该页面的其他地方使用该模块, 问题就来了。所以, 使用id的扩展性相对较差, 虽然也有一些其他方面的优势, 但建议尽量使用class作为挂钩, 只有在必要时才使用id。

五、小结

本文结合实例介绍CSS在WebGIS客户端页面设计中的应用, 详细介绍了CSS的设计思路、“长大人人网”WebGIS主页面的设计步骤及实现效果, 进而分析了在此过程中值得注意的若干问题。将CSS应用于WebGIS页面设计可增强系统界面交互性, 缩短开发周期, 提高代码利用率和可维护性, 是进行WebGIS客户端开发不错的选择。当然, CSS的优点并不局限于此, 在进一步开发过程中还需要多积累经验, 紧跟技术发展潮流, 追踪CSS技术的最新动向, 这样才能设计出更好的Web界面。

摘要：在进行WebGIS开发时, 优化WebGIS客户端页面布局, 追求良好的用户体验尤为重要。本文结合“长大人人网”WebGIS客户端页面设计, 介绍了CSS进行Web页面布局的基本思路, 给出了基于CSS的WebGIS页面设计的主要流程, 并分析了应用CSS的过程中需要注意的若干问题。为增强WebGIS系统界面交互性, 缩短开发周期, 提高代码利用率和可维护性提供解决方案。

关键词：CSS,WebGIS,网页布局

参考文献

[1]李卓, 刘岩恺.基于B/S模式的WebGIS公交换乘算法实现[J].信息系统工程, 2010 (9) .

[2]漆昊晟, 欧阳群.DIV+CSS网页布局技术初探[J].科技广场, 2009 (7) .

[3]lmy19.DIV+CSS的好处和意义[EB/OL].http://wenku.baidu.com/view/50fa9c45b307e87101f696de.html, 2010-06-15.

[4]张晓景, 李晓斌.xHTML+CSS+Dreamweaver CS3标准网站构建实例详解[M].北京:电子工业出版社, 2007.9.

[5]Louis Lazaris.The Principles Of Cross-Browser CSS Coding[EB/OL].http://www.smashingmagazine.com/2010/06/07/the-principles-of-cross-browser-css-coding/, [2010-06-07].

[6]钟丽云.CSS框架技术在WEB开发中的应用[J].信息与电脑, 2010 (6) .

CSS方法篇6

门户网站具有检索迅速、使用方便、成本低廉、实时性强等特点, 作为企业对外宣传的窗口, 为企业经营理念宣传、提高企业知名度起到重要作用。济柴高度重视企业门户网站建设, 早在2000年企业已拥有自建门户网站, 随着企业规模不断扩大, 网站业务需求不断提升, 旧网站平台在页面响应速度、布局灵活性规范性方面难以满足实际要求。2013年济柴门户网站进行了一次全新改版工作, 成功将CSS+DIV布局植入网站后台。本文结合济柴网站改版工作, 就此抛砖引玉, 与国内同行共同讨论CSS+DIV布局在网页样式与布局中的应用。

1 CSS+DIV布局介绍

一般网站页面由“样式 (CSS) 、结构 (HTML) 、行为 (Java Script) ”三方面要素构成。

CSS即为层叠样式表, 用于对已经被结构化的信息进行显示上的控制, 包含版式、颜色、大小等。CSS是用于实现页面样式定义的主要Web标准技术。

HTML即为超级文本标记语言, 是用于描述网页文档的一种标记语言, 也是一种规范, 一种标准, 它通过标签来表示文本及图像等元素, 规定浏览器如何显示这些元素, 规定浏览器如何响应用户行为。

Java Script是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端Web开发的脚本语言, 常用来给HTML网页添加动态功能, 比如响应用户的各种操作。

DIV元素是用来为HTML文档内容提供结构和背景的元素。其中所包含元素的特性由DIV标签的属性来控制, 或者是通过使用样式表格式化这个块来进行控制。DIV元素可作为“Containers (容器) ”控件, 包含一系列相关元素的逻辑容器 (为元素分组) , 排版时可作为图形容器。利用DIV对网页结构进行合理分配, 使页面结构更加趋于清晰、规范。

CSS+DIV是网页布局的一个方法, “CSS+DIV布局技术”准确地说应该是“CSS+XHTML技术”, 网站搭建就与楼房建筑相类似, 如果把一个网页比作一栋楼房, DIV就是楼房的框架结构, 一个个的砖头是一个个的标签元素 (如图片, 文字) , CSS则是水泥和玻璃, 把砖瓦合理的跟框架连接在一起。由于在使用XHTML对网站进行标准化重构时, DIV是使用频率最高的一个原素, 因此人们习惯称之为CSS+DIV布局。

2 CSS+DIV的优势特点

目前, 大多数企业网站都采用了最新流行的CSS+DIV设计思路, 对比以往以Table表格方式布局的网站具有以下优势:

(1) 表现和内容相分离:将设计部分剥离出来放在一个独立样式文件中, 网页HTML文件中只存放文本信息。

(2) 较好的字体控制和排版能力、结构更加清晰。

(3) 精简代码, 提高页面浏览速度:对于同一个页面视觉效果, 采用CSS+DIV重构的页面容量要比TABLE编码的页面文件容量小得多, 前者一般只有后者的1/2大小。

(4) 易于维护和改版:只要简单的修改几个样式文件就可以重新设计整个网站的页面。

(5) 支持各种浏览器, 兼容性好。

3 新、旧版网页设计对比

(1) CSS+DIV作用方法更新, 实现表现和内容相分离。旧版网站的样式文件大多采用行间样式表, 此种方法将CSS样式代码写在HTML页面中。行间样式表的作用范围只能控制一个元素, 如单个表格、文本、文字处理等等, 其权重最大, 是CSS中最基本的书写形式。但此种书写方式较死板、代码复杂、维护不便捷、没有实现表现与内容分离、不能灵活控制多个页面, 若修改元素的样式属性需单个、逐一的进行设置, 造成工作费时费力, 行间样式表基本格式如下:

针对此种情况, 可将样式表由行间位置更换为固定位置, 即内部样式表。内部样式表与行间样式表相似, 都是把CSS代码写在HTML页面中, 不同的是内部样式表将代码统一放在页面

标签中, 实现了将样式表的控制范围扩大到整个页面, 此种方式使代码放置的位置固定, 修改元素属性的时候可进行统一管理, 使代码更清晰, 更易于维护。内部样式表仍不能实现跨页面的控制, 可在样式代码较少、样式作用范围存在与当前页面下进行使用, 格式如下:

新版的网站大多采用的是外部样式表, 它是CSS应用中最好的一中形式, 将CSS样式代码单独放在一个外部文件中, 再由网页进行调用。多个网页可以调用一个样式文件表, 这样能够实现代码的最大限度的重用、网站文件得到最优化配置, 代码书写更规范、清晰、维护更便捷, 只需调整一个属性, 所有页面样式得到统一修改。格式如下:

在style.css文件中的代码为:h1{font-size:12px;color:#000FFF}

我们在

中使用了

标签来调用外部样式表文件。将link指定为stylesheet方式, 并使用了href="style.css"指明样式表文件的路径便可将该页面应用到在style.css中定义的样式。

(2) 规范排版, 强制文字控制, 使文本结构更加清晰。规范文字格式:旧版网站存在段落排版零乱, 字体、字号、行间距不统一, 文字不齐等问题, 使页面的显示效果大打折扣。CSS+DIV布局的引进可以很简单的解决这一问题。通过书写CSS样式表, 统一定义字体、字号、行高、颜色、行间距等, 达到重新规范页面的效果, 例如新版网站企业概况栏目规范编写了CSS样式, 文字样式均采用灰白色宋体12px字体, 行高20PX, 段落两端强制对齐的风格, 使文本格式得到统一规范, 显示效果更加美观。企业概况栏目CSS样式表代码如下:

(3) CSS+DIV替代传统Table模式, 设计结构清晰、代码简洁。旧版网站依照Table表格结构框架进行设计, 页面必须包含

、、

等基本标签, 每个标签里面还要加上诸多属性, 代码语句繁多, 占用页面文件容量较大, 浏览器处理速度缓慢。新版网站采用CSS+DIV的主流结构的页面替代了以往Table架构, 前文提到CSS是存放样式的文件, 而DIV可以看作包含一系列相关元素的逻辑容器, 也可以说是容器页面中的所有元素组成的一个盒子, 占据着一定的页面空间。一个页面由很多这样的盒子组成, 这些盒子之间会互相影响, 以下介绍盒子结构原理。盒子的内部结构属性包括盒子内容 (content) 的存放、边框 (border) 大小、内边距 (padding) 及外边距 (magin) 的尺寸定义等等 (如图1) 。

盒子与盒子之间的相互关系包含行内元素、块级元素以及嵌套盒子之间的距离。

行内元素 (元素在一条直线上, 同一行的元素) 之间的水平距离见图2, 当两个行内元素并排紧邻时, 它们之间的距离为margin-left和margin-right之和。块级元素 (元素各占一行, 是垂直方向的) 之间的竖直距离, 两个块级元素之间的距离不是margin-bottom与margin-top总和, 而是两者中的较大者, 如图3所示, 两个块级元素的垂直距离应为20px。嵌套盒子之间的距离 (元素之间具有嵌套层级关系) 见图4, 两个嵌套盒子上边框的距离为:padding+margin-top。

DIV简洁、时尚的特点加之与CSS样式相结合, 构成了最完美的Box模型 (box) , 作为网站管理员所需关注 (box) 的内部结构以及多个盒子之间的相互关系, 使设计思路更简单、清晰。在编写代码的过程中, Table结构需要对每个元素进行属性配置, Table需切分大量单元格, 表格之间嵌套关系层出不穷, 这些操作无疑大大增加了代码复杂度。经统计, 旧门户网站使用Table架构设计的代码为1400余行, 新版网站页面尽管增加了若干栏目, 但采用CSS+DIV方法编写出的代码数量则大幅度精简, 经统计, 改版后的代码仅为860行, 较前者数量缩短了近1/2。

(4) 合理布局、统一风格, 提升版面整体效果。旧版门户页面主题色调呈淡蓝色, 设置栏目较少, 内容匮乏, 文字介绍过于简洁、布局单一、灵活性差, 整体效果比较简单。新版网站将一改旧格局的版面布局样式, 采用DIV/CSS新技术规划页面, 采用标准“三栏式”页面布局, 版面样式规划见图5。

网站顶部通栏存放页头图片;左栏区域设置为文字介绍区, 以文字描述、图片链接为主;中栏、右栏区域为新闻频道展示区, 分别设置公司动态、通知公告、媒体信息、图片新闻、产品新闻等各类新闻子频道;页面底部通栏区域放置友情链接、网站帮助等信息, 设立下拉列表框, 提供中石油各企事业单位链接地址, 按照区域分类汇总, 方便用户进行查找。页头、页尾、菜单栏选用鲜艳的红色调, 页面背景选用白色为主题样式, 网站子栏目使用统一字体, 标题采用灰白渐近色调标准, 设计实例部分截图见图6。

CSS+DIV架构使布局效果规范、代码清晰易懂, 更加有利于网站管理员的维护操作。只需修改若干样式文件即可实现对整个页面进行设计、修改, 大大减轻了网站维护人员的工作量, 为以后的设计、改版工作打下了良好基础。

(5) CSS+DIV布局兼容性更强。可兼容IE6以上版本、火狐、遨游等各类浏览器, 网站实现跨平台性, 用户打开浏览器窗口即可正常查看网页内容。

针对不同的浏览器需要有不同的CSS代码写法, IE6能识别下划线“_”和星号“*”, 但不能识别下划线“_”。例如:定义某元素的背景属性以适应不同的浏览器版本:

4 CSS+DIV在企业网站中的应用

(1) 新闻列表实例。将页面内容分成不同的逻辑部分 (为元素分组) , 用DIV分别定义标题栏、列表栏区域的内容, 通过CSS样式定义属性信息, 以内网网站总厂动态栏目为例见图7所示。

(2) 二栏结构应用效果。二级页面采用两栏结构, 顶部采用宽屏横幅图片, 展现企业形象;下方左侧为树状导航栏, 列出当前站点同级目录及下级站点名称, 方便用户浏览站点的目录导航;右侧为网页内容信息, 介绍当前站点的页面信息。网站框架结构规范合理、字体统一、内容清晰, 效果如图8所示。

(3) 文字链接样式的控制。如图9所示, 树状列表中链接属性“a”是内联元素 (内联元素与块级元素相对, 没有固定形状, 默认没有宽、高尺寸, 只容纳文本信息) , 我们将其模块化, 通过CSS样式实现文字背景、文字尺寸、文字颜色及鼠标动作后的效果变化。

5 总结

CSS的常用技巧浅析篇7

关键词：CSS,DIV,技巧,排版

随着网页制作技术的发展, CSS越来越被广大技术人员运用。CSS就是Cascading Style Sheets, 中文翻译为“层叠样式表”, 简称样式表。它是一种制作网页的常用技术, 能将网页格式控制和内容结构控制分割开来, 减少网页代码, 从而提高网页传输速度, 提高网页的维护更新效率, 实现丰富的网页效果。利用CSS可以使制作出来的网页易于改版, 也有利于网页标准化。本文主要介绍在CSS应用中应该注意的一些技巧和兼容方案。

1、就近优先原则

CSS语法中一个很重要的原则就是就近优先原则, 如果对同一个元素的定义有多种, 以最接近的定义为最优先, 例如有这么一段代码:

这两个定义中, class="update"将被使用, 文字会显示红色, 因为class比p更近。

2、同时使用两个以上的class属性值

通常情况下, 我们只为属性指定一个class, 但这并不等于我们只能指定一个, 实际上, 我们想指定多少就可以指定多少。

例如:<div class="first second">CSS技巧</div>

这样我们的段落标识符就可以同时应用first和second这两个class制定的规则, 如果这两者中有任何规则重叠, 那么按照就近优先原则, 后一个将获得实际的优先应用。要注意的是这两个class使用空格而不是逗号分割。

3、缩写的技巧

使用缩写可以帮助减少我们CSS文件的大小, 提高网页的访问速度, 更加容易阅读。css缩写的主要规则如下:

3.1 颜色

16进制的色彩值, 如果每两位的值相同, 可以缩写一半, 例如:

3.2 盒子尺寸

通常有下面四种书写方法:

property:value1;表示所有边都是一个值value1;

property:value1 value2;表示top和bottom的值是value1, right和left的值是value2

property:value1 value2 value3;表示top的值是value1, right和left的值是value2, bottom的值是value3

property:value1 value2 value3 value4;

四个值依次表示top, right, bottom, left

方便的记忆方法是顺时针, 上右下左。具体应用在margin的例子如下:

margin:1em;表示所有的边都是1em;

margin:1em 2em;表示margin-top和margin-bottom的值是1em, marginright和margin-left的值是2em;

margin:1em 2em 3em;表示margintop的值是1em, margin-right和marginleft的值是2em, margin-bottom的值是3em;

margin:1em 2em 3em 4em;表示margin-top的值是1em, margin-right的值是2em, margin-bottom的值是3em, margin-left的值是4em

3.3 边框 (border)

边框的属性如下:

border-width:1px;

border-style:solid;

border-color:#000;

可以缩写为一句:border:1px solid#000;

语法是border:width style color;

4、通过css实现图片替换文字

通常状况下, 我们使用标准的html而不是图片来显示文字, 因为文字除了加快下载还可以获得更好的可用性。但是如果我们决心使用访问者的机器中可能没有的字体时, 我们只能选择图片。

举例来说, 如果想在每一页的顶部使用“Hello Word”的标题, 但同时又希望这是能被搜索引擎发现的, 为了美观我们使用了少见的字体那么我们就得用图片来显示了:

这样当然没错, 但是有证据显示搜索引擎对真实文本的重视远超过a l t文本, 因为已经有太多网站使用alt文本充当关键字。

因此, 我们可以采用另一种方法:<h1><span>Hello Word</span></h1>, 那漂亮字体怎么办呢?下面的css帮我们解决问题:

现在既用上了漂亮的图片又很好的隐藏了真实文本——借助css, 文本被定位于屏幕左侧-2000像素处, 而显示在访问者面前的是图片的背景, 这样访问者和搜索引擎都可以兼顾到了。

5、css中边框 (border) 的默认值

当编写一条边框的规则时, 我们通常会指定边框的宽度、样式和颜色 (任何顺序均可) 。

例如:border:3px solid#000;

这代表3个像素宽的黑色实线边框。而在默认状态下, 边框的宽度为中等 (相当于3个像素) , 边框的颜色为边框里文字的颜色, 所以这个例子中唯一需要指定的值只是边框的样式。假如我们指定样式为实线 (s o l i d) , 那么其余的值将使用默认值, 如果这正是我们想要的效果, 我们完全可以不在css里指定。

上面的代码可以简化为:b o r d e r:solid;

6、!important会被IE6忽略

在css中, 通常最后指定的规则会获得优先权。然而对除了IE6以外的浏览器来说, 任何后面标有!important的语句将获得绝对的优先权。

例如:margin-top:3.5em!important;

margin-top:2em;

除IE6以外所有浏览器中的顶部边界都是3.5em, 而IE为2em, 因为IE6并不支持!important规范, 我们就可以按照这个规则来满足IE6的设计需要, 什么时候发现IE6和其他浏览器显示效果不同, 那么就设置两个, 在上面的一个加入!important标记, 而下面的一句则不需要添加, 这样IE6就按照下面的来执行了。

7、css盒模型hack的另一选择

css盒模型hack被用来解决IE6之前的浏览器显示问题, IE6.0之前的版本会把某元素的边框值和填充值包含在宽度之内 (而不是加在宽度值上) 。例如, 我们可能会使用以下css来指定某个容器的尺寸:

盒的总宽度在几乎所有浏览器中为150像素 (100像素宽度+两条5像素的边框+两个20像素的填充) , 唯独在IE6之前版本的浏览器中仍然为100像素 (边框值和填充值包含在宽度值中) , 盒模型的hack正是为了解决这一问题, 但是也会带来麻烦。更简单的办法如下:

这样一来在任何浏览器中盒的总宽度都将是150像素。

8、将块元素居中

假设我们的网站使用了固定宽度的布局, 所有的内容置于屏幕中央, 可以使用以下的css:

我们可以把html的body之内任何项目置于中, 该项目将自动获得相等的左右边界值从而保证了居中显示。不过, 这在IE6之前版本的浏览器中仍然有问题, 将不会居中, 因此必须修改如下:

对body的设定将导致主体内容居中, 但是连所有的文字也居中了, 这不是想要的效果, 为此#content的div还要指定一个值:text-align:left, 这样, 所有在body中的内容就会居中显示, 而content中的内容就会左对齐显示。

9、使用css实现垂直居中

垂直居中对表格来说是小菜一碟, 只需指定单元格为vertical-align:middle即可, 但这在css布局中不管用。假设我们将一个导航菜单的高度设为2em, 然后在css中指定垂直对齐的规则, 文字还是会被排到盒的顶部, 根本没有什么区别。

要解决这一问题, 只需将盒的行高设为与盒的高度相同即可, 以这个例子来说, 盒高2em, 那么只需在css中再加入一条:line-height:2em就可实现垂直居中了!

1 0、取消class和id前的元素限定

当我们写给一个元素定义class或者id, 我们可以省略前面的元素限定, 因为id在一个页面里是唯一的, class可以在页面中多次使用。我们限定某个元素毫无意义。例如:

可以写成

这样可以节省一些字节, 减少了代码量。

11、组选择器

当一些元素类型、class或者id都有共同的一些属性, 我们就可以使用组选择器来避免多次的重复定义, 这可以节省不少字节, 注意在组选择器中选择器之间用逗号分开。

例如:定义所有标题的字体、颜色和margin, 我们可以这样写:

如果在使用时, 有个别元素需要定义独立样式, 我们可以再加上新的定义, 可以覆盖老的定义, 例如:

12、用正确的顺序指定链接的样式

我们经常用到链接样式的设置:

:link:对象在未被访问前的样式。

:visited对象在其链接地址已被访问过时的样式。

:hover设置对象在其鼠标悬停时的样式。

:active设置对象在被用户激活 (在鼠标点击与释放之间发生的事件) 时的样式。

当我们用CSS来定义链接的多个状态样式时, 要注意它们书写的顺序, 正确的顺序是:

怎么记住他们的顺序呢, 我们抽取第一个字母是"LVHA", 我们可以记忆成“lovehate” (喜欢讨厌) , 这样就容易记忆了。

本文介绍了CSS在应用中的一些技巧方法, 但是随着网页制作技术的不断进步, 一定会有更多的技巧方法出现, 希望大家在学习的过程中把自己的经验总结起来, 供大家交流。

参考文献

[1]倪浩, 刘芳华.CSS在DIV网页排版中的实用技巧.电脑学习.2007.12

[2]郑俊生, 姜敏.使用DIV+CSS进行网页设计应用研究

[3]吴青林, 王焱.CSS样式表在网页制作中的运用.郧阳师范高等专科学校学报2008.6

如何用CSS定位块元素篇8

1 需求分析

我们在网页中插入一个div块元素, 如在使用loading状态条的时候, 或者显示在线用户数的时候, 我们需要的是将div显示在网页的中间, 顶端或者左下端, 并且无论滚动条如何拉动, 这个div将始终保持在相同的相对位置, 这就涉及到定位块元素的问题。

2 解决方案

我们一般通过position定位来定位块元素的解决方案。通过css是很可以容易实现的, 只需要用到position:fixed这个描述参数即可。用position来定位有fixed和absolute两种描述语言。这里我们首先讲一讲fixed和absolute的区别, fixed表示始终处于同屏幕的一个位置, 即使你拉动滚动条, 依然会显示在屏幕的相对位置, 而absolute则不一样, absolute针对网页的位置进行描述, 所以拉动滚动条后有可能会将显示在中部的div拉动到顶端去, 以下我们分三种情况来解决我们的块元素定位问题。

1) 方法一

我们以把div定位屏幕的中央为, 在CSS样式表中编辑控制DIV块元素的LoadingStatus样式进行定义:

以上方法在firefox浏览器中浏览没有任何问题, 但是在IE中是不适用的。

2) 方法二

这种方法解决了在IE中的兼容的问题, 又能够解决将div固定在屏幕的具体位置,

缺点:在拉动滚动条的时候, 针对IE的那段css中的表达式停止了, 仅仅是载入页面的时候进行了计算, 后面就工作了。

3) 方法三

这种方法是通过将表达式的值赋给一变量, 针对IE的那段css中的表达式就不断的运行, 这种方法虽然复杂些, 代码段长些, 但是适合于各种不同的浏览器。

3 结论

以上我们通过三种方法总结了通过CSS层叠样式表来在各种不同浏览器之间定位块元素的各种方法的优缺点, 其中第三种方法通过将表达式赋变量值加长代码的方法来解决各种浏览器的兼容性问题是最为完善的方法。

参考文献

[1]David Sawyer McFarland.CSS实战手册[M].俞黎敏, 译.3版.北京:电子工业出版社, 2006.

运用DIV+CSS设计网站布局篇9

关键词：DIV+CSS,选择器,盒子模型

DIV用于搭建网站结构、CSS用于创建网站表现, 实质即使用XHTML对网站进行标准化重构, 使用CSS将表现与内容分离, 便于网站维护, 简化html页面代码, 可以获得一个较优秀的网站结构, 便于日后维护、协同工作和搜索引擎蜘蛛抓取。

仔细分析和规划页面结构, 得到类似这样的几块:

标志和站点名称

主页面内容

站点导航

子菜单

搜索框

功能区 (例如购物车、收银台)

页脚 (版权和有关法律声明)

我们通常采用DIV元素来将这些结构定义出来, 类似这样:

这是一个对内容块的语义说明。DIV容器中, 可以包含任何内容块, 也可以嵌套另一个DIV。内容块可以包含任意的HTML元素:标题、段落、图片、表格等等。每一个内容块都可以放在页面上的任何地方, 再指定这个块颜色、字体、边框、背景以及对齐属性等等。

ID的名称是控制某一内容块的手段, 通过给这个内容块套上DIV, 并加上唯一的ID, 就可以用CSS选择器精确定义每一个页面元素的外观。

CSS是CascadingStyleSheets (层叠样式表) 的缩写。是对web文档添加样式的简单机制, 属于表现层的布局语言。

CSS中有三大类型选择器:基本选择器、复合选择器、特殊选择器。基本选择器又包括标签选择器、id选择器、类选择器。

一个HTML页面可以由很多不同的标签组成, CSS标签选择器可以声明哪些标签采用哪种CSS样式。因此说, 每一种HTML标签的名称可以作为相应的标签选择器的名称。

每一个CSS选择器均包含选择器本身、属性和值, 其中属性和值可以设置多个, 以实现对同一个标签声明多种样式风格。CSS语言对所有属性和值都有严格的要求, 如果声明的属性在CSS规范中没有, 或某个属性的值不符合该属性的要求, 均不能使该CSS语句起作用。若标签选择器一旦声明, 那么页面中所有相应标签都会产生变化。

类选择器的名称可以由用户自定义, 属性和值都跟标签选择器一样, 必须符合CSS规范。

ID选择器的使用方法跟class选择器基本相同, 不同的地方在于ID选择器只能在html页面中使用一次, 所以其针对性更强。html的标签中只需利用ID属性, 就可以直接调用CSS中的ID选择器。

复合选择器是3种基本的选择器通过组合, 产生更多种类的选择器, 实现更强、更方便的选择功能, 它包括交集选择器、并集选择器和后代选择器。

CSS盒子模型是CSS控制页面时一个很重要的概念, 只有很好的掌握了盒子模型及其中每个元素的用法, 才能控制好页面中的各个元素。每个页面中的元素都可以看成是盒子, 它们占据着一定的页面空间, 这些被占据的空间往往要比单纯的内容大。可以通过调整盒子的边框和距离等参数, 调节盒子的位置和大小。

一个页面由很多盒子组成, 盒子之间会相互影响, 因此掌握盒子模型需要从两方面来理解。一是要理解一个孤立的盒子的内部结构;二是要理解多个盒子之间的相互关系。

先来看一个例子, 理解盒子的概念。假设, 在墙上整齐地排列着4幅画。对于每幅画, 都有一个边框, 英文是border, 每个画框中, 画和边框通常都会有一定距离, 这个距离称为内边距, 英文是padding, 各幅画之间通常也会有一定距离, 他们之间的距离称为外边距, 英文是margin。这些对象实际上就是一个border-padding-margin的模型。这些矩形对象可以统称为盒子, 英文是box。了解了盒子之后, 还需要理解模型这个概念。

模型就是对某种事物的本质特性的抽象。模型的种类很多, 网页布局中, 为了使纷繁复杂的各个部分合理地组织, 专家对它的本质进行研究后, 总结了一套完整的、行之有效的原则和规范。这就是盒子模型的由来。

在CSS中, 一个独立的盒子模型由content (内容) , border (边框) , padding (内边距) 和margin (外边距) 4个部分组成。一个盒子实际所占有的宽度或高度是由content+padding+border+margin组成。在CSS中, 通过设width和height的值控制内容所占矩形大小, 并且对于任何一个盒子, 都可以分别设定4个border、content、padding和margin。因此只要利用好这些属性就能够实现各种各样的排版效果。

盒子并不仅仅是用DIV定义的, 事实上, 所有的网页元素本质上都是以盒子的形式存在。网页上的各种内容, 在人的肉眼看来是文本、图像等, 在浏览器看来, 就是由许多盒子排列在一起或者相互嵌套。

在一个网页中有着大量的盒子, 他们以各种关系相互影响。为了能够方便的组织盒子有序的排列和布局, CSS规范的制定者进行了深入细致的思考, 使得这种方式既有足够的灵活性, 以适应各种排版要求, 又可能使规则尽可能简单, 让浏览器的开发者和网页设计师都能够相对容易地实现。若干种对盒子进行布局的方法, 包括浮动属性和定位属性等。

在标准流中, 每一个块级元素都是从一个新行开始显示, 而且其后的元素也需另起一行进行显示。当需要横向排列的时候, 将会用到FLOAT这个属性, FLOAT属性的作用就是改变块级元素对象的默认显示方式。如果将FLOAT属性的值设为left或right, 元素就会左侧或右侧靠紧, 同时默认情况下, 盒子的宽度不再伸展, 而是收缩, 根据盒子内容的宽度来确定。

【CSS方法】推荐阅读：

初二地理的学习方法,初二地理的记忆方法08-28

学习方法有哪些有效的学习方法介绍07-14

瘦腰的最快方法最瘦腰的4个日常方法06-12

初中语文学习方法与建议,初中语文学习方法07-01

>> 查看更多相关文档