论文部分内容阅读
[摘 要]本文通过对比传统表格布局网页和DIV+CSS布局网頁的两种方法,分析了两者的优缺点,同时详细介绍了四种CSS样式表,并总结了在使用DIV+CSS布局网页中使用到的一些常用技巧和注意事项。
[关键字]网页布局 DIV+CSS 选择器 属性 样式表
中图分类号:G622.4 文献标识码:A 文章编号:1009-914X(2018)46-0357-01
1 前言
纵观过去十年,网页主要由页眉、页脚、边栏和正文组成。这种传统风格的网页符合中国人的审美标准和阅读习惯,一直沿用至今。然而随着社会文化多元化发展,网页的排版布局也在千变万化,没有一个固定的模式。面对越来越复杂的网页排版,对于网页布局技术也提出了更高的要求。
2 TABLE和DIV+CSS布局技术
传统的网页结构简单,内容相对较少,通常使用TABLE布局定位,这也是网页初学者惯用的网页布局技术。使用TABLE布局网页具有搭建速度快、容易控制的特点。而且可以控制不同对象,不用担心各个版块之间相互影响的问题。TABLE布局网页这种技术目前依然没有被淘汰,例如在办公自动化杂志的网页制作中,我们都还能看到它的身影。但是如果在网页中使用过多的表格,网页的加载速度就会大打折扣,这和如今的快节奏生活格格不入,甚至没有人有足够耐心等待20秒浏览一个网页,人们对于网页的加载速度提出了更加苛刻的要求。同时我们又发现,如果对网页重新进行修改和扩展时,TABLE也不是一个好的选择。DIV+CSS的布局方式符合W3C标准,代码结构清晰明了,内容和表现分离,带来足够好的可维护性,布局精准,网站版面布局修改简单,最重要的是加快了页面的加载速度,同时节约站点所占的空间和站点的流量,用只包含结构化内容的HTML代替嵌套的标签,提高搜索引擎对网页的搜索效率。[1]
使用DIV+CSS布局网页是将内容与表现相分离,内容部分指的是在网页中看到的文字、图片、媒体等对象,表现就是上述对象所呈现出来的效果。其实就是用DIV的盒子模型把网页的各部分进行分割,划分成不同的区块,然后利用CSS样式来精准定义这个盒子模型的位置、大小等属性,最后把网页上的对象加入到一个个的盒子中,形成一个完整的网页。
3 CSS样式分类
CSS样式分为四种:行内样式、内部样式、外部样式和导入样式。[2]
(1)行内样式-就是直接在html标签内写样式代码。例如:
行内样式只对它所写入的标签起作用。
(2)内部样式-写在标签中的内,例如:
内部样式对它所在的当前网页有效,对网站中的其它网页不起作用。
(3)外部样式-是把样式代码专门写在一个扩展名为.css的文件中,代码书写格式和内部样式书写格式一样,在网页源码中用link方式连接。例如:
在style1.css样式表文件中写入H1{color:blue;font-size:30px;text-align:center;}
在index.html文件的中写入
用外部样式表的好处在于,把样式代码写在一个css文件中,网站中的哪个网页需要引用该样式表,就在网页中用Link调用即可,这样就做到了代码复用,避免重复书写相同代码。
(4)导入样式-是用@import url连接外部样式表文件,它一般写在另一个样式表文件内部。例如:@import url(“style1.css”);
用导入样式表同样能使代码复用,提高工作效率。
4 DIV+CSS使用技巧和注意事项
(1)文字水平居中和垂直居中对齐
使用text-align属性,将值设置为center,可以将文字相对于它所在的div水平居中对其;使用height属性设置div高度,在使用line-height属性将行高设置成相同高度,即可将div中的文字垂直方向居中显示。[3]代码如下:
(3)关于容器的高度问题
如果是在容器中动态地添加内容,最好不要定义高度,随着内容的增加,容器垂直方向上可以自动加高;如果容器中内容的高度是固定的,那么容器的高度最好也事先定义好,其中的内容高度不要超出容器。
综上所述,盒子模型是CSS控制网页布局的核心内容,只有深入理解了内容、边框、填充、间距、浮动等属性的含义,并能够灵活地运用它们,继而在实际工作中多加练习,不断总结经验,才能不断提高网页制作的水平。
参考文献:
[1]汤文飞 Dreamweaver CS4网站设计实例教程 机械工业出版社 2010
[2]丁海燕 网页设计布局方法的探讨 云南大学学报(自然科学版)2013
[3]温谦 CSS设计彻底研究 人民邮电出版社 2009
[关键字]网页布局 DIV+CSS 选择器 属性 样式表
中图分类号:G622.4 文献标识码:A 文章编号:1009-914X(2018)46-0357-01
1 前言
纵观过去十年,网页主要由页眉、页脚、边栏和正文组成。这种传统风格的网页符合中国人的审美标准和阅读习惯,一直沿用至今。然而随着社会文化多元化发展,网页的排版布局也在千变万化,没有一个固定的模式。面对越来越复杂的网页排版,对于网页布局技术也提出了更高的要求。
2 TABLE和DIV+CSS布局技术
传统的网页结构简单,内容相对较少,通常使用TABLE布局定位,这也是网页初学者惯用的网页布局技术。使用TABLE布局网页具有搭建速度快、容易控制的特点。而且可以控制不同对象,不用担心各个版块之间相互影响的问题。TABLE布局网页这种技术目前依然没有被淘汰,例如在办公自动化杂志的网页制作中,我们都还能看到它的身影。但是如果在网页中使用过多的表格,网页的加载速度就会大打折扣,这和如今的快节奏生活格格不入,甚至没有人有足够耐心等待20秒浏览一个网页,人们对于网页的加载速度提出了更加苛刻的要求。同时我们又发现,如果对网页重新进行修改和扩展时,TABLE也不是一个好的选择。DIV+CSS的布局方式符合W3C标准,代码结构清晰明了,内容和表现分离,带来足够好的可维护性,布局精准,网站版面布局修改简单,最重要的是加快了页面的加载速度,同时节约站点所占的空间和站点的流量,用只包含结构化内容的HTML代替嵌套的标签,提高搜索引擎对网页的搜索效率。[1]
使用DIV+CSS布局网页是将内容与表现相分离,内容部分指的是在网页中看到的文字、图片、媒体等对象,表现就是上述对象所呈现出来的效果。其实就是用DIV的盒子模型把网页的各部分进行分割,划分成不同的区块,然后利用CSS样式来精准定义这个盒子模型的位置、大小等属性,最后把网页上的对象加入到一个个的盒子中,形成一个完整的网页。
3 CSS样式分类
CSS样式分为四种:行内样式、内部样式、外部样式和导入样式。[2]
(1)行内样式-就是直接在html标签内写样式代码。例如:
一级标题
行内样式只对它所写入的标签起作用。
(2)内部样式-写在标签中的内,例如:
内部样式对它所在的当前网页有效,对网站中的其它网页不起作用。
(3)外部样式-是把样式代码专门写在一个扩展名为.css的文件中,代码书写格式和内部样式书写格式一样,在网页源码中用link方式连接。例如:
在style1.css样式表文件中写入H1{color:blue;font-size:30px;text-align:center;}
在index.html文件的中写入
用外部样式表的好处在于,把样式代码写在一个css文件中,网站中的哪个网页需要引用该样式表,就在网页中用Link调用即可,这样就做到了代码复用,避免重复书写相同代码。
(4)导入样式-是用@import url连接外部样式表文件,它一般写在另一个样式表文件内部。例如:@import url(“style1.css”);
用导入样式表同样能使代码复用,提高工作效率。
4 DIV+CSS使用技巧和注意事项
(1)文字水平居中和垂直居中对齐
使用text-align属性,将值设置为center,可以将文字相对于它所在的div水平居中对其;使用height属性设置div高度,在使用line-height属性将行高设置成相同高度,即可将div中的文字垂直方向居中显示。[3]代码如下:
(3)关于容器的高度问题
如果是在容器中动态地添加内容,最好不要定义高度,随着内容的增加,容器垂直方向上可以自动加高;如果容器中内容的高度是固定的,那么容器的高度最好也事先定义好,其中的内容高度不要超出容器。
综上所述,盒子模型是CSS控制网页布局的核心内容,只有深入理解了内容、边框、填充、间距、浮动等属性的含义,并能够灵活地运用它们,继而在实际工作中多加练习,不断总结经验,才能不断提高网页制作的水平。
参考文献:
[1]汤文飞 Dreamweaver CS4网站设计实例教程 机械工业出版社 2010
[2]丁海燕 网页设计布局方法的探讨 云南大学学报(自然科学版)2013
[3]温谦 CSS设计彻底研究 人民邮电出版社 2009