梦之都
CSS教程
,
list-style-position
示例.
内部模式
内部模式 inside
梦之都 XHTML 教程.
梦之都 CSS 教程.
梦之都 JAVASCRIPT 教程.
外部模式
外部模式 outside
梦之都 XHTML 教程.
梦之都 CSS 教程.
梦之都 JAVASCRIPT 教程.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS list-style-position 属性示例</title> <style type="text/css" media="all"> ul#inside { list-style-position: inside; list-style-image: url("/images/list-orange.png"); } ul#outside { list-style-position: outside; list-style-image: url("/images/list-green.png"); } p { padding: 0; margin: 0; } li { border:1px solid green; } </style> </head> <body> <p>梦之都 <a href="http://www.dreamdu.com/css/">CSS教程</a>,<strong><a href="http://www.dreamdu.com/css/property_list_style_position/">list-style-position</a></strong>示例.</p> <p>内部模式</p> <ul id="inside"> <li>内部模式 inside</li> <li>梦之都 XHTML 教程.</li> <li>梦之都 CSS 教程.</li> <li>梦之都 JAVASCRIPT 教程.</li> </ul> <p>外部模式</p> <ul id="outside"> <li>外部模式 outside</li> <li>梦之都 XHTML 教程.</li> <li>梦之都 CSS 教程.</li> <li>梦之都 JAVASCRIPT 教程.</li> </ul> </body> </html>