Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > CSS-Tutorial > Verwenden Sie ul+li, um Thin-Line-Tabellen zu implementieren

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

墨辰丷
Freigeben： 2018-05-09 17:31:10
Original
2211 Leute haben es durchsucht

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>
Nach dem Login kopieren

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!

Verwandte Etiketten：
表格
Quelle：php.cn
Vorheriger Artikel：CSS, um einen Bildwechseleffekt zu erzielen Nächster Artikel：So korrigieren Sie die Position mithilfe von CSS
Erklärung dieser Website
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
Neueste Artikel des Autors
Aktuelle Ausgaben
Erstellen dieses speziellen Designs mithilfe eines Rasters: eine Schritt-für-Schritt-Anleitung Ich versuche, ein Layout zu erstellen, das diesem Bild ähnelt. Ich habe versucht, dieses R...
Aus 2024-04-06 20:29:08
0
2
492
React.js-Anleitung zur korrekten Anwendung des „:after'-Pseudoelements auf gestaltete Komponenten Ich habe diese wunderschöne Unterstreichungsanimation <ul><li><ahref="...
Aus 2024-04-04 22:28:08
0
1
1322
Die Listenelementsymbole (<ul> und <ol>) im Stammknoten können in CSS nicht angezeigt und entfernt werden, und das Problem overflow-x:hidden kann nicht entfernt werden. Ich arbeite gerade an einer Webseite und habe Probleme mit meinen Listenelementen. Die Pun...
Aus 2024-04-04 16:38:22
0
1
3617
Regulärer JavaScript-Ausdruck, um Inhalte mit bestimmten Wörtern beizubehalten und alles andere zu ersetzen Ich denke, das ist einfach, aber ich habe mit der folgenden Situation zu kämpfen: String (...
Aus 2024-04-01 11:06:23
0
2
358
Vue: Dropdown-Menüübergang und wie man die Klasse eines anderen Elements wechselt Ich habe das (sehr einfach) bekommen: <divclass="dropdownMenuWrapper"><...
Aus 2024-03-31 21:34:34
0
1
370
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage