CSS Áбí
CSS ÁбíÊôÐÔÔÊÐíÄã·ÅÖᢸıäÁбíÏî±êÖ¾£¬»òÕß½«Í¼Ïñ×÷ΪÁбíÏî±êÖ¾¡£
CSS Áбí
´ÓijÖÖÒâÒåÉϽ²£¬²»ÊÇÃèÊöÐÔµÄÎı¾µÄÈκÎÄÚÈݶ¼¿ÉÒÔÈÏΪÊÇÁÐ±í¡£ÈË¿ÚÆÕ²é¡¢Ì«Ñôϵ¡¢¼ÒÆ×¡¢²Î¹Û²Ëµ¥£¬ÉõÖÁÄãµÄËùÓÐÅóÓѶ¼¿ÉÒÔ±íʾΪһ¸öÁбí»òÕßÊÇÁбíµÄÁÐ±í¡£
ÓÉÓÚÁбíÈç´Ë¶àÑù£¬ÕâʹµÃÁбíÏàµ±ÖØÒª£¬ËùÒÔ˵£¬CSS ÖÐÁбíÑùʽ²»Ì«·á¸»È·ÊµÊÇÒ»´óº¶Ê¡£
ÁбíÀàÐÍ
ÒªÓ°ÏìÁбíµÄÑùʽ£¬×î¼òµ¥£¨Í¬Ê±Ö§³Ö×î³ä·Ö£©µÄ°ì·¨¾ÍÊǸıäÆä±êÖ¾ÀàÐÍ¡£
ÀýÈ磬ÔÚÒ»¸öÎÞÐòÁбíÖУ¬ÁбíÏîµÄ±êÖ¾ (marker) ÊdzöÏÖÔÚ¸÷ÁбíÏîÅԱߵÄÔ²µã¡£ÔÚÓÐÐòÁбíÖУ¬±êÖ¾¿ÉÄÜÊÇ×Öĸ¡¢Êý×Ö»òÁíÍâijÖÖ¼ÆÊýÌåϵÖеÄÒ»¸ö·ûºÅ¡£
ÒªÐÞ¸ÄÓÃÓÚÁбíÏîµÄ±êÖ¾ÀàÐÍ£¬¿ÉÒÔʹÓÃÊôÐÔ list-style-type£º
ul {list-style-type : square}
ÉÏÃæµÄÉùÃ÷°ÑÎÞÐòÁбíÖеÄÁбíÏî±êÖ¾ÉèÖÃΪ·½¿é¡£
ÁбíÏîͼÏñ
ÓÐʱ£¬³£¹æµÄ±êÖ¾ÊDz»¹»µÄ¡£Äã¿ÉÄÜÏë¶Ô¸÷±ê־ʹÓÃÒ»¸öͼÏñ£¬Õâ¿ÉÒÔÀûÓà list-style-image ÊôÐÔ×öµ½£º
ul li {list-style-image : url(xxx.gif)}
Ö»ÐèÒª¼òµ¥µØÊ¹ÓÃÒ»¸ö url() Öµ£¬¾Í¿ÉÒÔʹÓÃͼÏñ×÷Ϊ±êÖ¾¡£
Áбí±ê־λÖÃ
CSS2.1 ¿ÉÒÔÈ·¶¨±êÖ¾³öÏÖÔÚÁбíÏîÄÚÈÝÖ®Í⻹ÊÇÄÚÈÝÄÚ²¿¡£ÕâÊÇÀûÓà list-style-position Íê³ÉµÄ¡£
¼òдÁбíÑùʽ
Ϊ¼òµ¥Æð¼û£¬¿ÉÒÔ½«ÒÔÉÏ 3 ¸öÁбíÑùʽÊôÐԺϲ¢ÎªÒ»¸ö·½±ãµÄÊôÐÔ£ºlist-style£¬¾ÍÏñÕâÑù£º
li {list-style : url(example.gif) square inside}
list-style µÄÖµ¿ÉÒÔ°´ÈκÎ˳ÐòÁгö£¬¶øÇÒÕâЩֵ¶¼¿ÉÒÔºöÂÔ¡£Ö»ÒªÌṩÁËÒ»¸öÖµ£¬ÆäËüµÄ¾Í»áÌîÈëÆäĬÈÏÖµ¡£
CSS ÁбíʵÀý£º
- ÔÚÎÞÐòÁбíÖеIJ»Í¬ÀàÐ͵ÄÁбí±ê¼Ç
- ±¾ÀýÑÝʾÔÚCSSÖв»Í¬ÀàÐ͵ÄÁбíÏî±ê¼Ç¡£
- ÔÚÓÐÐòÁбíÖв»Í¬ÀàÐ͵ÄÁбíÏî±ê¼Ç
- ±¾ÀýÑÝʾÔÚCSSÖв»Í¬ÀàÐ͵ÄÁбíÏî±ê¼Ç¡£
- ËùÓеÄÁбíÑùʽÀàÐÍ
- ±¾ÀýÑÝʾÔÚCSSÖÐËùÓв»Í¬ÀàÐ͵ÄÁбíÏî±ê¼Ç¡£
- ½«Í¼Ïñ×÷ΪÁбíÏî±ê¼Ç
- ±¾ÀýÑÝʾÈçºÎ½«Í¼Ïñ×÷ΪÁбíÏî±ê¼Ç¡£
- ·ÅÖÃÁбí±ê¼Ç
- ±¾ÀýÑÝʾÔںδ¦·ÅÖÃÁбí±ê¼Ç¡£
- ÔÚÒ»¸öÉùÃ÷Öж¨ÒåËùÓеÄÁбíÊôÐÔ
- ±¾ÀýÑÝʾ½«ËùÓÐÕë¶ÔÁбíµÄÊôÐÔÉèÖÃÓÚÒ»¸ö¼òдÊôÐÔ¡£
CSS ÁбíÊôÐÔ(list)
ÊôÐÔ | ÃèÊö |
---|---|
list-style | ¼òдÊôÐÔ¡£ÓÃÓÚ°ÑËùÓÐÓÃÓÚÁбíµÄÊôÐÔÉèÖÃÓÚÒ»¸öÉùÃ÷ÖС£ |
list-style-image | ½«Í¼ÏóÉèÖÃΪÁбíÏî±êÖ¾¡£ |
list-style-position | ÉèÖÃÁбíÖÐÁбíÏî±êÖ¾µÄλÖᣠ|
list-style-type | ÉèÖÃÁбíÏî±êÖ¾µÄÀàÐÍ¡£ |
marker-offset |