suchen

Heim  >  Artikel  >  Web-Frontend  >  Verwenden Sie ul+li, um Thin-Line-Tabellen zu implementieren

Verwenden Sie ul+li, um Thin-Line-Tabellen zu implementieren

墨辰丷
墨辰丷Original
2018-05-09 17:31:102174Durchsuche

Dieser Artikel stellt hauptsächlich vor, wie man den mit ul+li erzielten Thin-Line-Table-Effekt ohne Verwendung eines Tisches nutzen kann. Freunde, die sehr kreativ und interessiert sind, können davon erfahren.

Der Code lautet wie folgt: 

<!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>

Verwandte Empfehlungen:

So erstellen Sie eine Tabelle mit dünnen Linien in HTML

Beispielcode zum Erstellen einer Thin-Line-Tabelle mit dem Attribut border-collapse:collapse in CSS

CSS-Implementierung von Thin-Line-Table_html /css_WEB-ITnose

Das obige ist der detaillierte Inhalt vonVerwenden Sie ul+li, um Thin-Line-Tabellen zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：CSS, um einen Bildwechseleffekt zu erzielenNächster Artikel：CSS, um einen Bildwechseleffekt zu erzielen

In Verbindung stehende Artikel

Mehr sehen