没有合适的资源?快使用搜索试试~ 我知道了~
CSS商业网站布局之道
需积分: 9 7 下载量 49 浏览量
2011-08-21
12:04:09
上传
评论
收藏 1.56MB DOC 举报
温馨提示
试读
64页
本书是一本CSS技术专著,主要从布局这个角度全面、系统和深入地讲解CSS在标准网站布局之中的应用。很多读者经过初步的学习之后就能够使用CSS设计出一些漂亮的网页样式,于是便乐在其中,踌躇满志,这是好事,但千万不要自我陶醉,因为你还未领略CSS的博大精深。用CSS容易,难的是全部都用CSS。CSS的精髓是布局,而不是样式,布局是需要缜密的逻辑思维和系统设计的,而样式只需要简单地编写代码或复制即可。本书正是基于这样的现实,系统地探索了CSS在布局中的各种技术应用,主要包括盒模型技术、布局模型技术、定位技术、浏览器兼容技术,以及编码规范等,同时结合5个综合实例切实帮助读者找到实战开发的体验和智慧。除此之外,还就CSS开发中的一些技术难点和重点展开了详细的介绍,例如表格、表单、图像、超链接、导航菜单、滑动门、圆角、阴影、换肤、Tab技术等等。
资源推荐
资源详情
资源评论
在多年的表格布局与标准布局之争后,以 为标准的布局不断得到多数设计师
的认可。标准布局的优势不言而喻,但我们依然能够在网上看见不同的声音和非议
被误解是可以理解的,想到初学者要驾驭个性各异的浏览器,同时在冰冷的
代码环境中,需要极高的热情和极大的想象力来编写这些如同账目似的样式代码,确实存
在不小的难度。
但不可否认,时下 布局技术的快速普及,每位设计师都可以用 或半 技术进
行网页布局。网页设计师常常套用现成的 布局代码,而对其内在的原理却是一知半解
或囫囵吞枣,所实现的 布局犹如一个不透明的黑盒子,虽然也能够实现预期效果,但
最终阻碍了设计师对 本质的探究和认识。
关于 CSS 布局
很多设计师对于 的认识和实践仅停留在技巧层面上,对于 布局的核心是什么,实
现 结构的逻辑体系是什么,如此深奥的理论好像只有系统开发师才去思考,读者
还需要认真思考与理解吗?
实际上要想驾驭 网页布局技术,这些问题应该想一想,抽象的理论对于思路的梳理具
有重要作用,甚至能够引导你勇闯智慧的迷宫。
所有 布局技术都应建立在这 个最基本的概念之上:盒模型、流动、浮动和定位。千
变万化的技巧应用其实都是这些基本概念在舞动,而且如果理解了核心概念的真谛,那么
创建 布局实际上就是按图索骥了。
从网友的求帖说起
一天在网上看到这样一个求救帖子:
哪位高手能指点下或给小弟一点 中的布局、定位的心得??
一 开 始 做 的 时 候 , 我 把 所 有 的 都 用 属 性 定 位 起 来 布 局 , 就 连
、、 这样的部分也是,(这样做合理吗?)可是后来发现 中使用
很多时会很烦琐,所以后来就很少用到一些定位的属性,只是需要的时候才用,可是
问题又来了。有时候用到 的时候,明明加了 了还是显示不对……,现在都对定
位迷糊了……
浏览下面的跟帖,热心人还真不少,但真正能够点到要害的很少,甚至没有。网友们多从
头疼医头、脚痛治脚的方法给予答复,有些也能够止痛,但不能根治。在论坛中,我们会
经常看到这样的帖子。有些网友主观上是热情、乐于助人的,但客观上由于自己的认识偏
颇,使很多以讹传讹的观点、信息在网上飞速传播,着实令人担忧。因为初学者是没有免
疫力的,只要觉得有点止痛,就一概吸收,结果阻碍了对真正滋补营养的汲取。
例如,下面列出两则上面问题的跟帖。
跟帖一:
根据你的页面内容的逻辑关系来结构化你的 代码,定位不是必须的,通常情况下只有
个别元素需要特别的定位方式。
问题:空洞说理,没有正面提出解决问题的方法,等于没有说。
跟帖二:
呵呵, 是指把容器当作流来看待了,如果一行可以同时显示多个 ,那么后面的
就会贴上去。占用前面那一个 未占据的空间了。
默认的情况下是 !"# 显示为块,它会占据一行内所有可以占用的空间。如果定
义了高度就占用制定高度的空间了。
就是用来清除左边或右边的流的了。
至于布局就老老实实用 $$$%$$这样划分一个布局出来就是了。不要想这么多,呵呵,把
问题简化。
问题:把 看作流是对 布局的误解。流是什么?流是网页文档自然流动而衍生出来
的一种布局模式, 虽然也可以流动,但它的本质是浮动,浮动犹如空中漂浮的白云,
而流动更像地面上依势而下的流水,不能简单地把流动与浮动混淆起来,否则布局非出问
题不可。
&
关于盒模型补充
在深入学习 布局之前,读者必须透彻理解什么是盒模型。关于盒模型基础,我们在第
章中曾做过专题研究,依然比较模糊的读者可以返回再阅读一下。下面就几个容易模糊
或误解的地方再强调一下。
总是透明的, 也是透明的,但 受背景影响,能
够显示背景色或背景图像,所以部分初学者会误认为补白不透明。
不透明,这是因为实线边框的遮盖。当你定义虚线或点线边框时,
在部分浏览器中可以看到被边框遮盖的背景。盒模型背景可以深入到
和 区域,但部分浏览器不支持 区域背景显示,如
和 浏览器。
可以定义负值,但 和 不支持负值。
、 和 都是可选的,它们默认值为 。我们可以单
独定义一边或统一定义盒子四边的属性值。
如果需要,每一条可见边框都可以定义不同的宽度,但前提是要定义
属性为可见样式。
每一个盒子所占页面区域的宽度和高度等于 外沿的宽度和高度。盒
子的大小并不总是内容区域的大小。
浏览器窗口是所有元素的根元素,也就是说 是最大的盒子,也有浏
览器把 看作最大的盒子。
'
盒模型的类型
把盒模型分为两种基本形态:(块状)和 (内联,也有翻译
为“行内”)。在默认状态下,块状元素的宽度为 %,而且后面隐藏附带有
换行符,使块状元素始终占据一行。符合标准的常用块状元素如下表:
块状元素 说ÉÉÉ明
表示特定信息,如地址、签名、作者、文档信息。一般显示为斜体
效果
#()
表示文本中的一段引用语。一般为缩进显示
表示通用包含块,没有明确的语义
表示定义列表
表示字段集,显示为一个方框,用来包含文本和其他元素
说明所包含的控件是某个表单的组成部分
表示标题,其中 表示一级标题,字号最大, 表示最小级别标
题,字号最小
画一条横线
包含对于那些不支持* 元素的浏览器使用的
指定在不支持脚本的浏览器中显示的
编制有序列表
表示一个段落
以固定宽度字体显示文本,保留代码中的空格和回车
表示所含内容组织成含有行和列的表格形式
)
表示不排序的项目列表
表示列表中的一个项目
+
在 * 元素绘制的方框内插入一个标题
内联元素没有高度和宽度,因此也就没有固定的形状,定义它的 和
属性无效。内联元素可以在行内自由流动,但它会遵循盒模型基本规则,
如可以定义边界、补白和边框,可以定义背景。它的最小内容单元也会呈现矩
形形状,但它显示的高度和宽度只能根据所包含内容的高度和宽度来确定。有
人把块状元素比作硬木盒子,而把内联元素比作随意变形的皮纸袋子,这还是
挺形象的。符合标准的常用内联元素如下:
内联元素 说ÉÉÉ明
表示超链接
标注内部文本为缩写,用 属性标示缩写的全称,在非 ,- 浏览器
中会以下点划线显示,,- 不支持
!
表示取首字母的缩写词,一般显示为粗体,部分浏览器支持
指定文本以粗体显示
用于控制包含文本的阅读顺序,如./001+
+.21,浏览器会从右到左显示文本
+
指定所含文本要以比当前字体稍大的字体显示
续表
内联元素 说ÉÉÉ明
插入一个换行符
) 指定一个容器,可以包含文本,显示为一个按钮
表示引文,以斜体显示
表示代码范例,以等宽字体显示
表示术语,以斜体显示
表示强调文本,以斜体显示
指定文本以斜体显示
+ 插入图像或视频片断
) 创建各种表单输入控件
# 以定宽字体显示文本
为页面上的其他元素指定标签
包含客户端图像映射的坐标数据
3 插入对象
( 分离文本中的引语
表示代码范例
指定由脚本引擎解释的页面中的脚本
表示一个列表框或者一个下拉框
指定内含文本要以比当前字体稍小的字体显示
指定内嵌文本容器
# 带删除线显示文本
+ 以粗体显示文本
) 说明内含文本要以下标的形式显示,比当前字体稍小
) 说明内含文本要以上标的形式显示,比当前字体稍小
% 多行文本输入控件
以固定宽度字体显示文本
定义程序变量,通常以斜体显示
盒模型的显示类型可以使用 ! 属性来显式定义。任何元素都可以通过 ! 属性改
变默认显示类型,因此也会改变该元素所对应的网页布局结构。
! 属性共有 4 个选项值,详细说明如下:
:块状显示,在元素后面添加换行符,也就是说其他元素不能在其后
面并列显示。
:隐藏显示,这与 !声明不同, !声明
不会为被隐藏的元素保留位置。
:内联显示,在元素后面删除换行符,多个元素可以在一行内并列显
示。
:内联显示,但是元素的内容以块状显示,行内其他内联元素
还会显示在同一ÉÉÉÉ行内。
:紧凑的块状显示,或基于内容之上的内联显示。
:在容器对象之前或之后显示,该属性值必须与 " 和 " 伪
元素一起使用。
:具有内联特征的表格显示。
:具有块状特征的列表项目显示,并可以添加可选项目标志。
#:块状显示或基于内容之上的内联显示。
:具有块状特征的表格显示。
:表格标题显示。
:表格单元格显示É
#:表格列显示。
##:表格列组显示。
#:表格标题组显示。
"#:表格页脚组显示。
:表格行显示。
#:表格行组显示。
更详细说明可以参考 参考手册。如果单从布局角度来分析,这些显示类型都可以划归
为 # 和 两种基本显示形态,其他类型都是这两种类型的特殊显示。其中真正能够
应用并获得所有浏览器支持的取值只有 个:#、、、。
属性值表示隐藏并取消盒模型,这样元素所包含的内容就不会被浏览器解析和显示,
同样这个盒子所包含的任何元素都会被浏览器忽略,不管它们是否被声明为其他属性。
属性值表示列表项目,其实质上也是块状显示,不过是一种特殊的块状类型,它增
加了缩进和项目符号。
另外,还有一些比较有用的显示类型,如 、、#、 等,它
们在特殊布局中具有重要的实用价值,但限于 ,- 及更低版本浏览器对这些属性值的不支
持,因此限制了它们的优势被普及应用。
包含块
包含块是标准布局中的一个重要概念,它是绝对定位的基础。请读者注意包含块与父
元素、包含框或包含元素等概念存在本质的区别。那么什么是包含块呢?
包含块就是为绝对定位元素提供坐标偏移和显示范围的参照物,即确定绝对定位的偏移起
点和百分比长度的参考。在默认状态下,! 元素就是一个大的包含块,所有绝对定位的
元素都是根据窗口来确定自己所处的位置和百分比大小显示的。但是如果我们定义了包含
元素为包含块以后,对于被包含的绝对定位元素来说,就会根据最接近的具有定位功能的
上级包含元素来决定自己的显示位置。
为了能够更直观地明白什么是包含块,以及上述阐释的内涵,下面我们来构建这样一个
代码模块:
./001
555./001.21
.21
剩余63页未读,继续阅读
资源评论
sun210907
- 粉丝: 0
- 资源: 3
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功