Div+CSS布局的扩展技巧和用法24则


在CSS网页布局开发中,会有很多小技巧,新手朋友往往对此很不熟悉。在某一两个小问题上,或许纠缠很长时间才能搞明白,虽然在的文档中,多次提及过这方面的内容,但依然有很多朋友在这些问题上犯错。我们今天看看这些CSS技巧,认真读一读,或许您并不能完全理解,您可以在进行搜索,扩展您所想要得到的知识,相信您会有很多收获!网页布局开发中,会有很多小技巧,这里再扩展一下您所想要得到的知识,相信您会有很多收获!

  一、ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值。

  二、同一个的class选择符可以在一个文档中重复出现,而id选择符却只能出现一次。对一个标签同时使用class和id进行CSS定义,如果定义有重复,id选择符做的定义有效,是因为id的权重要比class大。

  三、一个兼容性调整(IE和Mozilla)的笨办法:初学可能会碰到这样一个情况:同样一个标签的属性在IE设置成A显示是正常的,而在Mozilla里必须要设成B才能正常显示,或者两个倒过来。

  临时解决方法:选择符{属性名:B !important;属性名:A} 或许有时候并没有效果。你可以在搜索更多的BUG解决方法。

  四、如果一组要嵌套的标签之间需要些间距的话,那就留给位于里面的标签的margin属性吧,而不要去定义位于外面的标签的padding

  五、li标签前面的图标推荐使用background-image,而不是list-style-image.

  六、IE分不清继承关系和父子关系的差别,全部都是继承关系。

  七、在给你的标签疯狂加选择符的时候,别忘了在CSS里给选择符加上注释。等你以后修改你的CSS的时候就知道为什么要这么做了。另外提醒您,不要太疯狂了。

  八、如果你给一个标签设置了一个深色调的背景图片和亮色调的文字效果。建议这个时候给你的标签再设置一个深色调的背景颜色。因为图片丢失了,也可以保持文字的可读性。

