仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 590|回复: 8
打印 上一主题 下一主题

[DIV+CSS] 来看看:神机妙算 CSS完成款式结构22招

[复制链接]
兰色精灵 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-16 00:21:13 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
层叠样式表(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的标准化设计,大到各大门户网站,小到不计其数的个人网站。
变相怪杰 该用户已被删除
沙发
发表于 2015-1-18 06:13:31 | 只看该作者
是当我和赵丽芬崔明艳老师进行交流后,很快就了解了还不太清楚的内容和并不了解的知识(像布局表格、绘制布局单元格等)。
不帅 该用户已被删除
板凳
发表于 2015-1-25 13:45:17 | 只看该作者
Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。
admin 该用户已被删除
地板
发表于 2015-2-2 22:20:18 | 只看该作者
由CS4 版本开始,则转用WebKit 排版引擎(亦即Google Chrome和Apple Safari浏览器所用的排版引擎)作为网页预览。
飘灵儿 该用户已被删除
5#
发表于 2015-2-8 15:06:51 | 只看该作者
Dreamweaver在所见即所得添加链接,也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈,用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。
海妖 该用户已被删除
6#
发表于 2015-2-25 20:19:31 | 只看该作者
不管老师做怎样的解释,而我却对它感到很是吃力,诸如里面有许多不知道的功能。
金色的骷髅 该用户已被删除
7#
发表于 2015-3-8 05:10:04 | 只看该作者
Dreamweaver在所见即所得添加链接时,可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。
灵魂腐蚀 该用户已被删除
8#
发表于 2015-3-15 22:07:58 | 只看该作者
只要我们努力,无论是怎样的艰难险阻,成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。
若天明 该用户已被删除
9#
发表于 2015-3-22 16:58:27 | 只看该作者
我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中,我总结了四大定律:兴趣、恒心、虚心、时间。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-11-14 09:29

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表