经典CSS网站布局实录(实战型的高手之路).pptVIP

1.九宫格圆角样式 2. CSS Sprites 3. 960栅格系统 4. JQuery的使用 点到为止，不管现在能否用到，趁着年轻，多学有益，总不能一辈子做小网站吧。 不要以为自己电脑水平很好，把自己当高手了，而且觉得高手就一定要冷酷，觉得别人的问题很弱智就讽刺别人。更不要以为自己是高手就去骂别人不行，其实能骂的人最不行，高手从来都是低调的。 人们日常所犯最大的错误，是对陌生人太客气，而对亲密的人太苛刻，把这个坏习惯改过来，天下太平。 ? 今天很残酷，明天更残酷，后天很美好，但是大多数人死在明天晚上，看不到后天的太阳！！！ 英雄不问出路，流氓不看岁数。 基于WEB标准的网站设计指南 小波 1.WEB标准与CSS布局 2. CSS基础 3. CSS网站元素设计 4. CSS高级技巧应用 有些东西不是书本上的，有错请指正。 WEB标准构成：结构(Structure),表现(Presentation),行为(Behavior). 一看就懂,其实不然： 结构是用来对网页中用到的信息进行整理和分类，用于结构化设计的Web标准技术有：HTML,XML,XHTML，XML最初设计的目的是为了弥补HTML的不足，以其强大的扩展性满足网络信息发布的需要，后来逐渐用于网络数据的转换及描述。XHTML为了实现HTML到XML的过渡。 表现：CSS，分离表现与内容，便于站点维护。 行为：指对整个文档内部的一个模型进行定义及交互行为的编写，用于编写用户可以进行交互式操作的文档，DOM和ECMAScript。(例如时下流行的开源的JS库JQuery中包含了对DOM的操作) WEB标准制定的核心目的? 表现与内容的分离技术 好处? 下一页 高效率的开发和简单维护 信息跨平台的可用性，例如只需要更改一个样式文件可以使得网页在不同的终端设备上进行不同的显示。 降低服务器成本: 对于大型网站而言，网页代码量减少一半则意味着其所需要的服务器带宽得到提升，节省下来的服务器费用可用于其它服务。 便于改版 测试表明，内容与设计分离的结构进行网页设计方法，使得浏览器的解析速度大幅度提高。 与未来兼容 良好的用户体验 这种好处我们可以从CSS布局与Table布局的使用中体会到，针对CSS优化有如下建议： 合理的文件结构：例如font.css文件放置字体，form.css放置表单设计，layout.css放置布局等等，我们目前做的小站可能你感觉不到优势，但是如果做的几千个页面的大型网站优势就很明显了。例如网站换肤操作，你可以简单的通过操作css文件来实现了。而且合理的文件结构对于今后的网站代码维护有很大的方便性。 继承与重用的优势：在代码压缩方面优势明显，可以减少重复代码的书写。 设计跨平台的代码：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,值得信赖，网站设计学习等) 人人皆知： …… 不在于你知道多少相关的网站，例如你只要网站上的东西搞定，这就足够了，关键是在于积累和对所学东西的使用。 可能讲得有些肤浅，大家凑活着听听吧！ CSS属性 概述 良好的XHTML书写习惯 属性值使用双引号，必须使用结束标签，不允许属性简写 类型选择符 网页中已经存在的标签名作为名称的选择符，例如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;} CSS数据单位 Px, em, mm, pt, #RRGGBB 行内样式表 坚决抵制，无法达到内容与表现的分离 内部样式表 sty