html中ul和li标签的用法介绍

xiaoweids

于 2023-05-16 13:32:07 发布

阅读量5.3k

点赞数 9

分类专栏： windows HTML 文章标签： html xhtml 前端

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/weixin_45707610/article/details/130684961

版权

HTML 同时被 2 个专栏收录

263 篇文章

订阅专栏

231 篇文章

订阅专栏

普通的显示数据的时候，ul就是项目列表，li就是列表项，可以用来显示数据，如果用于DIV＋CSS布局的话，ul+li可以替换表格的作用，具体的设置，如果宽度高度、行间距、背景边框需要配合CSS一起设置，这篇文章主要介绍了html中ul和li标签的用法详解,需要的朋友可以参考下

普通的显示数据的时候，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标签的用法详解的文章就介绍到这了。

来源：微点阅读 https://www.weidianyuedu.com

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。