最優(yōu)良人 » CSS http://www.dgkai.cn/blog 中山php|最優(yōu)網(wǎng)絡(luò) Mon, 13 May 2013 04:56:43 +0000 en hourly 1 http://wordpress.org/?v=3.1.4 ie6實現(xiàn)div頁面固定不動,純CSS中使用expression兼容fix http://www.dgkai.cn/blog/view-392.html http://www.dgkai.cn/blog/view-392.html#comments Wed, 01 Aug 2012 09:36:33 +0000 lin http://www.dgkai.cn/blog/?p=392 * 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 /* IE6 position fixed Bottom */{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));} * html .fixed-left /* IE6 position fixed Left */{position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft));} CSS中使用expression有ie才能識別。IE5及其以后版本支持在CSS中使用expression,用來把CSS屬性和 Javascript表達式關(guān)聯(lián)起來,這里的CSS屬性可以是元素固有的屬性,也可以是自定義屬性。就是說CSS屬性后面可以是一段Javascript 表達式,CSS屬性的值等于Javascript表達式計算的結(jié)果。 在表達式中可以直接引用元素自身的屬性和方法,也可以使用其他瀏覽器對象。這個表達式就好像是在這個元素的一個成員函數(shù)中一樣。

例子: 1.給元素固有屬性賦值 下面是定義container容器的寬度,如果<725就為自己的寬度,否則就等于725,相當于max-width:725px;。   <style type="text/css" media="screen">   #container { width: expression((documentElement.clientWidth > 725) ? "725px" : "auto" ); }   </style>   2.給元素自定義屬性賦值 例如,消除頁面上的鏈接虛線框。 通常的做法是:   <a href="link1.htm" onfocus="this.blur()">link1</a>   <a href="link2.htm" onfocus="this.blur()">link2</a>   <a href="link3.htm" onfocus="this.blur()">link3</a>   粗看或許還體現(xiàn)不出采用expression的優(yōu)勢,但如果你的頁面上有幾十甚至上百個鏈接,這時的你難道還會機械式地Ctrl+C,Ctrl+V么,何況兩者一比較,哪個產(chǎn)生的冗余代碼更多呢?   采用expression的做法如下:   <style type="text/css">   a {star : expression(this.onFocus=this.blur());}   </style>   <a href="link1.htm">link1</a>   <a href="link2.htm">link2</a>   <a href="link3.htm">link3</a>   說明:里面的star就是自己任意定義的屬性,你可以隨自己喜好另外定義,接著包含在expression()里的語句就是JS腳本, 在自定義屬性與expression之間可別忘了還有一個引號,因為實質(zhì)還是CSS,所以放在style標簽內(nèi),而非script內(nèi)。OK,這樣就很容易 地用一句話實現(xiàn)了頁面中的鏈接虛線框的消除。不過你先別得意,如果觸發(fā)的特效是CSS的屬性變化,那么出來的結(jié)果會跟你的本意有差別。例如你想隨鼠標的移 進移出而改變頁面中的文本框顏色更改,你可能想當然的會認為應(yīng)該寫為   <style type="text/css">   input {star : expression(onmouseover=this.style.backgroundColor="#F5F5F5";   onmouseout=this.style.backgroundColor="#FFFFFF")}   </style>   <input type="text">   <input type="text">   <input type="text">   可結(jié)果卻是出現(xiàn)腳本出錯,正確的寫法應(yīng)該把CSS樣式的定義寫進函數(shù)內(nèi),如下所示:   <style type="text/css">   input {star : expression(onmouseover=function()   {this.style.backgroundColor="#FF0000"},   onmouseout=function(){this.style.backgroundColor="#FFFFFF"}) }   </style>   <input type="text">   <input type="text">   <input type="text">   注意:不是非常需要,一般不建議使用expression,因為expression對瀏覽器資源要求比較高。


]]>
http://www.dgkai.cn/blog/view-392.html/feed 437
CSS border-collapse 屬性,細邊線table表格樣式 http://www.dgkai.cn/blog/view-347.html http://www.dgkai.cn/blog/view-347.html#comments Thu, 08 Mar 2012 06:56:13 +0000 lin http://www.dgkai.cn/blog/?p=347 border-collapse 屬性設(shè)置表格的邊框是否被合并為一個單一的邊框,還是象在標準的 HTML 中那樣分開顯示。

可能的值

