> 웹 프론트엔드 > CSS 튜토리얼 > CSS에서 li 앞의 점을 제거하는 방법

CSS에서 li 앞의 점을 제거하는 방법

醉折花枝作酒筹
풀어 주다: 2021-04-09 18:12:22
원래의
6387명이 탐색했습니다.

CSS에서는 list-style 속성을 사용하여 li 앞의 점을 지울 수 있습니다. li 태그에 "list-style:none" 스타일을 설정하기만 하면 됩니다. list-style 속성은 li 목록 항목의 표시를 제어하는 ​​데 사용됩니다. 값이 없음이면 li 앞의 프로젝트 표시가 지워질 수 있습니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

많은 사람들이 div를 사용하여 웹 사이트를 구축할 때 항상 li를 사용하지만 디스플레이 효과 앞에 항상 작은 검은 점이 표시되어 많은 사람들이 두통을 느끼지만 소스를 찾을 수 없습니다. 우리는 다음 방법을 사용하여 이를 지울 수 있습니다.

1. CSS로 코드를 작성합니다. 에서 관련 CSS를 찾으세요. .li.ul 아래에 list-sytle:none;을 작성합니다. 물론 list를 작성하는 사람도 있습니다. -style-type:none, 이 작성 방법은 특히 일부 CMS에서 가장 일반적입니다. .li.ul下写入list-sytle:none;当然有的会这样来写list-style-type:none, 这种写法特别是在一些CMS中最常见。 

2、在相关的页面找到head部分写入下面的代码

<style type="text/css">
li{
    list-style:none;
}
</style>
로그인 후 복사

3、在li,ul内加入list-style。

<ul style="list-style-type:none>
    <li>
    <a herf="http://123.COM">我的博客</a>
    </li>
< /ul>
로그인 후 복사

当然这种是很麻烦的了。

最简单的就是第一种了,通过CSS来控制,这个当然会有不错的效果了。

这几种方法都是通过设置list-style:none来设置的,有的是会用list-style-type

2. 해당 페이지의 head 부분을 찾아 아래와 같은 코드를 작성합니다
    ul li{
    list-style-type:none;
    }
    로그인 후 복사
  • 3. li, ul에 list-style을 추가합니다.

    ul li{
    list-style-type:none;
    list-style-image: url(images/icon.gif);
    }
    로그인 후 복사

    물론 이것은 매우 번거로운 일입니다.
  • 가장 간단한 것은 CSS를 통해 제어되는 첫 번째 것입니다. 물론 좋은 효과가 있습니다.

    이러한 메소드는 모두 list-style:none을 설정하여 설정됩니다. 일부는 list-style-type 속성을 ​​사용합니다.
  • none: 글머리 기호 사용 안 함
  • disc: 채워진 원, 기본값 원 속이 빈 원
  • square: 정사각형
  • decimal: 아라비아 숫자
  • lower-roman: 소문자 로마 숫자
  • upper-roman: 대문자 로마 숫자

lower-alpha 소문자 영어 Letters

upper-alpha: 대문자 영어

. 위의 없음을 대체하는 데 모두 사용할 수 있습니다.

A) CSS를 사용하여 목록 기호 형식 지정:

ul{
list-style-type:none;
margin:0px;
}
로그인 후 복사

B) 목록 기호를 이미지로 변경하려면: 🎜
ul{
list-style-type: none;
margin:0px;
}
ul li{
background:#CCC;
}
로그인 후 복사
🎜 C) 왼쪽 정렬의 경우 다음 코드를 사용할 수 있습니다. 🎜rrreee🎜 D) 목록에 배경색을 추가하려면 다음 코드를 사용할 수 있습니다. 🎜rrreee🎜추천 학습: 🎜css 비디오 튜토리얼🎜🎜

위 내용은 CSS에서 li 앞의 점을 제거하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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