来看看：神机妙算 CSS完成款式结构22招
层叠样式表（CascadingStyleSheets）的缩写，用于定义HTML元素的显示形式，是W3C推出的格式化网页内容的标准技术。网页设计者必须掌握的技术之一。在利用CSS建站时，您一定碰到过五花八门的结构成绩，最初大概被弄得焦头烂额。本文的目标是让您的计划历程更加简单，当您碰到坚苦时为您供应疾速参考。
1、有疑问，先考证
在调试时，先对您的代码举行考证常常能省往很多贫苦事。格局不准确的XHTML/CSS会招致很多结构上的毛病。在其他扫瞄器中举行测试之前，请先在开始进的扫瞄器中撰写和测试CSS代码，而不是相反。
假如您在陈旧的扫瞄器中编写和测试，你的代码就不能不依附谁人陈旧扫瞄器的糟的显现，然后在切合尺度的扫瞄器中举行测试，看到显现了局“不一般”时，你会很懊丧的。相反，您应当先将您的代码完美，然后再想法为较初级的扫瞄器盘算。如许从一入手下手您的代码就是切合尺度的，你不用再为撑持其他扫瞄器而劳心劳神。固然了，今朝服从尺度的扫瞄器无疑就是Mozilla,Safari或Opera。
2、确保您想要的效果然的存在
很多特定的扫瞄器专有的CSS扩大在正式尺度中其实不存在。假如您对filter(滤镜)或转动条指定款式，您用的就是公有代码，除IE以外，在其余扫瞄器中毫无感化。假如考证器告知您代码没有界说，极有大概您用了公有款式，别期望在分歧的扫瞄器中失掉分歧的效果。
3、假如结构中必定要用浮动工具，别忘了合时利用扫除(clear)属性
浮动元素似易实难，并且难以把握。假如您发明浮动工具伸出了容器的界限，大概不像您所希冀的那样显现，请反省您的希冀是不是准确。关于这个成绩请看EricMeyer的教程
4、边距的兼并:可用padding或border来制止
您大概被过剩的(大概想要却不呈现的)空缺弄得焦头烂额。假如您用了margins，边距的兼并大概就是成绩的本源。AndyBudd对此的注释大概能为你解惑。
5、制止将padding/border和流动宽度同时使用到统一元素
IE5毛病的区块模子是祸首罪魁，是它把事变弄得七零八落。固然有弥补计划，不外最好是绕过这个成绩，当子元素的宽度流动时，为其父元素指定padding。
6、制止IE下未指定款式内容的闪灼
假如您用@import来输出内部款式表，日夕会发明IE有“闪灼”的偏差。在使用CSS款式之前，未格局化的HTML文本会长久地呈现。这是能够制止的.
7、别期望min-width在IE中有效
IE不撑持它，可是它将width看成min-width，以是经由过程一些IE的过滤技能(filtering)，能够完成一样的最后的效果。
8、断港绝潢时，试一试削减宽度
因为舍进偏差，偶然50%加上50%即是100.1%，损坏某些扫瞄器中的结构。无妨尝尝将50%减到49%，乃至49.9%。
9、IE中显现不一般
多是Peekaboo臭虫在作祟，特别是当鼠标经由超链接时能显现一般。修补办法见PositionisEverything。
10、假如利用了锚点，在使用超链接款式时要出格当心
假如您在代码中利用了传统的锚点()，您会注重到:hover和:active伪类也会感化于它。要制止这类情况，你可使用id，大概利用不为人知的语法::link:hover,:link:active
11、记着“LoVe/HAte”(爱/恨)链接划定规矩
要以上面的按次指定超链接伪类:Link,Visited,Hover,Acitve。任何其他按次都不当当。假设用了:focus，序次应为LVHFA(“LordVadersHandleFormerlyAnakin”，MattHaughey如许倡议)。
12、请记着“TRouBLED”(贫苦的)边框
边框(border)、边距(margin)和补白(padding)的简写序次为:顺时针偏向从上入手下手，即Top,Right,Bottom,Left。好比margin:01px3px5px;暗示上边距为零，右侧距为1px，依此类推。
13、非零值要指明单元
在用CSS指定字体、边距或巨细时，必需指明所用的单元(独一的破例是line-height，很奇异，它不必要单元)。某些扫瞄器对未指明单元的处置办法不足为据。零就是零，不论是px仍是em。其他的非零值都要明白指订单位。比方:padding:02px01em;
14、测试分歧的字体巨细
像Mozilla和Opera如许的初级扫瞄器都同意你改动字体巨细，不论你用甚么字体单元。某些用户的默许字体巨细一定和你的分歧，尽最年夜勉力往满意他们。
15、测试时用嵌进式款式，公布时再改成内部输出
将款式表嵌进在你的HTML源代码中，在测试时能够打消很多缓存引发的毛病，特别是某些Mac下的扫瞄器。但在公布前，必定要记着将款式表移到内部文件，用@import或引进。
16、加上分明的边框有助于结构调试
像div{border:solid1px#f00;}之类的全局划定规矩能够临时为你查出结构成绩。为特定的元素加上边框可帮您找到难以觉察的堆叠或空缺成绩。
17、图片路径不要用单引号
当设置背景图片时，要保持用双引号。只管看起来仿佛画蛇添足，可是假如不这么做，IE5/Mac会噎住。
18、不要为未来的款式表(好比手持式设备或打印用款式表)“占位子”
MacIE5对空的款式表对照伤风，会增添页面的装进工夫。倡议款式表中最少应当有一条划定规矩(哪怕是正文也好)，以免MacIE噎住。
另有一些倡议固然不针对某些功效，可是在开辟过程当中值得注重：
19、好好构造您的CSS文件
得当地成块正文CSS，将类似的CSS选择符编为一组，养成分歧的定名习气和空缺格局(为跨平台思索，倡议用空缺字符而不是tab。)和得当的序次。
20、以功效(而不是表面)为类和ID定名
假设您创立了一个.smallblue类，厥后盘算将笔墨改年夜，色彩变成白色，这个类名就不再有任何意义了。相反，您能够用更有形貌性的名字如.copyright和.pullquote。
21、组合选择符
坚持CSS短小对削减下载工夫十分主要。请只管为选择符分组、使用承继(inheritance)和利用简写(shorthand)来削减冗余。
22、利用图片交换手艺时要思索亲和力
已发明传统的FIR在屏幕浏览器，和封闭图片显现[的扫瞄器]中会出成绩。对此有其他办理举措，要依据详细情形，稳重利用。
</p>
业界越来越关注DIV+CSS的标准化设计，大到各大门户网站，小到不计其数的个人网站。 是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。 Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。 由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。 Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。 不管老师做怎样的解释，而我却对它感到很是吃力，诸如里面有许多不知道的功能。 Dreamweaver在所见即所得添加链接时，可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。 只要我们努力，无论是怎样的艰难险阻，成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。 我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中，我总结了四大定律：兴趣、恒心、虚心、时间。
页:
[1]