视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001 知道1 知道21 知道41 知道61 知道81 知道101 知道121 知道141 知道161 知道181 知道201 知道221 知道241 知道261 知道281
问答文章1 问答文章501 问答文章1001 问答文章1501 问答文章2001 问答文章2501 问答文章3001 问答文章3501 问答文章4001 问答文章4501 问答文章5001 问答文章5501 问答文章6001 问答文章6501 问答文章7001 问答文章7501 问答文章8001 问答文章8501 问答文章9001 问答文章9501
新手整理的css+div网页布局技巧[转]_html/css_WEB-ITnose
2020-11-27 15:41:15 责编:小采
文档

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

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

3、一个兼容性调整(IE和Mozilla)的笨办法:

初学可能会碰到这样一个情况:同样一个标签的属性在IE设置成A显示是正常的,而在Mozilla里必须要设成B才能正常显示,或者两个倒过来。

临时解决方法:选择符{属性名:B !important;属性名:A}

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

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

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

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

8、如果你给一个标签设置了一个深色调的背景图片和亮色调的文字效果。建议这个时候给你的标签再设置一个深色调的背景颜色。

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

10、与内容无关的图片请使用background

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

12、table在某些方面比其它标签表现的要好的多。请在需要列对齐的地方用它。

13、


就是比如有一行文字,很长,表格内一行显示不下。

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

Put your commentary in here…

20、如何用CSS调用外部字体

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

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

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

22、定义A标签要注意的小问题:

当我们定义a{color:red;}时,它代表了A的四种状态的样式,如果此时要定义一个鼠标放上的状态只要定义a:hover就可以了,其它三种状态就是A中所定义的样式。

只定义了一个a:link时,一定要记得把其它三种状态定义出来!

23、并不是所有样式都要简写:

当样式表前定义了如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的样式也要变。

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

25、几个常用到的CSS样式:

1)中文字两端对齐:text-align:justify;text-justify:inter-ideograph;

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

3)固定宽度汉字(词)折行:table-layout:fixed; word-break:break-all;(IE5以上)FF不能。

4)文字用鼠标放在前面的文字上看效果。这个效果在国外的很多网站都可以看到,而国内的少又少。

5)图片设为半透明:。halfalpha { background-color:#000000;filter:Alpha(Opacity=50)}在IE6及IE5测试通过,FF未通过,这是因为这个样式是IE私有的东西;

6)FLASH透明:选中swf,打开原代码窗口,在前输入 以上是针对IE的代码。

针对FIREFOX 给 标签也增加类似参数wmode=”transparent”

7)在做网页时常用到把鼠标放在图片上会出现图片变亮的效果,可以用图片替换的技巧,也可以用如下的滤镜:

.pictures img {
filter: alpha(opacity=45); }
.pictures a:hover img {
filter: alpha(opacity=90); }

转载:http://blog.sina.com.cn/s/blog_68d663140100w2pl.html

下载本文
显示全文
专题