홈 > 웹사이트 구축 도구 > 프런트 엔드 기술

CSS UL, ol, DL 차이

출처: 인터넷
작성자: 사용자
키워드: 웹 페이지 제작 CSS 자습서
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

HTML은 리스트의 3 종류: 목록 UL 목록 ol, 주문 순서 없이 정의 목록 DL.

1. 순서 없는 목록:
< ul >
< 리 >... < /li >
< 리 >... < /li >
< /ul >

UL Li 메뉴에 대 한 샘플을 참조 하십시오

* {margin: 0; padding: 0;}


ul {목록-스타일: 없음;


Ul #nav {배경: #f3c; 높이: 245px; 폭: 133px; 여백-가기: 10px;}


Ul #nav Li는 {디스플레이: 블록; 높이: 20px; 폭: 133px; 텍스트-정렬: 센터; padding: 10px 0;}

HTML 코드

&lt; ul id "탐색" = &gt;


&lt; li &gt;&lt;는 href = "clothes.jsp 자습서" &gt; &lt; /a &gt;&lt; /li &gt;
의류

&lt; li &gt;&lt;는 href = "food.jsp" &gt; 음식 &lt; /a &gt;&lt; /li &gt;


&lt; li &gt;&lt;는 href = "digital.jsp" &gt; 디지털 &lt; /a &gt;&lt; /li &gt;


&lt; li &gt;&lt;는 href = "computer.jsp" &gt; 컴퓨터 공급 &lt; /a &gt;&lt; /li &gt;


&lt; li &gt;&lt;는 href = "makeup.jsp" &gt; 일용품 &lt; /a &gt;&lt; /li &gt;


&lt; li &gt;&lt;는 href = "decorations.jsp" &gt; &lt; /a &gt;&lt; /li &gt;
장식품

&lt; /ul &gt;

UL은 가장 일반적으로 사용 되는 목록, 일반 뉴스 목록 UL을 통해 이루어집니다. 리는 순차, 관계의 나란히. 목록-스타일의 스타일을 설정 하 여 전면 디스플레이 포인트 또는 서클 리의 제어할 수 있습니다 (자세한 내용은 온라인 설명서를 참조 하십시오) 등. 특정 작업 목록 앞에 있는 작은 아이콘 배경 이미지에 의해 구현 됩니다.

2. 정렬 된 목록:
< ol >
< 리 >... < /li >
< 리 >... < /li >
< 리 >... < /li >
< /ol >


적은 순차 테이블 있다 실제로, 이름에서 알 수 있듯이, Li의 내부 순서입니다. "1,2,3" 또는 다른 표시 된 순서 대로 리 앞 (온라인 설명서를 참조 하십시오)를 구현 하는 설정을 사용할 수 있습니다.

1. 정의 목록:
< dl >
< dt > 제목 < /dt >
< dd > 콘텐츠 1 < /dd >
< dd > 콘텐츠 2 < /dd >
< /dl >

본 사이트에 포함된 콘텐츠는 Alibaba Cloud 중국 웹사이트 사용자들이 자발적으로 제공한 것입니다. 본 웹사이트는 다국어로 기계 기반 번역을 제공하며, 해당 번역에 대한 소유권을 갖거나 관련 법적 책임을 부담하지 않습니다. 커뮤니티에서 표절 사례를 발견한 경우 info-contact@alibabacloud.com으로 관련 증거를 첨부하여 이메일을 보내주시기 바랍니다. 당사 직원이 영업일 기준 5일 내에 연락 드리도록 하겠습니다. 권리를 침해하는 콘텐츠는 확인 즉시 삭제됩니다.

관련 키워드 :
html ul ol html ul ol li css ul ul css ol li css ol style ol list css css ol list style
관련 문서
입력된 상자 너비에 자동으로 적응
CSS3 등심을 지원 하기 위해 IE를 사용 하는 방법
CSS 위치 사용 및 결과 페이지 변형 JS 처리 방법
CSS 구현 투명 효과
텍스트-정렬의 솔루션: i e 8에서 왼쪽 센터
Div + css 얼마나 멀리 갈 수 있습니까?

연락처

이 페이지의 내용은 인터넷에서 가져온 것이므로 Alibaba Cloud의 공식 의견이 아닙니다.이 페이지에서 언급 된 제품 및 서비스는 Alibaba Cloud와는 관련이 없으므로이 페이지의 내용이 골칫거리 인 경우 저희에게 알려주십시오. 우리는 5 일 근무일 이내에 이메일을 처리 할 것입니다.

커뮤니티에서 표절 사례를 발견한 경우 info-contact@alibabacloud.com 으로 관련 증거를 첨부하여 이메일을 보내주시기 바랍니다. 당사 직원이 영업일 기준 5일 내에 연락 드리도록 하겠습니다.

뜨거운 기사

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More