±í¸ñÍ·Ðй̶¨£ºÊ¹ÓÃCSSʵÏÖ
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>±í¸ñÍ·Ðй̶¨£ºÊ¹ÓÃCSSʵÏÖ</title>
<style type="text/css" >
div.DivContainer /* Div */{
overflow: scroll;
border: solid 1px gray;
}
table {
border-collapse: collapse;
border:solid 1px gray;
}
td {
position: relative;
padding: 5px;
border-top: solid 0px gray;
border-bottom: solid 1px gray;
border-left: solid 0px gray;
border-right: solid 1px gray;
}
td.HLocked /*×ó²à¶³½áµÄÁÐ*/ {
z-index: 10;
position: relative;
left: expression(document.getElementById("div").scrollLeft);
text-align: center;
BORDER-RIGHT: #555 1px solid;
BORDER-TOP: #fff 1px solid;
BORDER-BOTTOM: #555 1px solid;
BORDER-LEFT: #fff 1px solid;
padding:2 1 2 2;
BACKGROUND: #ccc;
}
td.VLocked /*´¹Ö±¹Ì¶¨µÄ±íÍ·*/ {
z-index: 20;
position: relative;
top: expression(document.getElementById("div").scrollTop);
color: black;
text-align: center;
BORDER-RIGHT: #555 1px solid;
BORDER-TOP: #fff 1px solid;
BORDER-BOTTOM: #555 1px solid;
BORDER-LEFT: #fff 1px solid;
padding:2 1 2 2;
BACKGROUND: #ccc;
}
td.Locked /*´¹Ö±¡¢Ë®Æ½¶¼¹Ì¶¨µÄ±íÍ·*/ {
z-index: 30;
position: relative;
top: expression(document.getElementById("div").scrollTop);
left: expression(document.getElementById("div").scrollLeft);
color: black;
text-align: center;
BORDER-RIGHT: #555 1px solid;
BORDER-TOP: #fff 1px solid;
BORDER-BOTTOM: #555
Ïà¹ØÎĵµ£º
¾²Ì¬¶¨Î»£ºposition:static£¨ÎªpositionÊôÐÔµÄĬÈÏÖµ£©¡£
¶¯Ì¬¶¨Î»£ºposition:relative»òposition:absolute»òposition:fixed¡£
×æÔªËØ£ºÈÎÒâ°üº¬¸ÃÔªËØµÄÔªËØ¡£ ¸¸ÔªËØ£ºÖ±½Ó°üº¬¸ÃÔªËØµÄ×æÔªËØ¡£ ͬ±²ÔªËØ£ºÓµÓй²Í¬µÄ¸¸ÔªËصÄÔªËØ¡£
×¢£ºÕâЩ¸Å
ÄîΪ×÷Õß ......
ÎÄÕÂת×ÔÓÚ:http://www.pqshow.com/design/Dreamweaver/200912/12674.html
ÓÉÓÚÏîÄ¿ÖбàдÎĵµ½á¹¹¡¢±àдCSSµÄÈËÔ±½Ï¶à£¬²¢Óë³ÌÐòÔ±Ðͬ¹¤×÷£¬ËùÒÔ¾ÍÐèҪͳһ¿ª·¢¹æ·¶£¬¸ù¾ÝXHTMlºÍCSS±àÖ¯µÄ¹æ·¶ºÍ´ó¶àÈ˵Äϰ¹ß£¬ÕûÀíÁËÒÔÏÂÕë¶Ô±¾ÏîÄ¿µÄÒ»¸ö¼òµ¥µÄ¿ª·¢¹æ·¶£º
Ò»¡¢CSSÎļþ¼°ÑùʽÃüÃû
1¡¢CSSÎļþÃüÃû¹æ·¶
È«¾ÖÑùʽ£ºgl ......
ºÜÔç¾ÍÔÚÕâÀï¿´µ½¹ý½â¾ö·½°¸£¬Óëà»à»ÌÖÂÛºó·¢ÏÖÕâ¸ö·½°¸»¹ÊǺܿɿ¿µÄ¡£µ±È»£¬Î¨Ò»µÄȱµã¾ÍÊÇÿһ¸öÊôÐÔ¶¼ÒªÈ¥Hack£¬µ«ÎÒÔںܶàʵ¼ùÖУ¬Ö»ÓÑÐÞÕý’1-2¸öÊôÐԾͿÉÒÔÁË¡£
¾ßÌåд·¨ºÜÈÝÒ×£º
#someNode
{
position: fixed;
#position: fixed;
_position: fixed;
}
µÚһşøFirefoxÒÔ¼°ÆäËûä¯ÀÀÆ ......
ÕâÁ½ÌìÔÚÏëÕâ¸öÎÊÌ⣬ÔÚÂÛ̳Àï·¢µÄÌû×Ó£¬Ò²Ã»ÓÐÈ˻أ¬ÍøÉϵÄÄÇЩ´ð°¸»ù±¾É϶¼ÊÇÔÚIE8.0ÒÔϵİ汾£¬Í¨¹ýIE8.0ºÍFF3.63°æ±¾µÄ±È½Ï£¬¸Ð¾õÏÖÔÚÁ½ÕßµÄÏà²î²»ÊÇÌ«´ó£¬ÎÒÖ»·¢ÏÖÓÐÏÂÃæÒ»Ð©ÓÐÃ÷ÏÔµÄÇø±ð
µÚÒ»£ºcursor:handÖµ¡£ ÔÚIEÖпÉÒÔÏÔʾÊÖÐÍ£¬µ«ÊÇÔÚFFÖÐÑùʽ²»×÷ÓÃ
µÚ¶þ£ºIEºÍFFµÄ͸Ã÷ÉèÖò»Í¬
&n ......
½ñÌìÓöµ½Òª×öCSSʵÏֲ˵¥Ô²½Ç±³¾°µÄЧ¹û, ËùÒÔÔÚÍøÉÏËÑÁËһϣ¬·¢ÏÖ´Ë·½·¨×î¼òµ¥¿ÉÐÐ~~ÌØ¼Ç¼ÏÂÀ´¹©´ó¼ÒÒ»ÆðʹÓÃ~~~
.nav ul li a{float:left; display:block; padding: 0 10px;
} /*×¢Òâpadding*/
.nav ul li a:hover{padding:0 0 0 10px;
display:block; background:url(images/tableft1.jpg) left top no-repeat # ......