九、定义链接的四种状态要注意先后顺序: Link Visited Hover Active

  十、与内容无关的图片请使用background.时刻记住表现与内容分离。

  十一、定义颜色可以缩写#8899FF=#89F

  十二、table在某些方面还是有用武之地的,在遇到内容为数据表格时,不要对它产生憎恨的心理。

  十三、<script>没有language这个属性,应该写成这样:<script type=”text/javascript”>

  十四、完美的单象素外框线表格(在IE5、IE6、IE7及FF1.0.4以上中均可通过测试) 

  table{ border-collapse:collapse; }

  td{ border:#000 solid 1px; }

  十五、margin取负值可以在标签使用绝对定位的时候起到相对定位的作用,在页面居中显示时,使用绝对定位的层不适合使用left:XXpx这个属性。把这个层放到一个要相对定位的标签旁,然后使用margin的负值是个好方法。

  十六、绝对定位时使用margin值定位可以达到相对于本身所在位置的定,这与top,left等属性相对与窗口边缘的定位不同。绝对定位的优势在于可以让其它元素忽略它的存在。

  十七、如果文字过长,则将过长的部分变成省略号显示:IE5,FF无效,但可以隐藏,IE6有效DIV STYLE=“width:120px;height:50px;border:1px solid blue;overflow:hidden;text-overflow:ellipsis”> 就是比如有一行文字,很长,表格内一行显示不下。

  十八、在IE中可能由于注释带来的文字重复问题时可以把注释改为:

  <!–[if !IE]>Put your commentary in here…<![endif]–>

  十九、如何用CSS调用外部字体语法:@font-face{font-family:name;src:url(url);sRules}取值:name:字体名称。任何可能的 font-family 属性的值url(url):使用绝对或相对 url 地址指定OpenType字体文件sRules:样式表定义


  二十、如何让一个表单中的文本框中的文字垂直居中?

  如果用行高与高度的组在FF中是没有效果的,办法就是定义上下补白就可以实现想想的效果了。

  二十一、定义A标签要注意的小问题:当我们定义a{color:red;}时,它代表了A的四种状态的样式,如果此时要定义一个鼠标放上的状态只要定义a:hover就可以了,其它三种状态就是A中所定义的样式。只定义了一个a:link时,一定要记得把其它三种状态定义出来!

  二十二、并不是所有样式都要简写:当样式表前定义了如p{padding:1px 2px 3px 4px}时,在后续工程中又增加了一个样式上补白5px,下补白6px.我们并不一定要写成p.style1{padding:5px 6px 3px 4px}.可以写成p.style1{padding-top:5px;padding-right:6px;},你可能会感觉这样写还不如原来那样好,但你想没想过,你的那种写法重复定义了样式,另外你可以不必去找原来的下补白与左补白的值是多少!如果以后前一个样式P变了话,你定义的p.style1的样式也要变。

  二十三、网站越大,CSS样式越多,开始做前,请做好充分的准备和策划,包括命名规则。页面区块划分,内部样式分类等。

  二十四、固定宽度汉字截断:overflow:hidden;text-overflow:ellipsis;white-space:nowrap;(不过只能处理文字在一行上的截断,不能处理多行。)(IE5以上)FF不能,它只隐藏。



相关阅读:
Javascript脚本实现静态网页加密
SQL Server 索引维护sql语句
JS trim去空格的最佳实践
用JQuery 实现AJAX加载XML并解析的脚本
js实现图片等比缩略显示 支持IE/FF
Windows下查看LINUX ext2/ext3格式的三种常用方法(图解)
Javascript 类与静态类的实现(续)
CSSvista可同时在IE和Fifrefox调试的CSS编辑提供下载
Access 2000数据库的密码忘了怎么办
REP-1219错误:解决报表不显示问题
php trim 去除空字符的定义与语法介绍
http状态码一览表
一个用JSP实现的分页的类及调用方法
服务器维护和计划任务使用方法
快速导航
PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 SQL jQuery C# C++ java Android IOS oracle MongoDB SQLite wamp 交通频道 作文范文 搞笑对话笑死人不偿命 不容错过的四大创业励志电影 妇联系统参与流动人口管理服务工作总结 我和小动物作文 初三班主任工作总结——课堂落实,重视方法指导 真好作文 李白的七言诗 检察官面试自我介绍演讲稿 范文 故乡的牵挂 女人励志的短语 小兔还桃作文300字 寞月作文100字 元旦100字作文 令我开心的一天 流鼻涕的雪人作文200字 孙悟空三打白骨精 难道你忘了曾经的承诺 再见,合肥 送电影下乡活动总结 全县贯彻实施行政许可法工作会议上的主持词 心,在隐隐作痛,泪,在蠢蠢欲动 小石榴作文200字 2016放弃房产承诺书范文 XX中学创建文明卫生单位总结 时光改变了你我 预备党员2011年思想汇报 一生无忧发表日志:女儿的作文:难忘妈妈那句话 春芽作文100字 武汉,一个可爱的孩子 福娃跟我交朋友作文550字 画鼻子 胡梦冉作文500字 表示死的四字词语:撒手人寰 寂静的校园300字作文 给校长的一封建议书作文600字 心动只要一瞬间 心碎也只在一转眼间 车床实习体会 在你身后,有我作文700字 你也在这里的守候 2013年社区年末工作总结 什么是文学创作?(WhatisLiteraryWriting?) 入党思想汇报2013年9月:工人阶级是中国强有力的阶级基础 维也纳音乐之旅 五月,梦见花开 人生三宝:丑妻、薄地、破棉袄! 记住该记住的,忘记该忘记的 2016思想汇报12月例文:寻找生命的位置 2016辞职报告模板范文 [图文]老爸的营业厅开业了 红花草(乡村记忆之四) 培养学生高尚的审美情趣

Copyright © 2016 phpStudy |