总结的一些css实用技巧及必须得注意的事项:
2008-12-29 11:34
1021 查看
个人总结的一些css实用技巧及必须得注意的事项:
1.注释须知:html中注释不能这样写:
代码:
2.CSS注释切记在/*之后及*/之前空一格,否则在有些语言中会出问题,正确写法:
代码:
3.最简单区分IE与FF的HACK写法
代码:
4.空div在IE(FF中没有)是有默认高度的,可以用定义:
代码:
的方式去掉默认高度.
5.按钮按下时立体感效果:
代码:
6.关闭当前页面代码:
代码:
7.整站变灰代码(加到样式表中):
代码:
8.设为首页代码:
代码:
9.加入收藏代码:
代码:
10.导航间竖线的定义方法:
css部分:
代码:
html部分:
代码:
11.中英文下划线对齐方式(利用图片的align="absmiddle"):
代码:
12.li交替显示背景代码:
代码:
13.利用css reset规避IE6下密码表单和文本不等长的问题,在css reset中加入:
代码:
14.FF下上边距无效时,及时反应给父级div上写入overflow:hidden或overflow:auto;也可以在子级div中写入float:left; display:inline.
15.描边文字效果:
代码:
16.圆角背景,最简单的方法就是PS圆角线条,然后用表格实现自适应
17.通过定义em实现小三角效果:
代码:
在样式中加入以上代码后,在body中用<em></em>即可得到小三角效果.
18.如果在FF中测试发现层错位或者下面的层跑到顶上了,八九不离十是没清除浮动的原因,在出问题那个层样式中加入:
代码:
即可.
19.IE6下当层高低于10px时,会出现高度在定义值上加10px的效果,最简单的方法就是在该层样式中加入:
代码:
立马将其打回原形.
20.布局中栏目分割遵循62%:38%的原
21.文字段在容器内超宽时,截断该文字段并且续以省略号:
复制内容到剪贴板
代码:
这两具是连体的,单一用有问题.并且在FF下貌似无效,摸索中..
22.为了让代码看起来整齐标准,别忘了在写完代码后用DW中执行:命令---套用源格式:
23.display之line-block的HACK:
代码:
24.透明度滤镜的用法:
代码:
26.在WEB标准中,h1在同一页面中只能出现一次.这个概念知道的人很多,但使用时忽略的人也相当的多.
27.表格边框颜色的定义不能缩写,比如:
复制内容到剪贴板
代码:
不能写成:
代码:
28.行高定义最便捷的方法,在body中加入:
代码:
如果某些文本不想以这个行高为标准,可以根据CSS优先级重新定义.
28.当图像不存在时,可用一张通用图片代替显示:
代码:
29. 检索或设置对象的层叠顺序:
代码:
此属性仅仅作用于position属性值为relative 或absolute时的对象.看个DEMO
30.使一个层垂直居中于浏览器中:
代码:
31.如何让三列横向排列
代码:
32.将以下代码加入Global CSS 中,给需要闭合的div加上 class="clearfix" 即可,屡试不爽.
代码:
33.若需给 a 标签内内容加上 样式, 需要设置display: block(常见于导航标签).
1.注释须知:html中注释不能这样写:
代码:
<div></div><!--------这是错误写法-------> <div></div><!--=======这是正确写法========-->
2.CSS注释切记在/*之后及*/之前空一格,否则在有些语言中会出问题,正确写法:
代码:
#div{style}/* 注释前后要空格 */
3.最简单区分IE与FF的HACK写法
代码:
#layer{ padding-top:20px;/* FF中定义 */ *padding-top:10px;/* IE中定义 */ }
4.空div在IE(FF中没有)是有默认高度的,可以用定义:
代码:
div { witdh:100%; background:#9c0; ling-height:0}
的方式去掉默认高度.
5.按钮按下时立体感效果:
代码:
a:hover { position:relative; top:1px; left:1px}/* 切记一定要是相对定位 */
6.关闭当前页面代码:
代码:
<div onclick="window.close();">关闭当前页面</div>
7.整站变灰代码(加到样式表中):
代码:
html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}
8.设为首页代码:
代码:
<span onclick="var strHref=window.location.href;this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.bluebirdsky.cn');" style="CURSOR:hand">设为首页</span>
9.加入收藏代码:
代码:
<script> function addfavorite() { if (document.all) { window.external.addFavorite('http://bbs.blueidea.com','经典论坛'); } else if (window.sidebar) { window.sidebar.addPanel('经典论坛', 'http://bbs.blueidea.com', ""); } } </script> <a href="#" onclick="addfavorite()">把经典论坛加入收藏</a>
10.导航间竖线的定义方法:
css部分:
代码:
.nav { width:408px;/* 这个宽度一定要按li中的宽度算好 */ float:right; display:inline; overflow:hidden } .nav ul { margin:0; padding:0 } .nav li { float:right; width:80px; height:auto; text-align:center; padding:0 10px; border-right:1px solid #444; margin-right:-1px; }
html部分:
代码:
<div class="nav"> <ul> <li><a href="show.htm">产品展示</a></li> <li><a href="case.htm">成功案例</a></li> <li><a href="service.htm">客户服务</a></li> <li><a href="download.htm">下载中心</a></li> </ul> </div>
11.中英文下划线对齐方式(利用图片的align="absmiddle"):
代码:
<img src="img.gif" align="absmiddle">中英文并排:<a href="/">中文 gollum</a>
12.li交替显示背景代码:
代码:
ul { list-style:none; font-size:12px; line-height:20px; color:#666; } ul li { background-color:expression(this.sourceIndex%2==0?'#EAF8FD':'#ffffff'); }
13.利用css reset规避IE6下密码表单和文本不等长的问题,在css reset中加入:
代码:
input { font-family:Arial, Helvetica, sans-serif; }
14.FF下上边距无效时,及时反应给父级div上写入overflow:hidden或overflow:auto;也可以在子级div中写入float:left; display:inline.
15.描边文字效果:
代码:
<div style="position:relative; width:200px; height:25px; line-height:25px; text-align:center; font-size:14px; color:#fff; background:#9c0;"> 这是描边文字<span style="position:absolute; left:-1px; top:-1px; color:#444;width:200px; height:25px; display:block">这是描边文字</span> </div>
16.圆角背景,最简单的方法就是PS圆角线条,然后用表格实现自适应
17.通过定义em实现小三角效果:
代码:
* { font-size:14px;/* 必须通配字体大小 */ } em { display:block; font:0/0 "宋体";/* 经本人摸索,只有在宋体下才最为标准 */ border:7px solid;/* border值越大,三角形越大 */ border-color:#fff #fff #fff #444;/* 通过改变颜色值,可产生不同效果,自己实验 */ margin-top:5px }
在样式中加入以上代码后,在body中用<em></em>即可得到小三角效果.
18.如果在FF中测试发现层错位或者下面的层跑到顶上了,八九不离十是没清除浮动的原因,在出问题那个层样式中加入:
代码:
clear:both
即可.
19.IE6下当层高低于10px时,会出现高度在定义值上加10px的效果,最简单的方法就是在该层样式中加入:
代码:
font-size:0;
立马将其打回原形.
20.布局中栏目分割遵循62%:38%的原
21.文字段在容器内超宽时,截断该文字段并且续以省略号:
复制内容到剪贴板
代码:
overflow:hidden;text-overflow:ellipsis;
这两具是连体的,单一用有问题.并且在FF下貌似无效,摸索中..
22.为了让代码看起来整齐标准,别忘了在写完代码后用DW中执行:命令---套用源格式:
23.display之line-block的HACK:
代码:
.menu{ display:-moz-inline-stack;/* 专属FF也可以用-moz-inline-box定义 */ *display:inline; zoom:1;/* 上一行和此行用于激活IE6/7的layout,实现类似效果 */ }
24.透明度滤镜的用法:
代码:
.navbg { filter:alpha(opacity=40); /* IE */ -moz-opacity:0.4; /* Moz + FF */ opacity: 0.4; /* 支持CSS3的浏览器(FF 1.5也支持)*/ }
26.在WEB标准中,h1在同一页面中只能出现一次.这个概念知道的人很多,但使用时忽略的人也相当的多.
27.表格边框颜色的定义不能缩写,比如:
复制内容到剪贴板
代码:
bordercolor="#3399cc"
不能写成:
代码:
bordercolor="#39c"
28.行高定义最便捷的方法,在body中加入:
代码:
line-height:1.5; /* 1.5不能有单位,含义为字体大小的1.5倍,可自定义 */
如果某些文本不想以这个行高为标准,可以根据CSS优先级重新定义.
28.当图像不存在时,可用一张通用图片代替显示:
代码:
<img src="image.gif" onerror="this.src='noimage.gif'" />
29. 检索或设置对象的层叠顺序:
代码:
z-index:auto|number
此属性仅仅作用于position属性值为relative 或absolute时的对象.看个DEMO
30.使一个层垂直居中于浏览器中:
代码:
div { position:absolute; top:50%; left:50%; margin:-100px 0 0 -100px; width:200px; height:200px; border:1px solid red; }
31.如何让三列横向排列
代码:
div { float:left; margin:1px; width:200px; height:200px; background:orange }
32.将以下代码加入Global CSS 中,给需要闭合的div加上 class="clearfix" 即可,屡试不爽.
代码:
/* Clear Fix */ .clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } .clearfix { display:inline-block; } /* Hide from IE Mac */ .clearfix {display:block;} /* End hide from IE Mac */ /* end of clearfix */
33.若需给 a 标签内内容加上 样式, 需要设置display: block(常见于导航标签).
相关文章推荐
- 总结一些CSS实用技巧及必须注意的事项
- 个人总结的一些css实用技巧及必须得注意的事项
- 项目开发中的一些注意事项以及技巧总结 基于Repository模式设计项目架构—你可以参考的项目架构设计 Asp.Net Core中使用RSA加密 EF Core中的多对多映射如何实现? asp.net core下的如何给网站做安全设置 获取服务端https证书 Js异常捕获
- 关于css一些注意事项的总结
- HTML/CSS中常遇到的bug 一些注意事项总结
- MYSQL查询SQL的注意事项和一些技巧总结
- VC的一些实用技巧和注意事项
- VC的一些实用技巧和注意事项。
- MySQL索引类型总结和使用技巧以及注意事项
- MySQL索引类型总结和使用技巧以及注意事项(转) 4000
- 拍摄婚纱照前必须要注意的一些事项
- css属性使用中的一些注意事项
- iOS开发中一些重要的系统方法使用注意事项总结
- 转 实用的中文版jQuery语法总结及注意事项
- MySQL索引类型总结和使用技巧以及注意事项
- MySQL索引类型总结和使用技巧以及注意事项
- MySQL索引类型总结和使用技巧以及注意事项
- 关于java web中session的一些注意事项与总结
- 学习HTML(十四)——CSS中的一些注意事项
- mysql一些注意事项或技巧