masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > tutorial css > 运用ul+li实现细线表格

运用ul+li实现细线表格

墨辰丷
Lepaskan： 2018-05-09 17:31:10
asal
2211 orang telah melayarinya

本篇文章主要介绍如何使用用ul+li实现的细线表格效果不用table，非常有创意感兴趣的小伙伴了解一下。

代码如下：

<!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>
Salin selepas log masuk

相关推荐：

html如何制作细线表格

使用css中border-collapse:collapse属性新建一个细线表格的示例代码

CSS实现细线表格_html/css_WEB-ITnose

Atas ialah kandungan terperinci 运用ul+li实现细线表格. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
lembaran
sumber：php.cn
Artikel sebelumnya：css实现图片切换效果 Artikel seterusnya：如何使用css固定位置
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Menggunakan Grid untuk Mencipta Reka Bentuk Khusus Ini: Panduan Langkah demi Langkah Saya cuba membuat reka letak yang serupa dengan imej ini, saya telah cuba menggunakan grid...
daripada 2024-04-06 20:29:08
0
2
492
Panduan React.js untuk menggunakan elemen pseudo `:selepas` dengan betul pada komponen yang digayakan Saya menjumpai animasi garis bawah yang cantik ini <ul><li><ahref="#&q...
daripada 2024-04-04 22:28:08
0
1
1322
Simbol item senarai (<ul> dan <ol>) dalam nod akar tidak boleh dipaparkan dan dialih keluar dalam CSS, dan masalah limpahan-x: tersembunyi tidak boleh dialih keluar. Saya sedang mengerjakan halaman web dan saya menghadapi masalah dengan item senarai saya. ...
daripada 2024-04-04 16:38:22
0
1
3617
Ungkapan biasa JavaScript untuk mengekalkan kandungan yang mengandungi perkataan tertentu dan menggantikan semua yang lain Saya rasa ini mudah, tetapi saya bergelut dengan situasi berikut: Rentetan (HTML diluluska...
daripada 2024-04-01 11:06:23
0
2
358
Vue: Peralihan menu lungsur turun dan cara menukar kelas elemen lain Saya mendapat ini (sangat mudah): <divclass="dropdownMenuWrapper"><ulcl...
daripada 2024-03-31 21:34:34
0
1
370
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan