집 >웹 프론트엔드 >CSS 튜토리얼 >ul+li를 사용하여 얇은 선 테이블 구현

ul+li를 사용하여 얇은 선 테이블 구현

墨辰丷원래의: 2018-05-09 17:31:102215검색

이 글에서는 테이블을 사용하지 않고 ul+li로 구현한 얇은 선 테이블 효과를 주로 소개합니다. 창의력이 뛰어나고 관심이 많은 친구들이 배울 수 있습니다.

코드는 다음과 같습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>write by 阿会楠 环境：IE7+IE6</title> 
<style type="text/css"> 
#ulDate{ 
    width:404px; 
    margin:0; 
    border-top:1px solid #cccccc; 
    border-left:1px solid #cccccc; 
} 
#ulDate li{ 
    float:left; 
    width:100px; 
    height:30px; 
    list-style-type:none; 
    border-right:1px solid #cccccc; 
    border-bottom:1px solid #cccccc; 
    /*非必须*/ 
    line-height:30px; 
    font-size:12px; 
    text-align:center; 
     
} 
</style> 
</head> 

<body> 
<ul id="ulDate"> 
<li style="width:403px;background:#F7F7FF;text-align:center;">时间</li> 
<li>2008-7-30</li> 
<li>2008-7-30</li> 
<li>2008-7-30</li> 
<li>2008-7-30</li> 
<li>2008-7-30</li> 
<li>2008-7-30</li> 
<li>2008-7-30</li> 
<li>2008-7-30</li> 
<li>2008-7-30</li> 
<li>2008-7-30</li> 
<li></li> 
<li></li> 
</ul> 
</body> 
</html>

관련 추천:

html가는 선 테이블 만드는 방법

CSS의 border-collapse:collapse 속성을 사용하여 가는 선 테이블을 만드는 샘플 코드

CSS 얇은 선 구현 table_html/css_WEB-ITnose

위 내용은 ul+li를 사용하여 얇은 선 테이블 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：이미지 전환 효과를 얻기 위한 CSS다음 기사：이미지 전환 효과를 얻기 위한 CSS