易截截图软件、单文件、免安装、纯绿色、仅160KB

CSS的hack解决积累

一年里遇到的css问题总结一下:
到现在发现用hack越多证明你的水平越差,目前写的代码几乎没有用到这些解决方法了。但是话说回来只有遇到问题并且解决才能最终达到预防。直到所有的都遇到了你也就是高手了!
应用最多的本人感觉就是:height:1%;overflow:hidden;//解决float等问题
 1、高度自适应问题:
完美解决办法:
div{
height:auto !important;
height:xxx px;
min-height:xxx px;
}
前提是:在div(此处的div只是个常用案例,并非只能用在这个标签上)的结束标签前加上清除浮动的代码。该代码样式写法如下:
{
visibility:hidden;
display:none;
clear:both;
font-size:0;
height:0;
}
2、完全居中问题:
说明:垂直居中只适用于页面高度固定的情况。
完美解决办法(不会出现内容看不见的问题):
假设你的主体框架为#main
页面结构写法如下:
<div id="vertical"> </div>
<div id="main">xxxx</div>
样式写法如下:(样式中的背景色只是为了测试而用非必写项,body中的text-align为必写项。)
html,body{
height:100%;
margin:0;
padding:0;
}
body{
text-align:center;
background:#eae7d7;
}
#vertical{
float:left;
height:50%;
width:100%;
margin-top:-305px;/* half vertical height*/
}
#main{
width:1003px;
height:611px;
margin:0 auto;
background:#666;
text-align:left;
}
3、IE7 样式单独写法:*+html后面要有空格。
*+html #main{
xxxx !important;
}

FF样式单独写法:
#main{
xxxx !important;/*此句是针对FF的*/
xxxx;
}
4、解决ie6、ie7、 FF、opera下样式显示都不同的问题:
办法:
{
background:orange; /* ff识别的 */
*background:orange; /* ie7识别的 */
_background:orange; /* ie6识别的 (顺序不能变)*/
}
说明:以上写法,虽然能实现效果,但在通过标准验证时会有警告提示。故,提倡一般不要用 *样式 的写法。如果不用*,就可以采用前面第3条提到的专门针对IE7 的样式的写法。
解决FF和ie7相同,但与ie6不同
{
background:orange important; /* ie7识别的/ ff识别的 */
background:orange; /* ie6识别的 (顺序不能变)


相关文档:

css满屏布局与ul和li列表

css满屏布局与ul和li列表 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<meta content="text/html; charset=u ......

有利于SEO的DIV+CSS的命名规则

搜索引擎优化(seo)有很多工作要做,其中对代码的优化是一个很关键的步骤。
为了更加符合SEO的规范,下面是目前流行的CSS+DIV的命名规则:
页头:header
登录条:loginBar
标志:logo
侧栏:sideBar
广告:banner
导航:nav
子导航:subNav
菜单:menu
子菜单:subMenu
搜索:search
滚动:scroll
页面主体:main
内容:con ......

css兼容IE8


<meta http-equiv="x-ua-compatible" content="ie=7" />
IE6、IE7、Firefox等浏览器的兼容性问题让网页设计师们大伤脑筋,本来网页设计是件很有趣的事情,但是却被这多余兼容工作伤脑筋,特别是让人唾弃的IE6,多少人想让它消失,可是它就是消失不了,微软还说不会停止对IE6,真够郁闷的。
   &n ......

Css Hack

IE都能识别*;标准浏览器(如Firefox,Opera,Netscape)不能识别*;
IE6能识别*,但不能识别 !important,
IE7能识别*,也能识别!important;
FF不能识别*,但能识别!important;
写两句代码来控制一个属性,区别Firefox与IE6:
background:orange;*background:blue; //
这一句代码写出来时,你用firefox或其它非IE浏览时 ......

css定宽,js换背景,去链接后的焦点虚线框,

1.span  的 overflow :hidden  width:70px  ; display:block(一点要加上div的话不用加)
2.js动态换背景,换背景 style.backgroundImage = "url('images/bg1.jpg')";
3.用onFocus="this.blur()"来消除链接后的焦点虚线框
4. onMouseOver  onMouseOut onClick  三个时间在一 ......
© 2009 ej38.com All Rights Reserved. 关于E健网联系我们 | 站点地图 | 赣ICP备09004571号