经典CSS网站布局实录(实战型的高手之路)
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
基于WEB标准的网站设计指南 小波
1.WEB标准与CSS布局 2. CSS基础 3. CSS网站元素设计 4. CSS高级技巧应用
有些东西不是书本上的，有错请指正。
WEB标准构成：结构(Structure),表现(Presentation),行为(Behavior). 一看就懂,其实不然：
继承与重用的优势：在代码压缩方面优势明显，可以减少重复代码的书写。 设计跨平台的代码：CSS hack译为CSS黑客程序，针对特色浏览器的欺骗代码， 就是平日里说的浏览器兼容，目前IE6还是主流的浏览器，淘宝2010年六月份统 计显示，使用IE6访问的客户占到49%左右，而对于IE7及以上版本，其兼容性已 经和火狐趋近了，尤其是IE8对CSS的支持近似于FF了，而目前FF是公认的对CSS 支持最完善的浏览器。所以目前兼容性测试主要是针对FF和IE6. 良好可用性的CSS样式设计 使用基于DOM的脚本语言来编写交互(如那些className等属性调用都属于DOM 的范畴。JQuery的使用越来越流行，大家应该尝试下，其中就有针对DOM调用 的使用。) 高效，可维护，组件化的CSS (文档原始来.au )
……
CSS设计奖： (大量CSS实现的网站，设计不错) 3W建设： (pr=10,值得信赖，网站设计学习等) 人人皆知：
布局名称 #left{
布局代码 高度自适用
background:#033; height:100%; width:300px; float:left} html, body{/*两者同时出现达到兼容的目的*/ padding:0; margin:0; height:100%}/*关键所在,如果没有这个，浏览器中是达不到所要的效果的*/ 高度自适用问题：一个对象的高度是否可以使用百分比现实，取决于对象的父级对象，例如left的父级对象是body的话： 默认情况下，浏览器没有定义body的高度的，当然宽度默认定义了100%，所以宽度可以直接使用即可。 IE和FF对于页面对象的解析存在差异，IE中html默认100%,body无定义，而FF中，html的高度没有默认为100%,为了兼 容全部写上即可。 以上代码很简单，无须赘述，只要在使用的时候灵活运用即可。
上下边距叠加问题 #a{ width:100px; height:100px; margin-bottom:20px} #b{ width:100px; height:100px; margin-top:10px; } 浮动清除：clear:both;
结构是用来对网页中用到的信息进行整理和分类，用于结构化设计的Web标准技术有： HTML,XML,XHTML，XML最初设计的目的是为了弥补HTML的不足，以其强大的扩展性
满足网络信息发布的需要，后来逐渐用于网络数据的转换及描述。XHTML为了实现 HTML到XML的过渡。 表现：CSS，分离表现与内容，便于站点维护。 行为：指对整个文档内部的一个模型进行定义及交互行为的编写，用于编写用户可以 进行交互式操作的文档，DOM和ECMAScript。(例如时下流行的开源的JS库JQuery中 包含了对DOM的操作) WEB标准制定的核心目的? 表现与内容的分离技术 好处? 下一页
◦ 高效率的开发和简单维护 ◦ 信息跨平台的可用性，例如只需要更改一个样式文件可以使得网页在不同的终 端设备上进行不同的显示。 ◦ 降低服务器成本: 对于大型网站而言，网页代码量减少一半则意味着其所需要 的服务器带宽得到提升，节省下来的服务器费用可用于其它服务。 ◦ 便于改版 ◦ 测试表明，内容与设计分离的结构进行网页设计方法，使得浏览器的解析速度 大幅度提高。 ◦ 与未来兼容 ◦ 良好的用户体验 ◦ 这种好处我们可以从CSS布局与Table布局的使用中体会到，针对CSS优化有如 下建议：
CSS属性
选择符优先权
概述
id>class>类型选择符(已存的属性如span等)
!important属性
代码注释 block块状对象 In-line 尽量减少嵌套（例子如下） <div id=”header”> <div id=”title”>标题</div> <div id=”nav”>导航</div> </div> 结构标签 Meta信息 表格 文本控制
布局代码 三列浮动中间列宽度自适用
2. 绝对定位实现方式 #left3{ background:#999; width:100px; height:200px; position:absolute; top:0; left:0} #right3{ width:100px; height:200px; position:absolute; background:#693; top:0; right:0} <div id="left"></div> #middle3{ <div id="right"> </div> background:#0CF; <div id="middle"></div> height:200px; margin-left:120px; /*书写顺序不要错，只要这种顺序书写才会达到所需要的效果， margin-right:120px;} 如果middle放到了中间的话，right块会掉到下一行*/ 这种布局方式兼容IE6,7,8及FF等浏览器。 一般这种浮动宽度都定义最小宽度，不至于最小宽度之后出现 变形。 min-width:1004px;/*FF识别,IE不识别*/ width:expression((documentElement.clientWidth<1004) ?"1004px":"auto");/*针对IE的hack代码,同理max-width类 似*/ <div id="left3"></div> <div id="middle3"></div> <div id="right3">sdf</div> 代码完全兼容FF和IE浏览器
概述
属性值使用双引号，必须使用结束标签，不允许属性简写 网页中已经存在的标签名作为名称的选择符，例如body, span, p等 h1, h2, p {……}, 减少代码量 例如h1 span{}:针对某个对象的子对象进行样式定义。但是为了代码清晰， 可读性高，不提倡多级包含。 h1#content {}针对所有的id为content的h1标签进行指派；H1.p1{}针对所 有class为p1的h1标签进行定义 h1#content h2{}: 表示id为content的h1标签下的h2标签 *{color:blue;} Px, em, mm, pt, #RRGGBB 坚决抵制，无法达到内容与表现的分离 <style type=”text/css”></style>,定义在head之间，不能跨越页面使用， 达不到CSS代码重用的目的。 <link rel=”stylesheet” href=”style.css” type=”text/css” />和{
background:#0CC; height:300px; } FF中的right会平铺在left的后面，而在IE中right会自动排 列在left的右侧，但二者添加内容时候效果一样，可以使 用这种布局。
布局名称 1.相对定位实现方式 #left{ width:200px; float:left; background-color:#FFF} #mid{ width:auto; background:#00FF00; margin:0 230px; /*左右留下间距*/ border:1px solid #000;} #right{ width:200px; float:right; background-color:#CCC}
Margin属性
Margin:5px; Margin:5px 40px; Margin:0px auto; Margin:5px 40px 25px; 大家皆熟知，不再赘述
说明
四周5px 上下5px,左右40px 居中 上5px,左右40px,下25px
Margin Hack IE6中的双倍边距问题 (第一个div左侧在IE6中边距变为了 200px，而FF和IE7以上版本为 100px，而后面两个div没有双倍边距 问题，仅是子div与父div的bug.) 解决方式简单，添加： Display:inline;
不在于你知道多少相关的网站，例如你只要网站上的东西搞定，这就足够了，关 键是在于积累和对所学东西的使用。
可能讲得有些肤浅，大家凑活着听听吧！
CSS属性
良好的XHTML书写习惯 类型选择符 群组选择符 包含选择符 标签指定式选择符 组合选择符 通配选择符 CSS数据单位 行内样式表 内部样式表 外部样式表
说明及其解决方式 .float_box { float: left; width: 150px; height: 150px; margin-left: 100px; } <div class=“father”> <div class=“float_box”></div> <div class=“float_box”></div> <div class=“float_box”></div> </div>
表单 图像 表现 类或者ID命名
布局名称
两列自适应宽度
布局代码
#left1{ width:30%; height:300px; float:left;}
#right1{
width:70%; height:300px; float:left} /*全局最外层定位的时候不要为DIV添加border,因为 border的使用相当于增加了div的宽度，百分比的使用会 出现不确定性问题*/ 两列右列宽度自适用 #left{ background:#666; width:300px; height:200px; float:left}
合理的文件结构：例如font.css文件放置字体，form.css放置表单设计，layout.css 放置布局等等，我们目前做的小站可能你感觉不到优势，但是如果做的几千个页面的 大型网站优势就很明显了。例如网站换肤操作，你可以简单的通过操作css文件来实现 了。而且合理的文件结构对于今后的网站代码维护有很大的方便性。
用于提升优先级
编写具有意义的注释，培养良好的编码习惯和风格，提高开发效率。 默认情况下占据整行，其他对象下一行显示 行间对象或者是内联元素，允许下一个对象共享同一行显示，例如span 可以保证浏览器不用过分的消耗资源对嵌套关系进行解析，简单的嵌套 结构利于我们对版式的理解和控制。 <div id=”header”> <h1>标题</h1> <ul>导航</ul> </div> Html, head, body, div, span Doctype, title, link, meta, style Table, tr, td, th, tbody, thead, tfoot, col, caption等 P,h1~h6, strong, em, abbr(定义文本的简写词), acronym(定义首字 母简写词), address, bdo(字母顺序左右反转), cite, q(引用相关),code, ins, del, dfn, pre, samp, br, var等 Form, input, textarea, select, option, button, label等 Img, area, map(图像地图的使用，例如大幅图片中的小产品加入链接 用此较为方便), object, param B,I, tt(打字机字体), sub, sup(上标), big, small, hr(分割线) 样式类名由以字母开头的小写字母(a-z)、数字(0-9)、下划线(_)、减号 (-)组成。
1.WEB标准与CSS布局 2. CSS基础 3. CSS网站元素设计 4. CSS高级技巧应用
有些东西不是书本上的，有错请指正。
WEB标准构成：结构(Structure),表现(Presentation),行为(Behavior). 一看就懂,其实不然：
继承与重用的优势：在代码压缩方面优势明显，可以减少重复代码的书写。 设计跨平台的代码：CSS hack译为CSS黑客程序，针对特色浏览器的欺骗代码， 就是平日里说的浏览器兼容，目前IE6还是主流的浏览器，淘宝2010年六月份统 计显示，使用IE6访问的客户占到49%左右，而对于IE7及以上版本，其兼容性已 经和火狐趋近了，尤其是IE8对CSS的支持近似于FF了，而目前FF是公认的对CSS 支持最完善的浏览器。所以目前兼容性测试主要是针对FF和IE6. 良好可用性的CSS样式设计 使用基于DOM的脚本语言来编写交互(如那些className等属性调用都属于DOM 的范畴。JQuery的使用越来越流行，大家应该尝试下，其中就有针对DOM调用 的使用。) 高效，可维护，组件化的CSS (文档原始来.au )
……
CSS设计奖： (大量CSS实现的网站，设计不错) 3W建设： (pr=10,值得信赖，网站设计学习等) 人人皆知：
布局名称 #left{
布局代码 高度自适用
background:#033; height:100%; width:300px; float:left} html, body{/*两者同时出现达到兼容的目的*/ padding:0; margin:0; height:100%}/*关键所在,如果没有这个，浏览器中是达不到所要的效果的*/ 高度自适用问题：一个对象的高度是否可以使用百分比现实，取决于对象的父级对象，例如left的父级对象是body的话： 默认情况下，浏览器没有定义body的高度的，当然宽度默认定义了100%，所以宽度可以直接使用即可。 IE和FF对于页面对象的解析存在差异，IE中html默认100%,body无定义，而FF中，html的高度没有默认为100%,为了兼 容全部写上即可。 以上代码很简单，无须赘述，只要在使用的时候灵活运用即可。
上下边距叠加问题 #a{ width:100px; height:100px; margin-bottom:20px} #b{ width:100px; height:100px; margin-top:10px; } 浮动清除：clear:both;
结构是用来对网页中用到的信息进行整理和分类，用于结构化设计的Web标准技术有： HTML,XML,XHTML，XML最初设计的目的是为了弥补HTML的不足，以其强大的扩展性
满足网络信息发布的需要，后来逐渐用于网络数据的转换及描述。XHTML为了实现 HTML到XML的过渡。 表现：CSS，分离表现与内容，便于站点维护。 行为：指对整个文档内部的一个模型进行定义及交互行为的编写，用于编写用户可以 进行交互式操作的文档，DOM和ECMAScript。(例如时下流行的开源的JS库JQuery中 包含了对DOM的操作) WEB标准制定的核心目的? 表现与内容的分离技术 好处? 下一页
◦ 高效率的开发和简单维护 ◦ 信息跨平台的可用性，例如只需要更改一个样式文件可以使得网页在不同的终 端设备上进行不同的显示。 ◦ 降低服务器成本: 对于大型网站而言，网页代码量减少一半则意味着其所需要 的服务器带宽得到提升，节省下来的服务器费用可用于其它服务。 ◦ 便于改版 ◦ 测试表明，内容与设计分离的结构进行网页设计方法，使得浏览器的解析速度 大幅度提高。 ◦ 与未来兼容 ◦ 良好的用户体验 ◦ 这种好处我们可以从CSS布局与Table布局的使用中体会到，针对CSS优化有如 下建议：
CSS属性
选择符优先权
概述
id>class>类型选择符(已存的属性如span等)
!important属性
代码注释 block块状对象 In-line 尽量减少嵌套（例子如下） <div id=”header”> <div id=”title”>标题</div> <div id=”nav”>导航</div> </div> 结构标签 Meta信息 表格 文本控制
布局代码 三列浮动中间列宽度自适用
2. 绝对定位实现方式 #left3{ background:#999; width:100px; height:200px; position:absolute; top:0; left:0} #right3{ width:100px; height:200px; position:absolute; background:#693; top:0; right:0} <div id="left"></div> #middle3{ <div id="right"> </div> background:#0CF; <div id="middle"></div> height:200px; margin-left:120px; /*书写顺序不要错，只要这种顺序书写才会达到所需要的效果， margin-right:120px;} 如果middle放到了中间的话，right块会掉到下一行*/ 这种布局方式兼容IE6,7,8及FF等浏览器。 一般这种浮动宽度都定义最小宽度，不至于最小宽度之后出现 变形。 min-width:1004px;/*FF识别,IE不识别*/ width:expression((documentElement.clientWidth<1004) ?"1004px":"auto");/*针对IE的hack代码,同理max-width类 似*/ <div id="left3"></div> <div id="middle3"></div> <div id="right3">sdf</div> 代码完全兼容FF和IE浏览器
概述
属性值使用双引号，必须使用结束标签，不允许属性简写 网页中已经存在的标签名作为名称的选择符，例如body, span, p等 h1, h2, p {……}, 减少代码量 例如h1 span{}:针对某个对象的子对象进行样式定义。但是为了代码清晰， 可读性高，不提倡多级包含。 h1#content {}针对所有的id为content的h1标签进行指派；H1.p1{}针对所 有class为p1的h1标签进行定义 h1#content h2{}: 表示id为content的h1标签下的h2标签 *{color:blue;} Px, em, mm, pt, #RRGGBB 坚决抵制，无法达到内容与表现的分离 <style type=”text/css”></style>,定义在head之间，不能跨越页面使用， 达不到CSS代码重用的目的。 <link rel=”stylesheet” href=”style.css” type=”text/css” />和{
background:#0CC; height:300px; } FF中的right会平铺在left的后面，而在IE中right会自动排 列在left的右侧，但二者添加内容时候效果一样，可以使 用这种布局。
布局名称 1.相对定位实现方式 #left{ width:200px; float:left; background-color:#FFF} #mid{ width:auto; background:#00FF00; margin:0 230px; /*左右留下间距*/ border:1px solid #000;} #right{ width:200px; float:right; background-color:#CCC}
Margin属性
Margin:5px; Margin:5px 40px; Margin:0px auto; Margin:5px 40px 25px; 大家皆熟知，不再赘述
说明
四周5px 上下5px,左右40px 居中 上5px,左右40px,下25px
Margin Hack IE6中的双倍边距问题 (第一个div左侧在IE6中边距变为了 200px，而FF和IE7以上版本为 100px，而后面两个div没有双倍边距 问题，仅是子div与父div的bug.) 解决方式简单，添加： Display:inline;
不在于你知道多少相关的网站，例如你只要网站上的东西搞定，这就足够了，关 键是在于积累和对所学东西的使用。
可能讲得有些肤浅，大家凑活着听听吧！
CSS属性
良好的XHTML书写习惯 类型选择符 群组选择符 包含选择符 标签指定式选择符 组合选择符 通配选择符 CSS数据单位 行内样式表 内部样式表 外部样式表
说明及其解决方式 .float_box { float: left; width: 150px; height: 150px; margin-left: 100px; } <div class=“father”> <div class=“float_box”></div> <div class=“float_box”></div> <div class=“float_box”></div> </div>
表单 图像 表现 类或者ID命名
布局名称
两列自适应宽度
布局代码
#left1{ width:30%; height:300px; float:left;}
#right1{
width:70%; height:300px; float:left} /*全局最外层定位的时候不要为DIV添加border,因为 border的使用相当于增加了div的宽度，百分比的使用会 出现不确定性问题*/ 两列右列宽度自适用 #left{ background:#666; width:300px; height:200px; float:left}
合理的文件结构：例如font.css文件放置字体，form.css放置表单设计，layout.css 放置布局等等，我们目前做的小站可能你感觉不到优势，但是如果做的几千个页面的 大型网站优势就很明显了。例如网站换肤操作，你可以简单的通过操作css文件来实现 了。而且合理的文件结构对于今后的网站代码维护有很大的方便性。
用于提升优先级
编写具有意义的注释，培养良好的编码习惯和风格，提高开发效率。 默认情况下占据整行，其他对象下一行显示 行间对象或者是内联元素，允许下一个对象共享同一行显示，例如span 可以保证浏览器不用过分的消耗资源对嵌套关系进行解析，简单的嵌套 结构利于我们对版式的理解和控制。 <div id=”header”> <h1>标题</h1> <ul>导航</ul> </div> Html, head, body, div, span Doctype, title, link, meta, style Table, tr, td, th, tbody, thead, tfoot, col, caption等 P,h1~h6, strong, em, abbr(定义文本的简写词), acronym(定义首字 母简写词), address, bdo(字母顺序左右反转), cite, q(引用相关),code, ins, del, dfn, pre, samp, br, var等 Form, input, textarea, select, option, button, label等 Img, area, map(图像地图的使用，例如大幅图片中的小产品加入链接 用此较为方便), object, param B,I, tt(打字机字体), sub, sup(上标), big, small, hr(分割线) 样式类名由以字母开头的小写字母(a-z)、数字(0-9)、下划线(_)、减号 (-)组成。