CSS常见布局样式
较为常见的CSS布局样式主要是有两种:一是两列布局样式;二是三列布局样式;其中三列布局样式又分为“两列定宽、中间列自适应”的三列结构和三列自适应结构。
1、两列布局样式
许多网站都有一些共同的特点,即页面顶部放置一个大的导航或广告条,右侧是链接或图片,左侧放置主要内容,页面底部放置版权信息等。
在一般情况下,此类页面布局的两列都有固定的宽度,而且从内容上很容易区分主要内容区域和侧边栏。页面布局在整体上分为上、中、下三个部分,即header区域、container区域和footer区域。
其中的container又包含mainbox(主要内容区域)和sidebox(侧边栏)。
2、三列布局样式
三列布局在网页设计时更为常用。对于这种类型的布局,浏览者的注意力最容易集中在中栏的信息区域,其次才是左、右两侧的信息。
三列布局与两列布局非常相似,在处理方式上可以利用两列布局结构的方式处理。三列布局仅比两列布局多了一列内容,无论形式上怎么变化,最终还是基于两列布局结构演变出来的。
(1)“两列定宽、中间列自适应”的三列结构。
设计人员可以利用负边距原理实现“两列定宽、中间列自适应”的三列结构。
这里负边距值指的是将某个元素的margin属性值设置成负值,对于使用负边距的元素可以将其他容器“吸引”到身边,从而解决页面布局的问题。
(2)三列自适应结构。
实现三列自适应结构,要从改变列的宽度入手。首先,要将submainbox和sidebox两列的宽度设置为自适应;其次,要调整左、右两列有关负边距的属性值;最后,要对内容区域content容器的外边距margin值加以修改。
什么是CSS
网页中常用的CSS是指层叠样式表(Cascading Style
Sheets),是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言,其主要是用于控制显示HTML元素。
一、什么是CSS
CSS指层叠样式表(Cascading Style Sheets),是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
它是一项“崭新”的“老技术”,早在1996年,它就用于对HTML页面和部分元素进行控制,而直到近年,CSS才被全面用于控制显示HTML元素。
外部样式表通常存储在CSS文件中,通过链接或导入外部样式表等方法,把样式添加到HTML中,解决了内容与表现分离的问题,极大提高了工作效率。
二、CSS布局的优点
(1)使页面载入得更快:由于将大部分页面代码写在了CSS当中,使得页面体积容量变得更小。而不像表格嵌套那样将整个页面圈在一个大表格里,使得加载速度很慢。
(2)降低流量费用:页面体积变小,浏览速度变快,这就使得对于某些控制主机流量的网站来说是最大的优势了。
(3)修改设计时更有效率:由于使用了DIV+CSS制作方法,在修改页面更加省时。根据区域内容标记,到CSS里找到相应的ID,使得修改页面时更加方便,也不会破坏页面其他部分的布局样式。
(4)页面布局灵活:DIV+CSS使得页面布局方便操作灵活,改版时只需改CSS样式即可实现页面重新布局,而不用改动程序,从而降低了网站改版的成本。页面效果丰富,包括视觉效果和用户体验,比如拖拉。
三、网页使用css样式的4种方式
链接外部样式文件:这种方式将样式文件彻底与HTML文档分离,祥式文件需要额外引入。在这种方式下,一批样式可控制多份文档。
导入外部样式文件:这种方式与上一种方式类似,只是使用@import来引入外部样式单。
使用内部样式定义:这种方式是通过在HTML文档头定义样式单部分来实现的。在这种方式下,每批CSS样式只控制一份文档。
使用内联样式:这种方式将样式内联定义到具体的HTML元素,通常用于精确控制一个HTML元素的表现。在这种方式下,每份CSS样式只控制单个HTML元素。