中山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 »
美女A片免费网站在线看,欧美精品AⅤ一区二区三区,免费毛片网址,欧美老熟妇乱子论视频,美女禁黄色网站