오늘은 자주 사용하는 "그래픽과 텍스트가 혼합된 CSS 목록"을 만드는 방법을 함께 배워보겠습니다. 먼저 이 목록의 특성을 분석한 다음 HTML 코드를 작성하고 마지막으로 CSS 스타일을 적용하여 최종 효과를 얻습니다.
이 예의 효과:
이 글의 저자: 52CSS.com Li Xiang 재인쇄를 원하시면 이 사이트(http://www.52css.com/)에 대한 링크를 만드시기 바라며, 글의 내용을 임의로 변경하실 수 없습니다. , 그리고 이 저작권 표시의 텍스트를 보관하세요!
상단은 제가 좋아하는 52css 이상 열의 이름이고, 하단은 두 개의 블록으로 나누어져 하나는 썸네일 이미지를 표시하고 다른 하나는 텍스트 링크를 표시하는데, 둘 다 ul+li를 통해 얻을 수 있습니다. 위의 분석을 통해 다음 HTML 인코딩을 시작합니다.
예제 소스 코드
[www.downcodes.com] <div id="줄바꿈">
<div 클래스="목록">
<div class="list_title"></div>
<ul class="list_pic"></ul>
<ul class="list_text"></ul>
</div>
</div>
모든 요소를 ID 랩으로 레이어에 넣고 테두리 색상을 #e5f2f8로 설정합니다. 이는 그림자 효과가 있는 것처럼 보이게 하기 위한 것입니다.
그런 다음 그 안에 레이어 목록을 만들고 목록 안에 다음과 같은 세 개의 레이어를 만듭니다.
예제 소스 코드
[www.downcodes.com] 목록_제목
list_pic
목록_텍스트
HTML 코드를 자세히 작성해 보겠습니다.
예제 소스 코드
[www.downcodes.com] <div id="줄바꿈">
<div 클래스="목록">
<div 클래스="목록_제목">
<h3>나는 52css를 좋아한다</h3>
<span><a href="#">자세히</a></span>
</div>
<ul class="list_pic">
<li><a href="/u/info_img/2009-06/11/5394_quote.gif" /></a><span><a href="http://www.downcodes.com/">다운코드 .com</a></span></li>
<li><a href="/u/info_img/2009-06/11/7852_quote.gif" /></a><span><a href="http://www.downcodes.com/default.asp ?cateID=9">DivCSS 레이아웃 예</a></span></li>
<li><a href="/u/info_img/2009-06/11/8437_quote.gif" /></a><span><a href="http://www.downcodes.com/css_template/" >템플릿 다운로드</a></span></li>
<li><a href="/u/info_img/2009-06/11/3408_quote.gif" /></a><span><a href="http://www.downcodes.com/default.asp ?cateID=3">DivCSS 튜토리얼</a></span></li>
</ul>
<div class="clear"></div>
<ul class="list_text">
<li><span>[2007-09-11]</span>•<a href="http://www.downcodes.com/article.asp?id=813">정의 목록 dl은 다음을 사용하여 CSS 목록을 생성합니다. 사진 및 텍스트 요소</a></li>
<li><span>[2007-09-11]</span>•<a href="http://www.downcodes.com/article.asp?id=720">CSS 웹페이지 레이아웃 예: 적절한 포함 태그는 의미 테이블을 생성합니다.</a></li>
<li><span>[2007-09-11]</span>•<a href="http://www.downcodes.com/article.asp?id=669">DivCSS 레이아웃 예: 매우 실용적인 그림 혼합 텍스트 CSS 목록 - 의미가 풍부함</a></li>
<li><span>[2007-09-11]</span>•<a href="http://www.downcodes.com/article.asp?id=666">DivCSS 레이아웃 예는 dl dt dd를 사용하여 목록 만들기</a></li>
<li><span>[2007-09-11]</span>•<a href="http://www.downcodes.com/article.asp?id=636">DivCSS 레이아웃 예: 행 3개와 행 1개 열 상단 및 하단 고정 높이 중간 적응형</a></li>
</ul>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
제목을 생성하려면 list_title 레이어에서 h3을 왼쪽으로 플로팅하고, 더 많은 연결을 생성하려면 오른쪽으로 플로팅하고, list_pic 레이어에서 플로팅된 ul+li 그림을 만듭니다.
뉴스 목록을 생성하려면 list_text 레이어에 ul+li를 생성하세요.
맨 아래에 클래스가 클리어인 레이어를 배치하여 플로트를 제거합니다.
위의 기초를 바탕으로 다음 CSS 코딩을 시작합니다.
전체 진술:
예제 소스 코드
[www.downcodes.com] * { 여백:0; 글꼴 크기:12px; 목록 스타일: 없음;}
a{ 색상:#666666; 텍스트 장식:없음;}
a:hover{ 색상:#2764b4; 텍스트 장식:밑줄;}
전체 레이어 랩 스타일을 설정합니다. 너비는 450px, 위쪽 및 아래쪽 여백은 30px, 왼쪽과 오른쪽은 가로로 정렬되고 테두리는 파란색으로 설정됩니다(여기서는 그림자 효과를 높이기 위해).
예제 소스 코드
[www.downcodes.com] #wrap{ 너비:450px; 여백:30px 자동; 테두리:1px 솔리드 #e5f2f8;
.list{ 너비:448px; 테두리:1px 솔리드 #a4a4a4;}
제목 부분 list_title의 스타일 정의:
너비를 426px로 설정하고 위쪽 및 아래쪽 패딩을 0으로 설정하고 왼쪽 및 오른쪽 여백을 10px로 설정합니다.
열 이름 h3 요소는 왼쪽으로 이동합니다. 너비는 300px입니다.
너비가 60px인 스팬 요소가 오른쪽으로 부동하도록 설정하고 텍스트를 오른쪽으로 정렬하고 링크를 설정합니다.
예제 소스 코드
[www.downcodes.com] .list_title{ 너비:426px; 테두리:1px 솔리드 #f2e9da; 높이:22px;
.list_title h3{ float:왼쪽; 너비:300px;}
.list_title 범위{ float:right; 너비:60px; 텍스트 정렬:오른쪽;}
그림 레이어 list_pic의 스타일 정의:
먼저 ul 목록을 사용하고 너비를 433px로 설정합니다.
주의가 필요한 것은 padding: padding:15px 0 0 15px; 설정입니다.
(오른쪽 내부 여백을 0으로 설정한 이유는 li의 간격 문제 때문인데, 이로 인해 페이지 성능이 향상됩니다. padding: 15px 15px 0 15px; 대비 효과로 설정할 수도 있습니다)
li는 그림 블록의 크기를 94px로 설정하고 간격 여백을 0 14px 0 0으로 설정합니다.
마우스를 가리키면 그림의 테두리 색상이 파란색에서 회색으로 변경됩니다.
링크 텍스트 스타일을 설정하고,
범위를 블록 요소로 변환합니다. 범위 내의 링크도 블록 요소로 변환되고 너비와 높이는 각각 94px와 20px로 설정됩니다. 줄 간격은 20px로 설정되고 텍스트는 가로 및 중앙에 정렬됩니다.
예제 소스 코드
[www.downcodes.com] .list_pic{너비:433px; 패딩:15px 0 0 15px;}
.list_pic li{ 디스플레이:인라인; 왼쪽; 너비:94px; 여백:0 14px 0 0;
.list_pic li img{ 너비:90px;}
.list_pic li a img{ 테두리:2px 솔리드 #b3deee;}
.list_pic li a:hover img{border:2px solid #ccc;}
.list_pic li 범위{ 디스플레이:블록; 너비:94px; 높이:20px 텍스트-정렬:센터;}
.list_pic li 스팬 a{ 디스플레이:블록;}
텍스트 레이어 list_text의 스타일 정의:
ul+li를 통해 뉴스 목록을 정의합니다. 시간 범위는 오른쪽으로 부동하고 텍스트는 오른쪽에 파란색 점선으로 상단 테두리에 기록되며 상단 여백은 10px로 설정됩니다.
예제 소스 코드
[www.downcodes.com] .list_text{폭:426px; 여백:10px; 테두리 상단:1px 점선 }
.list_text li{ float:left; 너비:100%: 22px;}
.list_text li 스팬{ float:right; 텍스트 정렬:오른쪽;}
마지막으로 float를 지웁니다. .clear{clear:both;}
