CSS: 목록 스타일 유형과 목록 스타일 이미지의 차이점에 대한 자세한 설명
- 黄舟원래의
- 2017-06-29 13:40:252610검색
CSS List
순서가 지정되지 않은 목록ff6d136ddc5fdfeffaf53ff6ee95f185에서 목록 항목 표시는 각 목록 항목 옆에 나타나는 점입니다.
순서 목록에서 기호는 문자, 숫자 또는 다른 계산 시스템의 기호일 수 있습니다.
list-style-type: 목록 f964eb04491190706bfb6a30d1238d5f 스타일 속성
ul.circle {list-style-type:circle} /*无序原点marker*/
ul.square {list-style-type:square} /*无序方点marker*/
ol.upper-roman {list-style-type:upper-roman} /*大写罗马排序*/
ol.lower-alpha {list-style-type:lower-alpha} /*小写字母排序*//*其他属性值：*/
/*‘disc’是实心圆------‘decimal'阿拉伯数字-----'lower-roman'小写罗马--lower-latin小写拉丁----upper-latin大写拉丁*/ <pre name="code" class="html">
<style type="text/css">
ul.circle {list-style-type:<span style="background-color: rgb(255, 255, 102);">circle</span>}
ul.square {list-style-type:<span style="background-color: rgb(255, 255, 51);">square</span>}
ol.upper-roman {list-style-type:<span style="background-color: rgb(102, 255, 153);">upper-roman</span>}
ol.lower-alpha {list-style-type:<span style="background-color: rgb(102, 255, 153);">lower-alpha</span>}
</style>
</head>
<body>
<p>Type circle:</p>
<span style="background-color: rgb(255, 0, 0);"><ul class="circle"></span>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<p>Type square:</p>
<span style="background-color: rgb(255, 0, 0);"><ul class="square"></span>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li></ul> <p>Type upper-roman:</p> <span style="background-color: rgb(255, 204, 204);"><ol class="upper-roman"></span> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ol> <p>Type lower-alpha:</p> <span style="background-color: rgb(255, 204, 204);"><ol class="lower-alpha"></span> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ol>
<html>
<head>
<style type="text/css">
ul
{
list-style-image: url('/i/eg_arrow.gif')
}
</style>
</head>
<body>
<ul>
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ul>
</body>
</html>
작동 효과 :
이 속성은 이미지를 순서가 있거나 순서가 없는 목록 항목의 기호로 지정합니다. 목록 항목의 내용을 기준으로 한 이미지의 위치는 일반적으로
list-style-position속성을 사용하여 제어됩니다. 참고: 이미지를 사용할 수 없고
마커를 사용하여 목록으로 표시할 수 있는 경우 항상 "list-style-type" 속성을 지정하세요.
이 속성은 이미지를 순서가 있거나 순서가 없는 목록 항목의 기호로 지정합니다. 목록 항목의 내용을 기준으로 이미지의 배치는 일반적으로 list-style-position 속성을 사용하여 제어됩니다.
참고: 이미지를 사용할 수 없는 경우 항상 "list-style-type" 속성을 지정하세요.
실제 사용에서는 편의를 위해 위의 세 가지 속성 값을 목록 스타일로 결합할 수 있습니다. 예:
li {list-style : url(example.gif) square inside}목록 스타일 값은 다음 목록에 나열될 수 있습니다. 임의의 순서이며, 값을 지정하면 다른 값은 기본값으로 나열됩니다. list-style-type의 기본값은 "disc"이고 list-style-position의 기본값은 "outside"입니다. "
위 내용은 CSS: 목록 스타일 유형과 목록 스타일 이미지의 차이점에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!