ホームページ > 記事 > ウェブフロントエンド > CSS：リストスタイル（ロゴパターン・リスト項目の位置を設定）_html/css_WEB-ITnose
CSS：リストスタイル（ロゴパターン・リスト項目の位置を設定）_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:52:223155ブラウズ
CSS リスト プロパティを使用してリスト項目のロゴを配置または変更したり、リスト項目のロゴとして画像を使用したりできます。
w3school からコンパイルされたコード: http://www.w3school.com.cn
レンダリング:
サンプルコード:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="Content-Language" content="zh-cn" /><title>CSS 列表样式</title><head> <style type="text/css"> body {background-color:#eaeaea} h3 {display:inline;} ul.squareType {list-style-type:square} ul.imageStyle {list-style-image:url(images/red_icon.png);} ul.defPositionInside {list-style-position:inside} ul.defPositionOutside {list-style-position:outside} /*设置list-style-image之后，list-style-type将无效。*/ ul.defStyle {list-style:url(images/red_icon.png) square inside} </style></head><body> <p>CSS 列表属性允许你放置、改变列表项标志，或者将图像作为列表项标志。</p> <hr/> <h3>(一)设置列表的列表项标志：list-style-type</h3> <ul class="squareType"> <li>苹果</li> <li>橘子</li> <li>香蕉</li> </ul> <h3>(二)设置自定义图标为列表的列表项标志：list-style-image</h3> <ul class="imageStyle"> <li>苹果</li> <li>橘子</li> <li>香蕉</li> </ul> <h3>(三)设置列表项标志的位置:list-style-position</h3> <h4>(1)inside</h4> <ul class="defPositionInside"> <li>苹果</li> <li>橘子</li> <li>香蕉</li> </ul> <h4>(2)outside</h4> <ul class="defPositionOutside"> <li>苹果</li> <li>橘子</li> <li>香蕉</li> </ul> <h3>(四)将以上3个列表样式属性合并为一个属性：list-style</h3> <ul class="defStyle"> <li>苹果</li> <li>橘子</li> <li>香蕉</li> </ul></body></html> 声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。