玩家必看科普!麻豆人人妻人人妻人人片AV,欧美老妇交乱视频在线观看,久久综合九色综合久99_知乎

<ruby id="fgcka"></ruby>

<progress id="fgcka"></progress>

<tbody id="fgcka"></tbody>

<dd id="fgcka"></dd>

<dd id="fgcka"></dd>

<em id="fgcka"></em>

當前位置：首頁 > 網頁制作 > HTML/Xhtml > 詳細頁面

html中ul和li標簽的用法詳解

時間：2023-03-06來源：系統城裝機大師作者：佚名

普通的顯示數據的時候，ul就是項目列表，li就是列表項?？梢杂脕盹@示數據。如果用于DIV＋CSS布局的話，ul+li可以替換表格的作用，具體的設置，如果寬度高度、行間距、背景邊框等需要配合CSS一起設置。

一.做導航，居中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47 <!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=utf-8" />
<title>做導航</title>
<style type="text/css">

#menu{
width:1000px;
height:35px;
float:right;
margin:0px;
clear:both;
vertical-align:bottom;
}
#ul li{
list-style-type:none; /*去掉項目符號的，比如你用了<ul><li></li><li></li></ul>默認的li里邊的字是有列表符號的，小圓點。這個list-style-type: none就是不要列表符號*/
clear:both;
width:100px;
display:inline; /*li {display: inline} 讓 li 不再獨占一行, 寬度上只會得到必要的而不是占有所在容器的全寬*/
font-size: larger;
text-decoration:none;
}
a{
text-decoration:none; /*去掉下劃線*/
}
</style>
</head>

<body>

<div id="menu">
<ul id="ul">
<li><a title="" href="http://localhost:1435/BookShop/index.aspx">首頁 </a></li>
<li><a title="" href="http://localhost:1435/BookShop/hybooks.aspx">行業圖書 </a></li>
<li><a title="" href="http://localhost:1435/BookShop/Clothing.aspx">服飾潮流 </a></li>
<li><a title="" href="http://localhost:1435/BookShop/">美容會所 </a></li>
<li><a title="" href="http://localhost:1435/BookShop/">媽咪寶貝 </a></li>
<li><a title="" href="http://localhost:1435/BookShop/">禮品書籍 </a></li>
<li><a title="" href="http://localhost:1435/BookShop/">新聞資訊 </a></li>
<li><a title="" href="http://localhost:1435/BookShop/">用戶留言 </a></li>
<li><a title="" href="http://localhost:1435/BookShop/">聯系我們 </a></li>
</ul>
</div>

</body>
</html>

二.少量數據表格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22 <!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=utf-8" />
<title></title>
<style type="text/css">
</style>
</head>

<body>

<div>默認是豎排，并且帶圓點
<ul>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
</ul>
</div>

</body>
</html>

三.少量數據表格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23 <!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=utf-8" />
<title></title>
<style type="text/css">

</style>
</head>

<body>

<div>
<ul>
<li style="list-style:none;">去掉圓點</li>
<li style="display:inline;">hello</li>
<li>hello</li>
<li style="display:inline;">hello</li>
</ul>
</div>

</body>
</html>

四.少量數據表格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31 <!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=utf-8" />
<title>無標題文檔</title>
<style type="text/css">
#myul li{
float:left;
width:100px;
}
</style>
</head>

<body>

<div style="text-align:center;background:#eef">
<ul id="myul" style="width:300px;background:#eee">
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
</ul>
</div>
</div>
</body>
</html>

五.少量數據表格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26 <!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=utf-8" />
<title>無標題文檔</title>
<style type="text/css">
#myul li{
float:left;
width:100px;
}
</style>
</head>

<body>

<div style="text-align:center;background:#def">
<ul id="myul" style="width:500px;background:#eee;">
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
</ul>
</div>
</body>
</html>

到此這篇關于html中ul和li標簽的用法詳解的文章就介紹到這了

相關信息

2023-03-06
dw調節一個角的角度代碼技巧 HTML怎么角度代碼調節一個角的角度?
2022-12-06
dw制作虛線圓圈的技巧 html用代碼制作虛線框怎么做?
2022-09-12
HTML靜態頁面獲取url參數和UserAgent的實現

html網頁引入svg圖片的4種方式
web應用開發使用svg圖片，總結了下，可以有如下4種方式： 1. 直接插入頁面。 2. img標簽引入。 3. css引入。 4. object標簽引入。...

2022-09-12
巧用 -webkit-box-reflect 倒影實現各類動效(小結)
主要介紹了巧用 -webkit-box-reflect 倒影實現各類動效(小結)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值...

2021-04-22

熱門系統總排行

裝機必備

系統教程欄目

欄目熱門教程

人氣教程排行

站長推薦

熱門系統下載

玩家必看科普!麻豆人人妻人人妻人人片AV,欧美老妇交乱视频在线观看,久久综合九色综合久99_知乎人人玩人人添人人澡超碰偷拍青春娱乐视频精品分类官网2 最好最新高清中文字幕 91国自产拍最新2018 欧美精品一区二区三区不卡网深夜你懂得我的意思2021 宿舍NP乖把腿张开H 网恋奔现一天被要几次为什么我越叫他越快学渣各种各样的PLAY 英语课代表下面好软小说亚洲国产综合在线区尤物 FREE性丰满HD性欧美我年轻漂亮的继坶BD 最近中文字幕完整免费视频啦啦啦免费视频卡一卡二青柠视频在线观看大全在线天堂WWW在线资源亚洲国产日本韩国欧美MV 天天学习|久久久久久久精品国产亚洲87 国产K频道分享系统进入口三个嘴都吃满了还塞满了 JAPONENSIS老师学生JAVAHBB 亚洲精品1卡2卡3卡4卡樱花草在线社区WWW韩国好涨水快流出来了快吃动视频久久AV无码精品人妻出轨