다른 색상과 mouseover 효과와 읽기 쉬운 목록

이 문서에서 우리는 사용자가 쉽게 읽을되는 단순한 목록을 만드는 방법을 볼 수 있습니다.
이 작업을 수행하려면 우리는 두 가지 간단한 방법을 사용합니다 :

• 목록의 여러 행에 대해 번갈아 색상;
• mouseover에 선택한 행을 강조 표시합니다.

이제 예제를 만들어 우리가 사용자에게 우리의 전자 상거래 사이트에서 사용할 수있는 제품의 목록이 표시된다고합시다. 그 결과 아래에서 우리는 이룰 것입니다 :

마찬가지로 마우스의 존재 형광펜 우리의 관심 제목에 더욱 즉시 관련 만드는 동안 목록에있는 다양한 항목을 읽고 다른 라인을위한 교대 색상 분명 사용 쉽습니다.

목록을 만들려면, 우리는 그것을 활성화하는하는 간단한 HTML 테이블, 몇 가지 지침 및 CSS DHTML 약간의를 사용했습니다. 그러나하자도.

CSS 시작 및 스타일 시트의 내용을 아래에 보자 :

 table.tbElenco







 {



  



 테두리 : 1px 고체 # 808080;



  



 글꼴 모음 : Verdana,이 Arial, 굴림;



  



 글꼴 크기 : 10px;



  



 색상 : # 000000;







 }







 table.tbElenco 일







 {



  



 배경 : # 808080;



  



 색상 : # FFFFFF;



  



 글꼴 무게 : 굵게;







 }







 table.tbElenco TD







 {



  



 국경 - 하단 : # CCCCCC 1px 고체;







 }







 table.tbElenco tr.normale







 {



  



 배경 : # FFFFFF;







 }







 table.tbElenco tr.alternata







 {



  



 배경 : # EEEEEE;







 }







 table.tbElenco tr.evidenziata







 {



  



 배경 : # FFFF00;







 }

우리가 무슨 짓을하는 것은 매우 간단합니다 그럼 우린화한하고 전체 <th> <td> 전체 ( 'tbElenco')와 같은 클래스를 지정하여 먼저가화한 테이블, 우리는 세 가지에 해당하는 세 가지 클래스를 만들었습니다 우리의 다양한 라인의 상태 : 정상, 대체 및 강조했다.

우리 테이블의 코드를 따라가자 :

 <table cellspacing="0" cellpadding="2" class="tbElenco">







 <tr>







 <th> 제품 </ 일>







 <th> 수량 </ 일>







 <th> 가격 </ 일>







 </ TR>







 <tr class="normale" onmouseover="this.className='evidenziata'" onmouseout="this.className='normale'">







 <td> 카메라 </ TD>







 <td> 3 </ TD>







 <td> 100.00 유로 </ TD>







 </ TR>







 <tr class="alternata" onmouseover="this.className='evidenziata'" onmouseout="this.className='alternata'">







 <td> 모바일 </ TD>







 <td> 2 </ TD>







 <td> 150.00 유로 </ TD>







 </ TR>







 <tr class="normale" onmouseover="this.className='evidenziata'" onmouseout="this.className='normale'">







 <td> 20 인치 LCD TV </ TD>







 <td> 1 </ TD>







 <td> 220.00 유로 </ TD>







 </ TR>







 <tr class="alternata" onmouseover="this.className='evidenziata'" onmouseout="this.className='alternata'">







 <td> MP3 플레이어 </ TD>







 <td> 1 </ TD>







 <td> 60.00 유로 </ TD>







 </ TR>







 <tr class="normale" onmouseover="this.className='evidenziata'" onmouseout="this.className='normale'">







 <td> DVD 플레이어 </ TD>







 <td> 1 </ TD>







 <td> 80.00 유로 </ TD>







 </ TR>







 <tr class="alternata" onmouseover="this.className='evidenziata'" onmouseout="this.className='alternata'">







 <td> 콘솔 게임 </ TD>







 <td> 1 </ TD>







 <td> 200.00 유로 </ TD>







 </ TR>







 <tr class="normale" onmouseover="this.className='evidenziata'" onmouseout="this.className='normale'">







 <td> GPS 네비게이터 </ TD>







 <td> 7 </ TD>







 <td> 140.00 유로 </ TD>







 </ TR>







 <tr class="normale" onmouseover="this.className='evidenziata'" onmouseout="this.className='normale'">







 미니 DVD 캠코더 <td> </ TD>







 <td> 1 </ TD>







 <td> 270.00 유로 </ TD>







 </ TR>







 </ TABLE>

당신이 볼 수 있듯이 우리가 (<tr>) 클래스 '정상'과 'AC'다른 라인 중 하나를 지정하는 치료를했다 사소한 HTML 테이블입니다.

마우스 라인에있는 행의 모양을 자극하는 우리는 당신이 가져가 및 클래스를 다시 방문했을 때 각각의 클래스 '하이라이트'의 동적 할당을 제공하는 요소 (<tr>) onmouseover와 onmouseout 이벤트를 연결 마우스 행을 떠났을 때 시작합니다.