CSS에서 정렬되지 않은 목록을 설정하는 방법은 무엇입니까? CSS 목록 스타일 요약-CSS 튜토리얼-php.cn

CSS에서 정렬되지 않은 목록을 설정하는 방법은 무엇입니까? CSS 목록 스타일 요약

寻∝梦

풀어 주다： 2018-09-06 13:41:06

원래의

10751명이 탐색했습니다.

CSS를 사용하여 순서가 지정되지 않은 목록의 스타일을 설정하는 방법 알고 계시나요? 순서가 지정되지 않은 목록의 자세한 응용 프로그램은 다음과 같습니다. 이러한 아이콘 등을 제거하고 사진을 추가하기 위한 작은 점 제거 기능도 소개합니다. 직접 시도해 볼 수 있습니다. 지금 이 글을 살펴보겠습니다

먼저 순서가 지정되지 않은 목록을 살펴보겠습니다.

우리 모두는 순서가 지정되지 않은 목록이 일반적으로 작은 점으로 대체된다는 것을 알고 있지만 때로는 작은 점이 보기에 좋지 않습니다. 심미성을 높이기 위해 CSS 스타일에는 여러 가지 스타일링 방법이 있습니다. 첫 번째 방법은 물론 순서가 지정되지 않은 목록의 기본 작은 점입니다
두 번째 방법: 작은 점을 사용하여 표시를 작은 사각형으로 변경합니다
세 번째 방법: 작은 점을 빈 원으로 변경
네 번째 방법: 작은 점을 제거합니다. 이 방법이 더 일반적으로 사용됩니다.
다섯 번째 방법: 또한 덜 일반적으로 사용됩니다. 순서가 없는 목록을 앞에 숫자가 있는 순서가 있는 목록으로 프로그래밍하는 것입니다.

이제 이 다섯 가지 스타일에 대한 전체 코드를 살펴보겠습니다. CSS:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
<style type="text/css">
.zhe1{list-style-type:disc;}
.zhe2{list-style-type:square;}
.zhe3{list-style-type:circle;}
.zhe4{list-style-type:none;}
.zhe5{list-style-type:decimal;}
</style>
</head>
<body>
<ul>
<li class="zhe1">我是默认小圆点</li>
<li class="zhe2">我是小方块</li>
<li class="zhe3">我是空心圆</li>
<li class="zhe4">我是没有标记的</li>
<li class="zhe5">我是要有序列表</li>
</ul>
</body>
</html>

로그인 후 복사

이것은 비교적 간단한 코드입니다. 먼저 브라우저의 표시 효과를 살펴보겠습니다.

CSS에서 정렬되지 않은 목록을 설정하는 방법은 무엇입니까? CSS 목록 스타일 요약

이 다섯 가지 효과가 모두 표시됩니다. 아주 간단하지 않나요? (CSS 스타일에 대해 더 알고 싶다면 PHP 중국어 웹사이트 CSS 참조 매뉴얼 열을 참조하세요.)

이제 CSS 목록 스타일 요약에 대해 이야기해 보겠습니다.

list-style-image : url 이미지 주소 속성은 이미지를 사용하여 목록 항목의 표시를 대체합니다.
list-style-position 속성은 목록 항목 표시를 배치할 위치를 설정합니다. 내부 값도 텍스트 내에 배치됩니다.
목록 스타일 복합 작성 방법

마지막 방법은 이제 더 일반적으로 사용됩니다. 너무 많은 코드를 작성하고 싶지 않다면 이 일관된 작성 방법을 사용하여 완성해 보겠습니다. 간단히 말해:

<style type="text/css">
.zhe1,.zhe2,.zhe3,.zhe4,.zhe5{list-style:none;}
</style>

로그인 후 복사

이 CSS 스타일을 사용하면 원하지 않는 항목을 제거하고 다른 속성을 작성할 수 있습니다. 효과를 살펴보겠습니다.

CSS에서 정렬되지 않은 목록을 설정하는 방법은 무엇입니까? CSS 목록 스타일 요약

효과는 매우 분명합니다. 그렇지 않나요? 물론 이것은 가장 기본적인 작성 방법일 뿐이며, 다른 속성 스타일도 작성할 수 있으므로 표시하고 시간을 절약할 수 있습니다.

좋아요, 이것이 CSS 목록 스타일에 대한 이 글의 요약입니다. 궁금하신 사항은 아래에서 문의하실 수 있습니다.

html에서 문자 간격을 설정하는 방법은 무엇입니까? CSS 스타일 설정 텍스트 정렬 요약

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

Php8, 나도 갈게

30분 안에 웹사이트 레이아웃 배우기

Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지

UNI-APP 코드의 첫 번째 줄

처음부터 앱 실행까지 Flutter

Lian 형제 새 Linux 비디오 튜토리얼

AXURE 9 비디오 튜토리얼(제품 관리자 대화형 제품 디자인 UI에 적합)

Zero 기본 숙련도 PS 비디오 튜토리얼

시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼

PS 기술 및 슬라이싱 기술 비디오 튜토리얼

Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼

컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식

프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명

웹소켓 비디오 튜토리얼

CSS에서 정렬되지 않은 목록을 설정하는 방법은 무엇입니까? CSS 목록 스타일 요약