> 웹 프론트엔드 > CSS 튜토리얼 > CSS 목록 스타일은 무엇입니까? CSS로 목록 스타일을 설정하는 방법

CSS 목록 스타일은 무엇입니까? CSS로 목록 스타일을 설정하는 방법

不言
풀어 주다: 2018-08-18 14:05:34
원래의
4281명이 탐색했습니다.

목록의 CSS 스타일은 무엇이며 CSS 목록 스타일을 설정하는 방법은 무엇입니까? 다음 기사에서는 CSS 목록 스타일을 소개합니다.

1. CSS 정렬 목록(ol) 및 CSS 비정렬 목록(ul)
list.html

<!doctype html><html><head>
    <meta charset="utf-8">
    <title>列表样式</title>
    <link href="box.css" type="text/css" rel="stylesheet"></head><body>
   <p>
        <ul>
            <li>水果              <ol>
                <li>苹果</li>
                <li>香蕉</li>
                <li>梨子</li>
              </ol>
            </li>
        </ul>
    </p></body></html>
로그인 후 복사

2. CSS 목록 레이블 스타일 list-style-type
속성 값:
원; 속이 빈 원
디스크; 채워진 원
십진수
list.css

 ul>li{
     list-style-type:circle;
     }
ul>li>ol>li{
    list-style-type:disc;
    }
로그인 후 복사

3. CSS 라벨 스타일 list-style-position 표시 방법
속성값: 외부(텍스트 외부, 기본값)
inside (텍스트 포함)
list.css

ul{
    text-align: center;    
    list-style-position:outside;
    }
ul>li{
    list-style-type:circle;
    }
ul>li>ol>li{
    list-style-type:disc;
    }
로그인 후 복사

관련 추천:

CSS 모든 목록 스타일 유형_html/css_WEB-ITnose

CSS: 목록 스타일(목록 항목의 로고 패턴/위치 설정) _html/ css_WEB-ITnose

가져온 스타일시트 CSS와 링크된 스타일시트 CSS의 차이점

위 내용은 CSS 목록 스타일은 무엇입니까? CSS로 목록 스타일을 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