CSS 컨트롤 UL LI의 스타일 분석에 대해

이 글은 주로 UL LI의 CSS 제어에 대한 스타일 분석을 소개합니다. 이제는 모든 사람과 공유합니다. 필요한 친구들이 참고할 수 있습니다.

p+CSS에서 가장 많이 사용하는 것은 ul li입니다. 뉴스 버튼 등의 데이터를 표시합니다. 다음은 여러분이 배울 수 있는 CSS ul li의 예입니다.

ec9f6427073c7877b763877a98de2cdd 
ff6d136ddc5fdfeffaf53ff6ee95f185 
25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812首页5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb 
88e04aaaafdbe45d6ad5c2fcc5b754d4bed06894275b65c1ab86501b08a632eb 
25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812博客5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb 
88e04aaaafdbe45d6ad5c2fcc5b754d4bed06894275b65c1ab86501b08a632eb 
25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812设计5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb 
88e04aaaafdbe45d6ad5c2fcc5b754d4bed06894275b65c1ab86501b08a632eb 
25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812相册5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb 
88e04aaaafdbe45d6ad5c2fcc5b754d4bed06894275b65c1ab86501b08a632eb 
25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812论坛5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb 
88e04aaaafdbe45d6ad5c2fcc5b754d4bed06894275b65c1ab86501b08a632eb 
25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812关于5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb 
929d1f5ca49e04fdcb27f9465b944689 
94b3e26ee717c64999d7867364b1b4a3

CSS:

#menu ul {list-style:none;margin:0px;} 
#menu ul li {float:left;}

설명:

#menu ul {list-style:none;margin:0px;}

list-style:none, 이 문장은 목록을 취소하기 전의 요점입니다. 이 점들.
margin:0px, 이 문장은 UL의 들여쓰기를 삭제하는 것입니다. 이렇게 하면 모든 목록 내용을 들여쓰기 해제할 수 있습니다.

#menu ul li {float:left;}

여기서 float:left의 왼쪽과 오른쪽은 내용을 같은 줄에 표시하기 위한 것이므로 float 속성(float)을 사용합니다.

CSS의 ul 및 li 스타일에 대한 자세한 설명

ul 및 li 목록은 CSS를 사용하여 페이지를 레이아웃할 때 일반적으로 사용되는 요소입니다. CSS에는 목록 성능을 구체적으로 제어하는 ​​속성이 있습니다. 일반적으로 사용되는 속성에는 목록 스타일 유형 속성, 목록 스타일 이미지 속성, 목록 스타일 위치 속성 및 목록 스타일 속성이 있습니다.

　1. List-style-type 속성

　 list-style-type 속성은 li 목록의 글머리 기호, 즉 목록 앞의 수정 사항을 정의하는 데 사용됩니다. list-style-type 속성은 상속 가능한 속성입니다. 문법 구조는 다음과 같습니다: (일반적으로 사용되는 일부 속성 값 나열)

목록 스타일 유형: none/disc/circle/square/demical/lower-alpha/upper-alpha/lower-roman/upper-roman

목록 - 스타일 유형 속성에 대한 많은 속성 값이 있습니다. 여기서는 가장 일반적으로 사용되는 속성 중 일부만 나열합니다.

none: 글머리 기호를 사용하지 마세요. 디스크: 단단한 원. 원: 속이 빈 원. 정사각형: 정사각형. demical: 아라비아 숫자. lower-alpha : 영문 소문자. upper-alpha : 영문 대문자. 소문자 로마 숫자: 소문자 로마 숫자. Upper-Roman: 대문자 로마 숫자.

　list-style-type 속성을 사용한 샘플 코드는 다음과 같습니다.

li{
list-style-type:square;}
ff6d136ddc5fdfeffaf53ff6ee95f185
25edfb22a4f469ecb59f1190150159c6这里是列表内容bed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6这里是列表内容bed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6这里是列表内容bed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689

　이 스타일을 페이지에 적용했을 때의 효과는 아래 그림과 같습니다. list-style-image 속성은 글머리 기호 대신 그림 사용을 정의하는 데 사용됩니다. 이는 상속 가능한 속성이기도 하며 구문 구조는 다음과 같습니다.

　list-style-image:none/url

　list-style-image 속성은 두 가지 값을 가질 수 있습니다.

none: 대체 없는 이미지. url: 교체할 이미지의 경로입니다.

　코드를 보세요:

li{
list-style-image:url(images/bg03.gif);}
<ul>
<li>这里是列表内容</li>
<li>这里是列表内容</li>
<li>这里是列表内容</li>
</ul>

　효과는 다음과 같습니다. list-style-position 속성은 목록에서 글머리 기호 표시 위치를 정의하는 데 사용됩니다. 상속 가능한 속성이기도 하며 구문 구조는 다음과 같습니다.

　List-style-position: inside/outside

inside: 글머리 기호가 텍스트 내부에 배치됩니다. 외부: 글머리 기호가 텍스트 외부에 배치됩니다.

　list-style-position 속성을 사용한 예는 다음과 같습니다.

li{
list-style-type:square;
list-style-position:outside;}
<ul>
<li>这里是使用list-style-position属性值为outside的示例。请注意换行以后项目符号的位置。</li>
<li>这里是列表内容</li>
<li>这里是列表内容</li>
</ul>

　효과는 아래 그림과 같습니다.

내부에 속성 값이 포함된 스타일을 살펴보겠습니다.

li{
list-style-type:square;
list-style-position:inside;}
<ul>
<li>这里是使用list-style-position属性值为inside的示例。请注意换行以后项目符号的位置。</li>
<li>这里是列表内容</li>
<li>这里是列表内容</li>
</ul>

　

IV. 목록 스타일 속성

　 목록 스타일 속성은 li 스타일을 포괄적으로 설정하는 속성이기도 하며 구문 구조는 다음과 같습니다. :list-style-type /list-style-image/list-style-position

　각 값의 위치는 서로 바뀔 수 있습니다. 예:

li{
list-style:url(images/bg03.gif) inside;}
<ul>
<li>这里是使用list-style属性的示例。请注意换行以后项目符号的位置。</li>
<li>这里是列表内容</li>
</ul>

페이지에 적용하면 효과를 볼 수 있습니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

관련 권장 사항:

CSS의 강제 줄 바꿈에서 단어 분리, 단어 줄 바꿈 및 공백의 차이점

CSS를 사용하여 녹색 확인란 버튼 스타일을 사용자 정의하세요

위 내용은 CSS 컨트롤 UL LI의 스타일 분석에 대해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!