图ä¸æ˜„¡¤ºäº†QQ资料å¯ä»¥è‡ªä¸»è®„¡½®å¥½å‹å¤‡æ³¨åQˆæ ‡æ³?#8220;1”åQ‰ï¼Œä¸€èˆ¬æƒ…况下用于帮助用户能更快更å®ÒŽ˜“的将列表ä¸çš„好å‹å’Œæ½œæ„识ä¸çš„æŸä¸ªç‰¹å®šçš„äh相关è”。设¾|®åŽåQŒæ— 论对æ–ÒŽ€Žä¹ˆæ”ÒŽ˜µ¿UŽÍ¼Œè‡ªå·±å¥½å‹åˆ—表ä¸çš„åå—都ä¸ä¼šå˜åQˆæ ‡æ³?#8220;2“åQ‰ï¼Œç”±æ¤è§£å†³äº†ä¸€äº›ç”¨æˆïL»å¸æ€¸çŸ¥é“好å‹æ˜¯è°çš„问题。但åŒæ—¶ä¹Ÿå¸¦æ¥äº†å¦ä¸€ä¸ªé—®é¢˜ï¼š
“æ˜ëŠ§°”本èín最大的æ„义ž®±åœ¨äºŽä¸ªæ€§åŒ–ä¼ æ’åQŒå‡å¦‚，我希望我所改å˜çš„昵¿U°èƒ½åœ¨ç¬¬ä¸€æ—‰™—´è®©æˆ‘的好å‹æ”¶åˆŽÍ¼Œè€Œå¥½å‹å´å› äØ“ä¸æƒ³å› äؓ我改ååŽä¸è®¤è¯†æˆ‘了，é€ég¸å¾—å·²å¯ÒŽˆ‘˜q›è¡Œäº†å¤‡æ³¨æ“作，那么我的愿望ž®†æ— 法达æˆï¼Œå¥½å‹å¿…é¡»“查看资料”æ¥è¢«åŠ¨æ›´æ–°æˆ‘的最新昵¿UŽÍ¼ˆå¥½å‹òq¶ä¸çŸ¥é“我改˜q‡æ˜µ¿UŽÍ¼‰åQ?br>
个ähå»ø™®®æ˜¯ï¼Œåœ¨å¥½å‹åˆ—表ä¸ä»ç„¶æ˜„¡¤ºå¥½å‹çš„个性昵¿UŽÍ¼Œè€Œå½“用户需è¦äº†è§£æ¤äººæ—¶åQŒå†ç‚¹å‡»èµ„æ–™åQŒä¸»åŠ¨èŽ·å–æ¤äººçš„备注åQˆå¦‚果已¾læ·»åŠ ï¼‰åQŒè¿™ä¸ä»…½W¦åˆä¼ 统æ„义å¯?#8220;备注”的定义，åŒæ—¶ä¹Ÿä¿æƒäº†éƒ¨åˆ†ç”¨æˆ·çš„个性化展示需求ã€?br>
ítè¸å®žå®žåšähåQŒå‹¤å‹¤æ³æ›_šäº‹ï¼Œæˆ‘的技术åšå®¢ï¼Œæ—‰™š”一òqß_¼Œ¾l§ç®‹æ›´æ–°åQ?/span>
Raven 2007-04-18 02:30 å‘表评论
]]><style>
#nav ul {
list-style : none ;
}
#nav li {
float : left ;
margin : 0 10px ;
}
#nav a {
text-decoration : none ;
display : block ;
width : 60px ;
border-left : 5px solid #ccc ;
padding-left : 3px ;
raven_on : expression(onmouseover=function(){this.all.tags("span")[1].style.color="rgb(0,106,161)" ; } );
raven_off:expression(onmouseout=function() { this.all.tags("span")[1].style.color="#999"; } );
}
#nav a:hover {
border-left : 5px solid red ;
}
#nav span {
display : block ;
font-size : 12px ;
color : #000 ;
}
#nav .navtext_en {
font-family : Verdana ;
font-size : 10px ;
font-weight : bold ;
line-height : 10px ;
color : #999 ;
}
#nav a:hover [class="navtext_en"] {
color : rgb(0,106,161) ;
}
</style>
<div id ="nav">
<ul>
<li><a href ="#"><span> ˜q”回首页 </span><span class ="navtext_en"> Home </span></a></li>
<li><a href ="#"><span> 注册甌™¯· </span><span class ="navtext_en"> Reg </span></a></li>
<li><a href ="#"><span> 最新日�nbsp; </span><span class ="navtext_en"> Read </span></a></li>
<li><a href ="#"><span> åšå®¢åˆ—表 </span><span class ="navtext_en"> Insider </span></a></li>
<li><a href ="#"><span> å¯é€‰æ¨¡æ?nbsp; </span><span class ="navtext_en"> Template </span></a></li>
</ul>
</div>
#nav ul {
list-style : none ;
}
#nav li {
float : left ;
margin : 0 10px ;
}
#nav a {
text-decoration : none ;
display : block ;
width : 60px ;
border-left : 5px solid #ccc ;
padding-left : 3px ;
raven_on : expression(onmouseover=function(){this.all.tags("span")[1].style.color="rgb(0,106,161)" ; } );
raven_off:expression(onmouseout=function() { this.all.tags("span")[1].style.color="#999"; } );
}
#nav a:hover {
border-left : 5px solid red ;
}
#nav span {
display : block ;
font-size : 12px ;
color : #000 ;
}
#nav .navtext_en {
font-family : Verdana ;
font-size : 10px ;
font-weight : bold ;
line-height : 10px ;
color : #999 ;
}
#nav a:hover [class="navtext_en"] {
color : rgb(0,106,161) ;
}
</style>
<div id ="nav">
<ul>
<li><a href ="#"><span> ˜q”回首页 </span><span class ="navtext_en"> Home </span></a></li>
<li><a href ="#"><span> 注册甌™¯· </span><span class ="navtext_en"> Reg </span></a></li>
<li><a href ="#"><span> 最新日�nbsp; </span><span class ="navtext_en"> Read </span></a></li>
<li><a href ="#"><span> åšå®¢åˆ—表 </span><span class ="navtext_en"> Insider </span></a></li>
<li><a href ="#"><span> å¯é€‰æ¨¡æ?nbsp; </span><span class ="navtext_en"> Template </span></a></li>
</ul>
</div>
]]>
IEä¸ï¼š
ç”?strong>height:1%
例：
<
divÂ
style
="height:1%"
>
　　 < div style ="float:left" >
　　 </ div >
</ div >
　　 < div style ="float:left" >
　　 </ div >
</ div >
éžIEä¸ï¼š
ç”?strong>:after
例：
.pelement:after{　/*在pelement˜q™ä¸ªå…ƒç´ çš„åŽè¾?/span>*/
　　content:"."　/*写入一个点*/
　　display:block;      /*å—çñ”布局方å¼*/
　　clear:both;　　/*清除左峋¹®åŠ¨*/
　　height:0;visibility:hidden;　　/*ä¸å¯è§?/span>*/
}
　　content:"."　/*写入一个点*/
　　display:block;      /*å—çñ”布局方å¼*/
　　clear:both;　　/*清除左峋¹®åŠ¨*/
　　height:0;visibility:hidden;　　/*ä¸å¯è§?/span>*/
}
Raven 2006-03-20 21:27 å‘表评论
]]>
例一åQ?BR>
CSS
#box {
color:red !important;
color:blue;
}
color:red !important;
color:blue;
}
HTML
<div id="Box"> 在ä¸åŒçš„‹¹è§ˆå™¨ä¸‹åQŒè¿™è¡Œå—的色应该ä¸åŒåQ?/FONT></div>
˜q™ä¸ªä¾‹å应该是大家ç»å¸¸è§åˆ°çš„important的用法了åQŒåœ¨IE环境下，˜q™è¡Œå—是è“色åQŒåœ¨firefox下，为红è‰ÔŒ¼Œå…¶ç”¨æ³•ä¸å†å¤šè¯´äº†åQŒçœ‹ä¸‹ä¸€ä¸ªä¾‹åã€?/FONT>
例二åQ?BR>
CSS
1 #box div{
color:red;
}
2 .important_false{
color:blue;
}
3.important_true{
color:blue !important;
}
color:red;
}
2 .important_false{
color:blue;
}
3.important_true{
color:blue !important;
}
HTML
<div id="Box"> <div class="important_false">˜q™ä¸€è¡Œæœ«ä½¿ç”¨important</div> <div class="important_true">˜q™ä¸€è¡Œä‹É用了important</div></div>例二ä¸ï¼ŒCSSä»£ç ½W¬ä¸€è¡Œè®¾å®šäº†box里é¢æ‰€æœ‰divä¸å—体色为红è‰ÔŒ¼Œ½W¬äºŒè¡Œå’Œ½W¬ä¸‰è¡Œéƒ½ç”¨classé‡æ–°å®šä¹‰äº†è‡ªíw«divçš„å—体色ä¸ø™“è‰ÔŒ¼Œä¸åŒçš„是åQŒç¬¬äºŒè¡Œæœ«ä‹É用importantåQŒè€Œç¬¬ä¸‰è¡Œä½¿ç”¨äº†ï¼
默认情况下，class的优先çñ”ž®äºŽidåQŒæ‰€ä»¥ï¼Œ½W¬äºŒè¡Œä¸å³ä‹É用classé‡å®šä¹‰äº†è‡ªèínæ ·å¼åQŒä¹Ÿæ— 法生效åQŒæ‰€ä»¥ç‘ô承父¾U§å±žæ€§ï¼Œ˜q™è¡Œå—还是红è‰ÔŒ¼
但是åQŒç¬¬ä¸‰è¡Œä¸ï¼Œç”¨äº†importantæå‡ä¼˜å…ˆ¾U§ï¼ˆæˆ–看æˆå¼ºåˆ‰™‡å®šä¹‰åQ‰ï¼Œæ‰€ä»¥è¿™é‡Œçš„css得以生效åQŒè¿™è¡Œå—å˜äؓ了è“è‰ÔŒ¼
从这个例å，得以è¯æ˜ŽåQ?STRONG>ie对importantçš„åƈä¸æ˜¯ä¸æ”¯æŒï¼
那么ä¸ÞZ»€ä¹ˆå¾ˆå¤šäh都说ieä¸è®¤è¯†å®ƒå‘¢ï¼Ÿæˆ‘想应该是大家实战ä¸å¯èƒ½éƒ½æ²¡æœ‰é‡åˆîC¾‹åä¸çš„情况： å½“ä½ æƒÏxå‡class的优先çñ”时怎么办？
也就是说大家å¯èƒ½éƒ½å¿½ç•¥äº†å®ƒçš„˜q™ä¸€ä½œç”¨åQŒåªäº†è§£åœ¨å‘½åäØ“åŒä¸€ä¸ªå…ƒç´ çš„CSS代ç å—ä¸åQŒç”¨å®ƒæ¥æå‡æŽ’列™åºåºç›¸å¯¹é å‰çš„代ç 的优先¾U§ï¼ˆä¾‹ä¸€åQ‰ï¼
通过上边两个例ååQŒå¾—以æ€È»“åQ?BR>
importantå¯?nbsp;ä¸€ä¸ªè‰¯å¥½ï¼ˆæˆ–è€…æ˜¯æ ‡å‡†åQ‰çš„‹¹è§ˆå™¨æ¥è¯ß_¼Œä¸ä»…仅是从顺åºä¸Šæå‡ä»£ç 的优先çñ”åQŒè¿˜å¯ä»¥ç”¨æ¥æå‡class的优先çñ”åQˆæ¯”如firefoxåQ‰ï¼Œä½†æ˜¯ä»ŽIE对å‰è€…çš„ä¸æ”¯æŒå¯ä»¥çœ‹å‡ºï¼Œ˜q™åªæ˜¯IE的一大BUGåQŒè€Œä¸èƒ½è¯´å®ƒâ€œä¸è®¤è¯†ã€ä¸æ”¯æŒâ€ï¼
然而，ä¸ç®¡æ€Žä¹ˆæ øP¼ŒIE的这一大BUG帮助我们解决了很多兼å®ÒŽ€§é—®é¢˜ï¼Œ˜q™æ˜¾ç„¶ä¸æ˜¯äšgå事åQ?BR>
Raven 2006-03-09 03:19 å‘表评论
]]><div id="mainBox">
<div id="leftbox"></div>
</div id="rightbox"></div>
</div>
一个大的DIVåQˆä»£ç ä¸çš„“mainBoxâ€ï¼‰é‡Œï¼ŒåµŒå¥—两个ž®DivåQŒå…¶ä¸ç¬¬ä¸€ä¸ªfloat:leftåQŒç¬¬äºŒä¸ªfloat:rightåQŒç»“æžœå‘玎ͼŒåŽŸæ¥å¤§çš„DIV的背景色没有了，其实是内容äØ“½Iºæ‰€è‡ß_¼Œå› äؓ内部的这两个ž®div都æÕQ动到了MainBox的上层（z-indexåQ‰ã€?BR>
解决办法很简å•ï¼Œ¾l™mainBoxä¹ŸåŠ ä¸Šä¸€ä¸?nbsp; float: left ã€?/FONT>
Raven 2006-03-08 08:11 å‘表评论
]]>