CSS에서 ul(목록 스타일)이란 무엇입니까? ul 사용 방법(코드 예)

이 장에서 소개할 내용은 CSS에서 ul(목록 스타일)이 무엇인가요? ul 사용 방법(코드 예) . 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

CSS 목록 속성 기능은 다음과 같습니다.

• 순서가 지정된 목록으로 표시할 다른 목록 항목 설정

• 순서가 지정되지 않은 목록으로 표시할 다른 목록 항목 설정

• 목록 항목이 이미지로 표시되도록 설정

1. 목록

HTML에는 두 가지 유형의 목록이 있습니다.

• 순서가 지정되지 않은 목록 - 목록 항목은 특수 그래픽(예: 작은 검은색 점, 작은 상자 등)으로 표시됩니다.

  순서가 지정된 목록 - 목록 항목은 숫자나 문자로 표시됩니다.

• CSS를 사용하면 목록에 추가 스타일을 적용하고 이미지를 목록 항목 마커로 사용할 수 있습니다.

2. 다양한 목록 항목 태그

list-style-type 속성은 목록 항목 태그의 유형을 지정합니다.

ul.a {list-style-type: circle;} /*无序，空心圆圈*/
ul.b {list-style-type: square;} /*无序，实现四方形*/
ol.c {list-style-type: upper-roman;} /*有序，罗马数字排序*/
ol.d {list-style-type: lower-alpha;} /*有序，小写字母排序*/

list-style-type 속성 값:

3. 목록 항목으로 태그 이미지

list-style-image 목록 항목 태그에 대한 이미지를 지정하려면 list-style-image 속성을 사용하세요.

ul{ list-style-image: url('sqpurple.gif');}

위의 예는 모든 브라우저에서 동일하게 표시되지 않습니다. IE와 Opera는 이미지 태그를 더 잘 표시합니다. Firefox, Chrome 및 Safari보다 조금 더 높습니다.

모든 브라우저에 동일한 이미지 로고를 배치하려면 브라우저 호환성 솔루션을 사용해야 합니다. 프로세스는 다음과 같습니다.

브라우저 호환성 솔루션:

모든 브라우저에서 마찬가지로 다음 예는 표시되는 이미지 마크업입니다.

ul
{
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}
ul li
{
    background-image: url(sqpurple.gif);
    background-repeat: no-repeat;
    background-position: 0px 5px; 
    padding-left: 14px; 
}

예제 설명:

ul:

목록 스타일 유형을 삭제 목록 항목 표시 없음으로 설정

• 패딩과 여백을 0px로 설정(브라우저 호환성)

• ul 모든 li in:

이미지의 URL을 설정하고 한 번만 표시되도록 설정합니다(중복 없음)

• 필요한 위치에 이미지를 배치합니다(왼쪽 0px, 위쪽 및 아래쪽 5px)

• padding-left 속성 사용 텍스트는 다음과 같습니다. 목록에 배치
4. 콘텐츠를 기준으로 목록 마커 그리기

list-style-position 속성은 개체의 콘텐츠를 기준으로 목록 항목 마커를 그리는 방법을 나타냅니다. 속성 값:

Effect :

5. 목록 - 단축 속성

모든 목록 속성은 단일 속성으로 지정할 수 있습니다. 이를 단축 속성이라고 합니다.

목록에 약어 속성을 사용하고 목록 스타일 속성은 다음과 같이 설정됩니다.

ul{list-style: square url("sqpurple.gif");}

다음 속성을 순서대로 설정할 수 있습니다.

list-style-type

• list-style-position

• list-style- image

• 위 값 중 하나가 누락되고 나머지는 여전히 지정된 순서대로 되어 있어도 문제가 되지 않습니다.

6. 모든 CSS 목록 속성

7. 샘플 코드

/*无序列表*/
ul.a {list-style-type:circle;} /*无序，空心圆“○”*/
ul.b {list-style-type:disc;} /*无序，实心圆“●”*/
ul.c {list-style-type:square;}/*无序，实心正方形“■”*/

/*有序列表*/
ol.d {list-style-type:armenian;} /*有序，传统的亚美尼亚数字*/
ol.e {list-style-type:cjk-ideographic;} /*有序，浅白的表意数字*/
ol.f {list-style-type:decimal;} /*有序，数字1、2、3*/
ol.g {list-style-type:decimal-leading-zero;} /*有序，数字01、02、03*/
ol.h {list-style-type:georgian;} /*有序，传统的乔治数字*/
ol.i {list-style-type:hebrew;} /*有序，传统的希伯莱数字*/
ol.j {list-style-type:hiragana;} /*有序，日文平假名字符*/
ol.k {list-style-type:hiragana-iroha;} /*有序，日文平假名序号*/
ol.l {list-style-type:katakana;} /*有序，日文片假名字符*/
ol.m {list-style-type:katakana-iroha;} /*有序，日文片假名序号*/
ol.n {list-style-type:lower-alpha;} /*有序，小写英文字母a、b、c……*/
ol.o {list-style-type:lower-greek;} /*有序，基本的希腊小写字母*/
ol.p {list-style-type:lower-latin;} /*有序，小写拉丁字母*/
ol.q {list-style-type:lower-roman;} /*有序，小写罗马数字i、ii、iii……*/
ol.r {list-style-type:upper-alpha;} /*有序，大写英文字母A、B、C……
*/
ol.s {list-style-type:upper-latin;} /*有序，大写拉丁字母*/
ol.t {list-style-type:upper-roman;} /*有序，大写罗马数字I、II、III……*/

ol.u {list-style-type:none;}/*不使用项目符号*/
ol.v {list-style-type:inherit;} /*继承*

위 내용은 CSS에서 ul(목록 스타일)이란 무엇입니까? ul 사용 방법(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!