中山php|最优网络 ：中山做网站 中山php建站

最优良人

Posts Tagged With: CSS

ie6实现div页面固定不动，纯CSS中使用expression兼容fix

2012/08/01 at 17:36 » Comments (437)

* html,* html body /* IE6 Fixed Position Jitter Fix */{background-image:url(about:blank);background-attachment:fixed;} * html .fixed-top /* IE6 position fixed Top */{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop));} * html .fixed-right /* IE6 position fixed right */{position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));} * html .fixed-bottom /* ...more »

CSS border-collapse 属性，细边线table表格样式

2012/03/08 at 14:56 » Comments (374)

border-collapse 属性设置表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示。 可能的值 值 描述 separate 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。 collapse 如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。 inherit 规定应该从父元素继承 border-collapse 属性的值。 细边线table表格样式 table {width:100%; border:1px solid #ccc; border-collapse:collapse;} table td {border:1px solid #ccc; border-collapse:collapse; padding:10px 15px; color:#999;} more »

CSS hack之!important;下划线，星号

2012/02/24 at 17:31 » Comments (287)

星号" * " ：ie6 ie7支持 hirefox不支持 下划线"_"：ie6支持 ie7 firefox不支持 !important; ： firefox ie7支持 ，ie6部分支持 IE6支持重定义中的!important，例如： 　　.yuanxin {color:#e00!important;} 　　.yuanxin {color:#000;} 　　你将会发现定义了样式class="yuanxin"时，在IE下，字体显示为红色（#e00）。 　　但不支持同一定义中的!important。例如： 　　.yuanxin {color:#e00!important;color:#000} 　　此时在IE6下不支持，你将会发现定义了样式class="yuanxin"时，字体显示为黑色（#000）。   HTML头部引用(if IE)Hack：针对所有IE：<!--[if IE]><!--您的代码--><![endif]-->，针对IE6及以下版本：<!--[if lt IE 7]><!--您的代码--><![endif]-->，这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都 会生效。 选择器Hack：比如 IE6能识别*html ...more »

纯css实现下拉菜单，兼容ie6

2011/12/26 at 13:52 » Comments (449)

以下代码在ie6以上版本以及其他标准浏览器下，都可以实现纯css的下拉菜单效果，原理是通过li:hover控制菜单的显示隐藏。 <ul id="nav"> <li><a href="#">这是显示的标题1</a> <ul> <li><a href="#">这是列表中的内容1</a></li> <li><a href="#">这是列表中的内容2</a></li> <li><a href="#">这是列表中的内容3</a></li> <li><a href="#">这是列表中的内容4</a></li> </ul> </li> <li><a href="#">这是显示的标题2</a> <ul> <li><a href="#">这是列表中的内容5</a></li> <li><a href="#">这是列表中的内容6</a></li> <li><a href="#">这是列表中的内容7</a></li> <li><a href="#">这是列表中的内容8</a></li> </ul> </li> </ul> CSS样式代码 #nav, #nav ul{ /* all lists */ padding: 0; margin: 0; list-style: ...more »

简单的下拉菜单，CSS+几行JS代码实现

2011/08/27 at 15:01 » Comments (212)

这是最近一个项目使用到的下拉菜单效果，首先定义一个id为nav的ul，ul->li里面放的是下拉出来的菜单，也是一个ul: <ul id="nav"> <li><a href="<?url ctrl=home?>">首 页</a></li> <li><a href="#">|</a></li> <li><a href="#">关于我们</a> <!-- 下拉部分--> <ul><li><a href="#">公司简介</a></li> <li><a href="#">总经理致辞</a></li> </ul></li> <!-- 下拉部分--> </ul> js就几行代码： <script type=text/javascript><!--//--><![CDATA[//><!-- function menuFix() { var sfEls = document.getElementById("nav").getElementsByTagName("li"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=(this.className.length>0? " ": "") + "sfhover"; } sfEls[i].onMouseDown=function() { this.className+=(this.className.length>0? " ...more »

div li元素不限定宽度，如何浮在中间

2011/08/18 at 17:47 » Comments (498)

div的横向居中我们都知道而已用margin:0 auto;实现，但是在不指定宽度的情况下这语句是没有意义的，div为块级元素，在内层DIV未指定宽度的情况下不能通过margin:0 auto来实现居中，将其转换为内联元素（display:inline）后在外层DIV加text-align:center才能居中 <!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 http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> </head> <body> <div style="width:800px;height:300px;text-align:center;margin:0 auto;background:#efefef;"><div style="background:#ff33cc;display:inline;">sdaasddsa</div></div> </body> </html> more »

按钮变成失效状态，input框变成只读模式以及CSS一些页面控制

2011/08/18 at 14:42 » Comments (200)

以下代码可以使按钮变成失效状态 <input id="select-layout" type="button" value="布置图管理" name="select-layout" disabled="disabled"> 以下代码可以使input框变成只读且禁用模式 <input name="demo" type="text" disabled value="value" readonly="true" /> CSS控制字数多，隐藏多余字 text-overflow:ellipsis;word-break:keep-all;overflow:hidden; white-space:nowrap; 显示竖的滚动条 overflow-y:auto;height:220px; //表格不被撑开，换行 style="word-break:break-all" 控制input或者textarea背景透明的样式 background-color: transparent; 实现细边的表格 <table width=500 border="0" align="center" cellpadding="5" cellspacing="1" bgcolor="#add3ef"> <tr bgcolor="#eff3ff"> <td>标题：用户：</td> </tr> <tr bgColor="#ffffff"> <td>内容：</td> </tr> </table> 或者简单通过这个属性控制 style="border-collapse:collapse" more »