CSS: 목록 스타일 유형을 사용한 색상 및 크기 제어 소개-CSS 튜토리얼-php.cn

CSS: 목록 스타일 유형을 사용한 색상 및 크기 제어 소개

黄舟

풀어 주다： 2017-06-29 13:33:40

원래의

5529명이 탐색했습니다.

오늘 만든 페이지에는 목록 기호와 매우 유사한 작은 아이콘이 있습니다. 그냥 게으르게 ul만의 스타일로 바꾸고 싶어서 이 방법을 발견해서 나중에 사용할 수 있도록 기록해 두었습니다.

개인 경험에 따르면 색상이 같으면 이 방법을 사용할 수 있지만 글꼴 색상과 목록 항목 색상이 다른 경우 차트를 사용하여 구현하고 line-height을 추가해야 합니다. Npx in li ;IE에서만 목록과 글꼴을 중앙에 표시할 수 있습니다.

인용문:

작년에 CSS 초보자였을 때 전문가에게 list-style-type 색상을 변경할 수 있는지 물어본 적이 있습니다. 크기? 전문가는 말했다: 아니오! 그래서 전문가의 지도하에 이를 구현하기 위해 사진을 사용했습니다.

저는 독학을 했기 때문에 CSS 작성은 남들처럼 표준화될 수 없기 때문에 실수를 하고 발견할 수 있는 기회가 있습니다. 오늘은 리스트스타일(list-style) 앞 스타일의 색상과 크기를 변경하는 방법에 대해 말씀드리겠습니다.

소스 코드

<ul class="artul">
    <li><a href="#">这里是SEO网站的文章列表标题目</a></li>
    <li><a href="#">这里是很长的SEO网站的文章列表标题目</a></li>
    <li><a href="#">这里是关于SEO网站的文章列表标题目</a></li>
    <li><a href="#">这里是一些最新的SEO网站的文章列表标题目</a></li>
    <li><a href="#">这里是近期SEO网站的文章列表标题目</a></li>
    <li><a href="#">这里是SEO常看的网站的文章列表标题目</a></li>
    <li><a href="#">这里是关于SEO网站的文章列表标题目</a></li>
    <li><a href="#">这里是一些最新的SEO网站的文章列表标题目</a></li>
    </ul>

로그인 후 복사

와 해당 CSS를 살펴보겠습니다. , 글꼴 크기 변경 가능(IE6에서는 크기가 지원되지 않지만 Firefox에서는 지원 가능)

위 내용은 CSS: 목록 스타일 유형을 사용한 색상 및 크기 제어 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!