CSS 인터레이스 색상 변경 튜토리얼

HTML에서는 ul 및 li 목록 앞에 색상 차이 레이아웃 효과가 필요하다는 것을 알고 있습니다. 그러면 CSS를 사용하여 행마다 ul li의 색상을 변경하는 방법은 무엇입니까? 오늘은 여러분에게 보여드릴 예를 하나 들어보겠습니다.

프로그램 호출에 영향을 주지 않고 프로그램을 단순하게 만들기 위해 ul li 목록 레이아웃을 사용하여 위의 간격 배경색 레이아웃을 구현하는 동시에 li 위에 마우스를 올려 배경색을 변경합니다. 일반적으로 두 가지 방법이 있습니다.

첫 번째 방법: 배경 이미지, 배경 이미지 자료의 좁은 수직 스트립을 자르고 배경 이미지를 ul 배경으로 사용하고 배경 이미지를 ul 배경으로 사용하고 위, 아래, 왼쪽, 오른쪽으로 쉽게 타일링 간격 효과를 얻을 수 있습니다.

두 번째 유형: 이를 달성하려면 JQ 특수 효과를 사용하세요. JS 특수 효과를 통해 배경색이 분리되고 마우스가 배경색 변경 효과 위로 지나가게 됩니다. JS 파일과 코드를 도입해야 합니다. .

다음으로 두 가지 방법을 사진, 텍스트 + 온라인 시연을 통해 예시와 함께 소개하겠습니다.

배경 이미지 자료는 li 목록의 배경 간격 색상을 구현합니다.

이 DIV+CSS 케이스는 권장 방법으로 간단하고 편리하며 코드를 절약하고 마우스를 위로 이동할 때 배경 색상 변경 효과도 얻을 수 있습니다. 리.

작업 방법은 다음과 같습니다.

사진 소재로 너비 1픽셀, 높이 정확히 두 가지 색상의 리를 잘라냅니다.

HTML 해당 소스 코드

<ul class="licss"> 
<li><a href="http://www.php.cn/">欢迎您访问</a></li> 
<li><a href="http://www.php.cn/">欢迎您访问</a></li> 
<li><a href="http://www.php.cn/">欢迎您访问</a></li> 
<li><a href="http://www.php.cn/">欢迎您访问</a></li> 
<li><a href="http://www.php.cn/">欢迎您访问</a></li> 
</ul>

위는 ul li 레이아웃 내용입니다. 핵심은 뒤에 있는 CSS 코드의 작성과 설명을 보는 것입니다.

4. 해당 CSS 코드

ul.licss{ margin:0 auto; Background:url(ul-bg.gif); width:400px; text-align:left}

/* 다른 매개변수를 설정하지 않고도 개체 내에서 인물 사진을 전체 화면으로 타일링할 수 있습니다.*/

ul.licss li{ width:100% text-indent:10px; height:34px} / * 높이는 계산되어야 하며 레이아웃 이미지와 특정 관계가 있습니다. */

ul.licss li:hover{ background:#EBEBEB}

/* 배경색을 동적으로 변경하려면 li에 대한 hover 의사 클래스 */

여기에서 ul에 대해 별도의 클래스를 설정합니다. 설명: 실제 레이아웃에서는 ul li 레이아웃이 여러 곳에서 사용됩니다. 다른 곳에서 ul의 사용을 구별하기 위해 여기서는 인스턴스에 대해 클래스 이름을 별도로 지정합니다.

CSS 확장: li 위로 마우스를 이동할 때 색상을 변경하려면 CSS ul.licss li:hover{set background color}를 설정하면 됩니다.

유연한 사용: 예제에 따르면 ul li 레이아웃 기술을 non-li 레이아웃으로 확장하여 목록 유형 레이아웃 배경 간격 색상을 구현할 수 있습니다.

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

관련 읽기:

2D 및 3D HTML을 변환하는 방법

HTML5 비디오 오디오 구현 단계

Js 스타일을 얻는 일반적인 방법 얻기

위 내용은 CSS 인터레이스 색상 변경 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!