æ¹æ³ä¸ï¼
说æï¼æ¬æ¹æ³ä½¿ç¨CSS3ï¼æ å¾çï¼å ¼å®¹åç§webkitç³»æµè§å¨ï¼åæ¶å ¼å®¹IE8+ãå ä¸å¾ï¼
1.é¦å æ¯HTML代ç ï¼æ¯è¾ç®åï¼åªéè¦ä¸ä¸ªç®åçulåliå³å¯
代ç å¦ä¸ | å¤å¶ä»£ç |
|
2.æ¥ä¸æ¥æ¯CSS代ç ï¼é¦å æ¯è®¾å®å¸¸è§çliæµ®å¨åaæ ç¾ç¾åï¼
代ç å¦ä¸ | å¤å¶ä»£ç |
#crumbs ul li { |
æ¥ä¸æ¥å°±æ¯é¢å å±å¯¼èªçå ³é®å°æ¹ï¼éè¿beforeåafteræ¥å建ç®å¤´ææï¼
代ç å¦ä¸ | å¤å¶ä»£ç |
#crumbs ul li a:after { |
æåæ¸ é¤æµ®å¨ï¼
代ç å¦ä¸ | å¤å¶ä»£ç |
.fixed { |
æ¹æ³äº
代ç å¦ä¸ | å¤å¶ä»£ç |
*{margin:0;padding:0;list-style-type:none;} a,img{border:0;} body{font:12px/180% Arial, Helvetica, sans-serif, "æ°å®ä½";} /* demo */ .demo{width:600px;margin:100px auto;background:#f0f0f0;position:relative;} .demo ul{height:32px;overflow:hidden;} .demo li{float:left;width:200px;text-align:center;position:relative;z-index:2;font-weight:bold;font-size:14px;line-height:32px;} .demo li em{position:absolute;right:-24px;top:-8px;width:0;height:0;line-height:0;border-width:24px 0 24px 24px;border-color:transparent transparent transparent #fff;border-style:dashed dashed dashed solid;} .demo li i{position:absolute;right:-16px;top:0;width:0;height:0;line-height:0;border-width:16px 0 16px 16px;border-color:transparent transparent transparent #f0f0f0;border-style:dashed dashed dashed solid;} .demo li.current{background:#f60;color:#fff;z-index:1;} .demo li.current i{border-color:transparent transparent transparent #f60;}
|