描述
separate 默認值。邊框會被分開。不會忽略 border-spacing 和 empty-cells 屬性。
collapse 如果可能,邊框會合并為一個單一的邊框。會忽略 border-spacing 和 empty-cells 屬性。
inherit 規(guī)定應(yīng)該從父元素繼承 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;}

]]>
http://www.dgkai.cn/blog/view-347.html/feed 374
CSS hack之!important;下劃線,星號 http://www.dgkai.cn/blog/view-336.html http://www.dgkai.cn/blog/view-336.html#comments Fri, 24 Feb 2012 09:31:59 +0000 lin http://www.dgkai.cn/blog/?p=336 星號" * " :ie6 ie7支持 hirefox不支持

下劃線"_":ie6支持 ie7 firefox不支持

!important; : firefox ie7支持 ,ie6部分支持

IE6支持重定義中的!important,例如:   .yuanxin {color:#e00!important;}   .yuanxin {color:#000;}   你將會發(fā)現(xiàn)定義了樣式class="yuanxin"時,在IE下,字體顯示為紅色(#e00)。   但不支持同一定義中的!important。例如:   .yuanxin {color:#e00!important;color:#000}   此時在IE6下不支持,你將會發(fā)現(xiàn)定義了樣式class="yuanxin"時,字體顯示為黑色(#000)。

 

HTML頭部引用(if IE)Hack:針對所有IE:<!--[if IE]><!--您的代碼--><![endif]-->,針對IE6及以下版本:<!--[if lt IE 7]><!--您的代碼--><![endif]-->,這類Hack不僅對CSS生效,對寫在判斷語句里面的所有代碼都 會生效。

選擇器Hack:比如 IE6能識別*html .class{},IE7能識別*+html .class{}或者*:first-child+html .class{}。等等

瀏覽器優(yōu)先級別:FF<IE7<IE6,CSS hack書寫順序一般為FF IE7 IE6

以: " #demo {width:100px;} "為例;

#demo {width:100px;} /*被FIREFOX,IE6,IE7執(zhí)行.*/

* html #demo {width:120px;} /*會被IE6執(zhí)行,之前的定義會被后來的覆蓋,所以#demo的寬度在IE6就為120px; */

*+html #demo {width:130px;} /*會被IE7執(zhí)行*/ ---------------

所以最后,#demo的寬度在三個瀏覽器的解釋為:

FIREFOX:100px;

ie6:120px;

ie7:130px;

IE8 最新css hack:

"\9" 例:"border:1px \9;".這里的"\9"可以區(qū)別所有IE和FireFox.

"\0" IE8識別,IE6、IE7不能.

IE6 hack

_background-color:#CDCDCD; /* ie 6*/

IE7 hack

*background-color:#dddd00; /* ie 7*/

IE8 hack

background-color:red\0; /* ie 8/9*/

IE9 hack

background-color:blue\9\0;

]]>
http://www.dgkai.cn/blog/view-336.html/feed 287
純css實現(xiàn)下拉菜單,兼容ie6 http://www.dgkai.cn/blog/view-319.html http://www.dgkai.cn/blog/view-319.html#comments Mon, 26 Dec 2011 05:52:05 +0000 lin http://www.dgkai.cn/blog/?p=319 以下代碼在ie6以上版本以及其他標準瀏覽器下,都可以實現(xiàn)純css的下拉菜單效果,原理是通過li:hover控制菜單的顯示隱藏。

<ul id="nav">
<li><a href="#">這是顯示的標題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="#">這是顯示的標題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: none;
line-height: 1;
}
#nav li{ /* all list items */
float: left;
width: 10em;
}
#nav li ul{ /* second-level lists */
position: absolute;
background: orange;
width: 10em;
left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers 這里用left:-999em的也行,用display:none的也行,看您喜歡用啥 */
}

*+ html #nav li ul{margin: 16px 0 0 -95px;} /* 二級菜單顯示位置調(diào)整IE7 */
*html #nav li ul{margin: 16px 0 0 -95px;} /* 二級菜單顯示位置調(diào)整 IE6 */
#nav li:hover ul, #nav li.sfhover ul{
left: auto;/* 如果上面用left的了,那么這就不用改,最多改個數(shù),如果用display:none了,那么這里改成display:block*/
}

由于ie6不支持li:hover ,所以#nav li:hover ul,失效,必須使用js控制樣式sfhover,需要在頭部添加以下js代碼:

<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover =function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]>
</script>

 

]]>
http://www.dgkai.cn/blog/view-319.html/feed 449
簡單的下拉菜單,CSS+幾行JS代碼實現(xiàn) http://www.dgkai.cn/blog/view-217.html http://www.dgkai.cn/blog/view-217.html#comments Sat, 27 Aug 2011 07:01:41 +0000 lin http://www.dgkai.cn/blog/?p=217 這是最近一個項目使用到的下拉菜單效果,首先定義一個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="#">關(guān)于我們</a>
<!-- 下拉部分-->
<ul><li><a href="#">公司簡介</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? " ": "") + "sfhover";
}
sfEls[i].onMouseUp=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),
"");
}
}
}
window.onload=menuFix;
//--><!]]></script>

css代碼:

#nav {
line-height: 24px; list-style-type: none;
}
#nav a {
display: block; text-align:center;
}
#nav a:link {
color:#a6ce38; text-decoration:none;
}
#nav a:visited {
color:#a6ce38;text-decoration:none;
}
#nav a:hover {
color:#F00; text-decoration:none;;
}
#nav li {
float: left; padding-left:15px; font-family:"微軟雅黑"; font-size:14px;
}
#nav li a:hover{
color:#F00;
}
#nav li ul {
line-height:18px; list-style-type: none;text-align:left;
left: -999em; width:120px; position: absolute;

}
#nav li ul li{
background: #FFF;/*沒有背景在ie6下會有一點小問題*/
float:left; width:100px;
font-family:"微軟雅黑"; font-size:12px; color:#F00;
margin:0px;padding:0;
clear:both;
}
#nav li ul a{
display: block; width:100px;text-align:left;
}
#nav li ul a:link {
color:#a6ce38; text-decoration:none;
}
#nav li ul a:visited {
color:#a6ce38; text-decoration:none;
}
#nav li ul a:hover {
color:#FFF; text-decoration:none;
background:#F00;
}
#nav li:hover ul {
left: auto;
}
#nav li.sfhover ul {
left: auto;
}

]]>
http://www.dgkai.cn/blog/view-217.html/feed 212
div li元素不限定寬度,如何浮在中間 http://www.dgkai.cn/blog/view-141.html http://www.dgkai.cn/blog/view-141.html#comments Thu, 18 Aug 2011 09:47:33 +0000 lin http://www.dgkai.cn/blog/?p=141 div的橫向居中我們都知道而已用margin:0 auto;實現(xiàn),但是在不指定寬度的情況下這語句是沒有意義的,div為塊級元素,在內(nèi)層DIV未指定寬度的情況下不能通過margin:0 auto來實現(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>無標題文檔</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>

]]>
http://www.dgkai.cn/blog/view-141.html/feed 498
按鈕變成失效狀態(tài),input框變成只讀模式以及CSS一些頁面控制 http://www.dgkai.cn/blog/view-137.html http://www.dgkai.cn/blog/view-137.html#comments Thu, 18 Aug 2011 06:42:06 +0000 lin http://www.dgkai.cn/blog/?p=137 以下代碼可以使按鈕變成失效狀態(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控制字數(shù)多,隱藏多余字
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;

實現(xiàn)細邊的表格
<table width=500 border="0" align="center" cellpadding="5" cellspacing="1" bgcolor="#add3ef">
<tr bgcolor="#eff3ff">
<td>標題:用戶:</td>
</tr>
<tr bgColor="#ffffff">
<td>內(nèi)容:</td>
</tr>
</table>
或者簡單通過這個屬性控制
style="border-collapse:collapse"

]]>
http://www.dgkai.cn/blog/view-137.html/feed 200
韩国午夜理论2020| 久久久久国产精品免费无码| 手机免费av片在线观看| 日本一区二区高清不卡| 日韩成人少妇| 西欧free性满足hd老熟妇| 老湿机久久| 欧美精品日韩区| 九九九国产| 久久久精品免费播放| 亚欧美日韩| AV成人网站中文字幕播放| 国产日产欧美性爱| 国产 欧美 日韩 亚洲| 亚洲人成网站色ww| 骚妇av加长版| 夫妻性生活大片| 亚洲色图免费一区| 日韩亚洲欧美综合| 国产偷伦| av在线一本| 我爱ava| 新闻| 激情综合色综合啪啪开心| 超碰视屏| 四虎欧美| 九色永久网址| 黑人女性猛交xxxxxⅹxx| 狠狠色综合7777久夜色撩人| 国产精品区av| 看毛片久久久久久久| 国产精品123区| 国产麻豆久久久| 免费可以在线看A∨网站| 久久久94人妻无码精品蜜桃| 国产精品国产三级国产普通话对白| 欧美一级牲交视频| 射阳县| 亚洲青色无码日韩一区二区| 欧美大香蕉视频| 东北妇女精品BBwBBW|