지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > CSS 튜토리얼 > ul+li를 사용하여 얇은 선 테이블 구현

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

墨辰丷
풀어 주다： 2018-05-09 17:31:10
원래의
2212명이 탐색했습니다.

이 글에서는 테이블을 사용하지 않고 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
시트
원천：php.cn
이전 기사：이미지 전환 효과를 얻기 위한 CSS 다음 기사：CSS를 사용하여 위치를 수정하는 방법
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
그리드를 사용하여 특정 디자인 만들기: 단계별 가이드 이 이미지와 유사한 레이아웃을 만들려고 합니다. 이 그리드를 사용해 보았지만 그렇게 할 수 없습니다. <ulclass="container"...
에서 2024-04-06 20:29:08
0
2
492
스타일이 지정된 구성 요소에 `:after` 의사 요소를 올바르게 적용하기 위한 React.js 가이드 아름다운 밑줄 애니메이션을 찾았습니다 <ul><li><ahref="#">정보</a></li>...
에서 2024-04-04 22:28:08
0
1
1322
루트 노드의 목록 항목 기호(<ul> 및 <ol>)는 CSS에서 표시 및 제거할 수 없으며, Overflow-x:hidden 문제는 제거할 수 없습니다. 현재 웹페이지 작업을 하고 있는데 목록 항목에 문제가 있습니다. 일반적으로 각 목록 항목 옆에 나타나는 점과 숫자는 표시되지 않습니다. 또한 CSS 속성에서 Ov...
에서 2024-04-04 16:38:22
0
1
3617
특정 단어가 포함된 콘텐츠를 유지하고 다른 모든 내용을 대체하는 JavaScript 정규 표현식 나는 이것이 간단하다고 생각하지만 다음 상황으로 인해 어려움을 겪고 있습니다. 문자열(텍스트로 전달된 HTML): 텍스트<br>텍스트<br>...
에서 2024-04-01 11:06:23
0
2
358
Vue: 드롭다운 메뉴 전환 및 다른 요소의 클래스를 전환하는 방법 나는 이것을 얻었습니다 (매우 간단합니다): <divclass="dropdownMenuWrapper"><ulclass="...
에서 2024-03-31 21:34:34
0
1
370
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