中山php|最優(yōu)網(wǎng)絡(luò) ：中山做網(wǎng)站 中山php建站
最優(yōu)良人
Posts Tagged With: CSS
ie6實(shí)現(xiàn)div頁(yè)面固定不動(dòng)，純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 屬性，細(xì)邊線table表格樣式
2012/03/08 at 14:56 » Comments (374)
border-collapse 屬性設(shè)置表格的邊框是否被合并為一個(gè)單一的邊框，還是象在標(biāo)準(zhǔn)的 HTML 中那樣分開(kāi)顯示。 可能的值 值 描述 separate 默認(rèn)值。邊框會(huì)被分開(kāi)。不會(huì)忽略 border-spacing 和 empty-cells 屬性。 collapse 如果可能，邊框會(huì)合并為一個(gè)單一的邊框。會(huì)忽略 border-spacing 和 empty-cells 屬性。 inherit 規(guī)定應(yīng)該從父元素繼承 border-collapse 屬性的值。 細(xì)邊線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;下劃線，星號(hào)
2012/02/24 at 17:31 » Comments (287)
星號(hào)" * " ：ie6 ie7支持 hirefox不支持 下劃線"_"：ie6支持 ie7 firefox不支持 !important; ： firefox ie7支持 ，ie6部分支持 IE6支持重定義中的!important，例如： .yuanxin {color:#e00!important;} .yuanxin {color:#000;} 你將會(huì)發(fā)現(xiàn)定義了樣式class="yuanxin"時(shí)，在IE下，字體顯示為紅色（#e00）。 但不支持同一定義中的!important。例如： .yuanxin {color:#e00!important;color:#000} 此時(shí)在IE6下不支持，你將會(huì)發(fā)現(xiàn)定義了樣式class="yuanxin"時(shí)，字體顯示為黑色（#000）。 HTML頭部引用(if IE)Hack：針對(duì)所有IE：<!--[if IE]><!--您的代碼--><![endif]-->，針對(duì)IE6及以下版本：<!--[if lt IE 7]><!--您的代碼--><![endif]-->，這類(lèi)Hack不僅對(duì)CSS生效，對(duì)寫(xiě)在判斷語(yǔ)句里面的所有代碼都 會(huì)生效。 選擇器Hack：比如 IE6能識(shí)別*html ...more »純css實(shí)現(xiàn)下拉菜單，兼容ie6
2011/12/26 at 13:52 » Comments (449)
以下代碼在ie6以上版本以及其他標(biāo)準(zhǔn)瀏覽器下，都可以實(shí)現(xiàn)純css的下拉菜單效果，原理是通過(guò)li:hover控制菜單的顯示隱藏。 <ul id="nav"> <li><a href="#">這是顯示的標(biāo)題1</a> <ul> <li><a href="#">這是列表中的內(nèi)容1</a></li> <li><a href="#">這是列表中的內(nèi)容2</a></li> <li><a href="#">這是列表中的內(nèi)容3</a></li> <li><a href="#">這是列表中的內(nèi)容4</a></li> </ul> </li> <li><a href="#">這是顯示的標(biāo)題2</a> <ul> <li><a href="#">這是列表中的內(nèi)容5</a></li> <li><a href="#">這是列表中的內(nèi)容6</a></li> <li><a href="#">這是列表中的內(nèi)容7</a></li> <li><a href="#">這是列表中的內(nèi)容8</a></li> </ul> </li> </ul> CSS樣式代碼 #nav, #nav ul{ /* all lists */ padding: 0; margin: 0; list-style: ...more »簡(jiǎn)單的下拉菜單，CSS+幾行JS代碼實(shí)現(xiàn)
2011/08/27 at 15:01 » Comments (212)
這是最近一個(gè)項(xiàng)目使用到的下拉菜單效果，首先定義一個(gè)id為nav的ul，ul->li里面放的是下拉出來(lái)的菜單，也是一個(gè)ul: <ul id="nav"> <li><a href="<?url ctrl=home?>">首 頁(yè)</a></li> <li><a href="#">|</a></li> <li><a href="#">關(guān)于我們</a> <!-- 下拉部分--> <ul><li><a href="#">公司簡(jiǎn)介</a></li> <li><a href="#">總經(jīng)理致辭</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;實(shí)現(xiàn)，但是在不指定寬度的情況下這語(yǔ)句是沒(méi)有意義的，div為塊級(jí)元素，在內(nèi)層DIV未指定寬度的情況下不能通過(guò)margin:0 auto來(lái)實(shí)現(xiàn)居中，將其轉(zhuǎn)換為內(nèi)聯(lián)元素（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>無(wú)標(biāo)題文檔</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 »按鈕變成失效狀態(tài)，input框變成只讀模式以及CSS一些頁(yè)面控制
2011/08/18 at 14:42 » Comments (200)
以下代碼可以使按鈕變成失效狀態(tài) <input id="select-layout" type="button" value="布置圖管理" name="select-layout" disabled="disabled"> 以下代碼可以使input框變成只讀且禁用模式 <input name="demo" type="text" disabled value="value" readonly="true" /> CSS控制字?jǐn)?shù)多，隱藏多余字 text-overflow:ellipsis;word-break:keep-all;overflow:hidden; white-space:nowrap; 顯示豎的滾動(dòng)條 overflow-y:auto;height:220px; //表格不被撐開(kāi)，換行 style="word-break:break-all" 控制input或者textarea背景透明的樣式 background-color: transparent; 實(shí)現(xiàn)細(xì)邊的表格 <table width=500 border="0" align="center" cellpadding="5" cellspacing="1" bgcolor="#add3ef"> <tr bgcolor="#eff3ff"> <td>標(biāo)題：用戶：</td> </tr> <tr bgColor="#ffffff"> <td>內(nèi)容：</td> </tr> </table> 或者簡(jiǎn)單通過(guò)這個(gè)屬性控制 style="border-collapse:collapse" more »返回菜單
