Óà UL ÖÆ×÷²Ëµ¥ÏÖÔڷdz£Á÷ÐУ¬ÄÇÎÒÃÇÒ²´Õ´ÕÈÈÄÖ£¬µÚÒ»½²¾Í˵˵Óà UL ÖÆ×÷µ¼º½²Ëµ¥µÄ·½·¨£¬ÕâÒ»½²ÊÇÈëÃŰ棬ֻÊÇʵÏÖ»ù±¾¹¦ÄÜ£¬»¶Ó¸÷λ·¢²¼×Ô¼ºµÄʵÏÖ·½Ê½¡£
ÎÒÃÇÏȶ¨Ò»Ï HTML ´úÂ룺
<ul id="menu">
<li><a href="http://www.codebit.cn">CodeBit.cn</a></li>
<li><a href="http://www.yitu.org">YITU.org</a></li>
<li><a href="http://www.yahoo.com">Yahoo.com</a></li>
<li><a href="http://www.google.com">Google.com</a></li>
</ul>
Óà UL ×öµ¼º½²Ëµ¥Ö®ËùÒÔ±»¹ã·º²ÉÓã¬ÓŵãºÜÃ÷ÏÔ£¬´úÂëÇåÎú£¬²¼¾Ö·½±ã¡£
ÏÂÃæÎÒÃǾͿªÊ¼Ð´ CSS £¬ÈÃÔ±¾×ÝÏòÏÔʾµÄÄÚÈÝ£¬ºá×ÅÅÅ£º
ÉèÖÃһЩ¹«¹²Ñùʽ£º
´úÂë:
<style type="text/css">
#menu {
font:12px verdana, arial, sans-serif; /* ÉèÖÃÎÄ×Ö´óСºÍ×ÖÌåÑùʽ */
}
#menu, #menu li {
list-style:none; /* ½«Ä¬ÈϵÄÁбí·ûºÅÈ¥µô */
padding:0; /* ½«Ä¬ÈϵÄÄڱ߾àÈ¥µô */
margin:0; /* ½«Ä¬ÈϵÄÍâ±ß¾àÈ¥µô */
}
</style>
ÒòΪÎÒÃÇÏÖÔÚÕâ¸öÊǶÀÁ¢½²½â£¬ËùÒÔÐèÒªÉèÖÃһЩ¹«¹²Ñùʽ£¬È ......
CSSÖеĹâ±êÀàÐÍ
Óï·¨£º
¡¡¡¡cursor : auto | all-scroll | col-resize| crosshair | default | hand | move | help | no-drop | not-allowed | pointer | progress | row-resize | text | vertical-text | wait | *-resize | url ( url )
¡¡¡¡È¡Öµ£º
auto
:¡¡
ĬÈÏÖµ¡£ä¯ÀÀÆ÷¸ù¾Ýµ±Ç°Çé¿ö×Ô¶¯È·¶¨Êó±ê¹â±êÀàÐÍ¡£
all-scroll
:¡¡
IE6.0
ÓÐÉÏÏÂ×óÓÒËĸö¼ýÍ·£¬ÖмäÓÐÒ»¸öÔ²µãµÄ¹â±ê¡£ÓÃÓÚ±êÊ¾Ò³Ãæ¿ÉÒÔÏòÉÏÏÂ×óÓÒÈκη½Ïò¹ö¶¯¡£
col-resize
:¡¡
IE6.0
ÓÐ×óÓÒÁ½¸ö¼ýÍ·£¬ÖмäÓÉÊúÏß·Ö¸ô¿ªµÄ¹â±ê¡£ÓÃÓÚ±êʾÏîÄ¿»ò±êÌâÀ¸¿ÉÒÔ±»Ë®Æ½¸Ä±ä³ß´ç¡£
crosshair
:¡¡
¼òµ¥µÄÊ®×ÖÏß¹â±ê¡£
default
:¡¡
¿Í»§¶Ëƽ̨µÄĬÈϹâ±ê¡£Í¨³£ÊÇÒ»¸ö¼ýÍ·¡£
hand
:¡¡
ÊúÆðÒ»Ö»ÊÖÖ¸µÄÊÖÐιâ±ê¡£¾ÍÏñͨ³£Óû§½«¹â±êÒÆµ½³¬Á´½ÓÉÏʱÄÇÑù¡£
move
:¡¡
Ê®×Ö¼ýÍ·¹â±ê¡£ÓÃÓÚ±êʾ¶ÔÏó¿É±»Òƶ¯¡£
help
:¡¡
´øÓÐÎʺűê¼ÇµÄ¼ýÍ·¡£ÓÃÓÚ±êʾÓаïÖúÐÅÏ¢´æÔÚ¡£
no-drop
:¡¡
IE6.0
´øÓÐÒ»¸ö±»Ð±Ï߹ᴩµÄԲȦµÄÊÖÐιâ±ê¡£ÓÃÓÚ±êʾ±»ÍÏÆðµÄ¶ÔÏó²»ÔÊÐíÔÚ¹â±êµÄµ±Ç°Î»Öñ»·ÅÏ¡£
not-allowed
:¡¡
IE6.0
½ûÖ¹±ê¼Ç(Ò»¸ö±»Ð±Ï߹ᴩµÄԲȦ)¹â±ê¡£ÓÃÓÚ±êʾÇëÇóµÄ²Ù×÷²»ÔÊÐí±»Ö´ÐС£ ......
¡¡¡¡CSSѧÆðÀ´²¢²»ÄÑ£¬µ«ÔÚ´óÐÍÏîÄ¿ÖУ¬¾Í±äµÃÄÑÒÔ¹ÜÀí£¬ÌØ±ðÊDz»Í¬µÄÈËÔÚCSSÊéд·ç¸ñÉÏÉÔÓв»Í¬£¬ÍŶÓÉϾ͸ü¼ÓÄÑÒÔ¹µÍ¨£¬Îª´Ë×ܽáÁËһЩÈçºÎʵÏÖ¸ßЧÕû½àµÄCSS´úÂëÔÔò£º
1. ʹÓÃResetµ«²¢·ÇÈ«¾ÖReset
¡¡¡¡²»Í¬ä¯ÀÀÆ÷ÔªËØµÄĬÈÏÊôÐÔÓÐËù²»Í¬£¬Ê¹ÓÃReset¿ÉÖØÖÃä¯ÀÀÆ÷ÔªËØµÄһЩĬÈÏÊôÐÔ£¬ÒÔ´ïµ½ä¯ÀÀÆ÷µÄ¼æÈÝ¡£µ«ÐèҪעÒâµÄÊÇ£¬Ç벻ҪʹÓÃÈ«¾ÖReset£º
view source
< id="highlighter_949558_clipboard" title="copy to clipboard" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="16" height="16" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" type="application/x-shockwave-flash">
print?
*{ margin:0; padding:0; }
¡¡¡¡Õâ²»½ö½öÒòΪËüÊÇ»ºÂýºÍµÍЧÂʵķ½·¨£¬¶øÇÒ»¹»áµ¼ÖÂһЩ²»±ØÒªµÄÔªËØÒ²ÖØÖÃÁËÍâ±ß¾àºÍÄڱ߾ࡣÔڴ˽¨Òé²Î¿¼YUI ResetºÍEric MeyerµÄ×ö·¨¡£ÎÒ¸úEric MeyerµÄ¹ÛµãÏàͬ£¬Reset²¢²»ÊÇÒ»³É²»±äµÄ£¬¾ßÌ廹ÐèÒª¸ù¾ÝÏîÄ¿µÄ²»Í¬ÐèÇó×öÊʵ±µÄÐ޸ģ¬ÒÔ´ïµ½ä¯ÀÀÆ÷µÄ¼æÈݺͲÙ×÷ÉϵıãÀûÐÔ¡£ÎÒʹÓõÄResetÈçÏÂ:
view source
< id="highlighter_979617_clipboard" title="copy to clipbo ......
¡¡¡¡½üÄêÀ´£¬CSS²»Í¸Ã÷ËãµÃÉÏÊÇÒ»ÖÖÏ൱Á÷Ðеļ¼Êõ£¬µ«ÔÚ¿çä¯ÀÀÆ÷Ö§³ÖÉÏ£¬¶ÔÓÚ¿ª·¢ÕßÀ´Ëµ£¬¿ÉÒÔ˵ÊÇÒ»¼þÁîÈËÍ·ÌÛµÄÊÂÇ顣Ŀǰ»¹Ã»ÓÐÒ»¸öͨÓ÷½·¨£¬ÒÔÈ·±£Í¸Ã÷¶ÈÉèÖÿÉÒÔÔÚĿǰʹÓõÄËùÓÐä¯ÀÀÆ÷ÉÏÓÐЧ¡£
¡¡¡¡ÕâÆª»ã×ÜÖ÷ÒªÊÇÌṩһЩCSS²»Í¸Ã÷µÄÏêϸ½éÉÜ£¬´úÂëʾÀýºÍ½âÊÍ£¬ÒÔʵÏÖÕâÏîÓÐÓõÄCSS¼¼ÊõÔÚÄúµÄÏîÄ¿ÖмæÈÝËùÓÐä¯ÀÀÆ÷¡£
¡¡¡¡¹ØÓÚCSS ͸Ã÷¶È£¬ÓÐÒ»µãÐèҪעÒâµÄÊÇ£¬ËüËäȻʹÓÃÁ˺ܶàÄ꣬µ«ËüÒ»Ö±ÒÔÀ´¶¼²»ÊÇÒ»¸ö±ê×¼ÊôÐÔ¡£ËüÊÇÒ»ÖַDZê×¼¼¼Êõ£¬Ó¦¸ÃÊÇCSS3¹æ·¶µÄÒ»²¿·Ö¡£
1. ¾ÉµÄOpacityÉèÖÃ
¡¡¡¡ÒÔÏ´úÂëÊÇFirefoxºÍSafari¾É°æ±¾ËùÐèµÄ͸Ã÷¶ÈÉèÖÃ:
#myElement {
-khtml-opacity: .5;
-moz-opacity: 0.5;
}
¡¡¡¡-khtml-opacityÉèÖÃÊÇÕë¶Ô¾É°æ±¾µÄWebkitäÖȾÒýÇæ£¬ÕâÖÖרÓÃÊôÐÔÏÖÔÚÒѾ¹ýʱÁË£¬³ý·ÇÄ㻹ÓÐÐèÒª¼æÈÝSafari 1.x.µÄÓû§¡£
µÚ¶þÐÐʹÓÃרÓÃÊôÐÔ -moz-opacityÊÇ ÎªÁ˼æÈÝMozillaäÖȾÒýÇæµÄÔçÆÚ°æ±¾£¬ÒÔ¼°×·Ëݵ½Netscape Navigator¡£Firefox 0.9ÒÔºó¾Í²»ÒªÇóʹÓÃ-moz-opacityÊôÐÔ£¬Firefox 3.5£¨ÏÖÔÚʹÓÃGeckoÒýÇæ£©ÒѾ²»ÔÚÖ§³ÖÕâ¸öÊôÐÔ¡£
2. ÔÚFirefox, Safari, ChromeºÍOperaϵÄCSS͸Ã÷¶È
¡¡¡¡ÒÔÏ´úÂëÊdzýÁËIEÍâµÄËùÓÐ ......
ä¯ÀÀÆ÷¼æÈÝ¿ÉÒÔ˵ÊÇǰ¶Ë¿ª·¢ËùÒªÃæ¶ÔµÄµÚÒ»¸öÌôÕ½£¬Ä¿Ç°ÎҵĵçÄÔÉÏÒѾ°²×°ÁË6ÖÖä¯ÀÀÆ÷£¨»ùÓÚIEÄں˵IJ»Ë㣬ÈçMaxthonµÈ£©¡£
¡¡¡¡CSS hacksÀûÓÃä¯ÀÀÆ÷µÄ©¶´À´Òþ²ØÌض¨ä¯ÀÀÆ÷µÄCSS¹æÔò¡£ÊµÏÖä¯ÀÀÆ÷¼æÈÝÖ÷ÒªÓÐÁ½ÖÖ·½Ê½Ìõ¼þÑùʽ±íºÍCSS Hacks£¨Selector Hacks¡¢Attribute Hacks£©¡£¶Ô´Ë¸ù¾ÝһЩ×ÊÁÏ»ã×ÜÁËһЩCSS Hacks·½·¨¡£
1.Ìõ¼þÑùʽ±í
ÏñÕâÑùµÄ´úÂëÄãÓ¦¸Ã¼û¹ý:
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css"href="css/ie.css" />
< ![endif]-->
PS£ºyahooµÄÄÚ²¿±àÂë×î¼Ñ×ö·¨²¢²»½¨ÒéʹÓÃÓÐÌõ¼þµÄÑùʽ±í¡£Ëü»áÔö¼Ó¶îÍâµÄƽ¾ù1»ò2¸öHTTPÏÂÔØÇëÇ󣨲ο¼ÕâÀ¡£
2. Ñ¡ÔñÆ÷Hacks£¨Selector Hacks£©
/* IE6 ¼°ÒÔÏÂ */
* html #uno { color: red }
/* IE7 */
*:first-child+html #dos { color: red }
/* IE7, FF, Saf, Opera */
html>body #tres { color: red }
/* IE8, FF, Saf, Opera (IE 6,7ÒÔÍâ) */
html>/**/body #cuatro { color: red }
/* Opera 9.27 ¼°ÒÔÏÂ, safari 2 */
html:first-child #cinco { color: red }
/* Saf ......
Óû§½çÃæ
I Like Your Color
ÊäÈëURLÈ»ºóËü»á×¥³öÆäÖеÄÑÕÉ«²¢ÓÃ16½øÖƱíʾ¡£
CSS Multi-element Rollover Generator
ʹÓÃCSSºÍÒ»¸öͼƬ´´½¨³öÒ»¸ö·×ª°´Å¥µÄÑùʽ¡£
CSS Rounded Box Generator
Ruthsarian Layouts
6¸öCSSÒ³Ãæ²¼¾ÖÄ£°å£¬°üÀ¨ÑÕÉ«¡¢±êÌâµÈ¡£
Bluerobot Layout Reservoir
2À¸ºÍ3À¸µÄCSS²¼¾Ö¿ò¼Ü
Glish CSS Layout techniques
2¡¢3¡¢ 4À¸µÄCSS²¼¾Ö¿ò¼Ü
The Layout-o-matic
ÊäÈëÒ³¿í¡¢À¸ÊýºÍpadding£¬Ëü»á×Ô¶¯Éú³ÉCSSºÍHTMLµÄ²¼¾Ö¿ò¼Ü¡£
Little Boxes
w3cn.orgÉÏÌṩµÄÄÇЩ²¼¾ÖÄ£°å
Open Source Web Design
¸÷ÖÖÃâ·ÑµÄÍêÕûÒ³ÃæÄ£°å
Web Builders’ Toolkit
¸ü¶àµÄÄ£°æ×ÊÔ´
Iconico Online CSS Scrollbar Color Changer
List-u-Like
Ò»¸öCSS²Ëµ¥Éú³ÉÆ÷£ºÇáËÉ´´½¨²ÉÓÃli²¢¼æÈݸ÷ÖÖä¯ÀÀÆ÷µÄµ¼º½²Ëµ¥¡£
Nifty Corners: ÎÞÐèͼƬµÄÔ²½Ç¾ØÐÎ
Round Corner Stone/Icon (rcsi) V1.0
ÔöÇ¿µÄÔ²½Ç¾ØÐÎ
Xylescope
ÎÞÐèÏÂÔØÆäËûÕ¾µã¾ÍÄÜÇáËÉ·ÖÎöÆäCSS´úÂë¡£
W3C Core Styles
Checkliste zur Webseitengestaltung
Testseite zur Zeilenbreite
Ò×ÓÃÐÔ¼ì²é
Accessibility Valet Demonstrator
Bobby Online S ......