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

最新推荐文章于 2024-07-12 20:49:16 发布
最新推荐文章于 2024-07-12 20:49:16 发布
阅读量3.3k 收藏 14
点赞数 8
分类专栏： windows HTML 文章标签： html xhtml 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45707610/article/details/130684961
版权
HTML 同时被 2 个专栏收录
263 篇文章 3 订阅
订阅专栏
windows
231 篇文章 0 订阅
订阅专栏

普通的显示数据的时候，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>

<!--制作表格的原理，ul宽度为300px,li宽度为100px，则成三列-->

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

<!--横向的方法,如果要居中，需要设置宽度才可以，这个宽度要和里面的li总长度一样。-->

<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

xiaoweids
关注
  • 8
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【一篇文章带你掌握HTML中ul、ol和dl列表的使用 - 超详细】
m0_37873510的博客
08-11 7697
一篇文章带你掌握HTML中的ul、ol和dl列表标签的使用，超详细
9.HTML基础——列表标签
Veronnit的博客
07-06 768
文章目录列表标签什么是列表标签？HTML中列表标签的分类无序列表1.什么是无序列表2.格式3.注意点4.应用场景5.快捷方式有序列表1.什么是有序列表？2.格式定义列表1.什么是定义列表？2.格式3.应用场景4.注意点快捷方式 列表标签 什么是列表标签？ 列表标签的作用：给一堆数据添加列表语义，也就是告诉搜索引擎告诉浏览器这一堆数据是一个整体 HTML中列表标签的分类 无序列表（最多）（unordered list） 有序列表（最少）（ordered list） 定义列表（其次）（definition l
ul li标签是什么元素？
Always-Learning
10-25 4036
这两个都是块级元素，可以给宽高！
块元素居中方式
gklcsdn的博客
12-10 784
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
CSS入门：ol，ul列表用法详解（附案例）
u013179804的博客
04-19 2275
无序列表（<ul>）和有序列表（<ol>）是 HTML 中常用的列表标签。它们在网页中是一种灵活且功能强大的组合方式，能够帮助设计师和开发者有效地组织和展示网页内容，提高页面的可读性、可访问性和用户友好性。ul：用于显示项目列表，项目之间没有顺序关系。默认使用实心圆（●）或者其他符号作为项目符号。ol：用于显示项目序号列表，项目之间有顺序关系，通常用于列出步骤、排名等内容。默认使用数字（1, 2, 3...）作为项目序号，可以通过 CSS 修改序号样式。
html ＜ul＞ 标签 和 ＜li＞ 标签
Dontla的博客
02-23 6438
简述html的3种列表uloldl,语义化HTML：ul、ol和dl
weixin_42666807的博客
06-18 1384
一、语义化元素1. ul标签W3C草案：Theulelement represents an unordered list of items; that is, a list in which changing the order of the items would not change the meaning of list.语义化元素：表示包含一组无序列表项内容。在不同的浏览器默认样式均...
关于HTML 列表中的dl,dt,dd,ul,li,ol区别及应用
xiaoweids的博客
07-07 879
本文主要为大家介绍一下dl,dt,dd,ul,li,ol区别，需要的朋友可以参考一下平时有时候用到div和css对网站界面进行重构,经常会用到标签ul ol li dl dt dd ,这些标签常用于列表显示内容.学会这几个标签的用途,了解一下他们的区别,对网站代码和加载速度都有很有益处的.下面,简单说一下.ul 标签定义无序列表。实例:li: Listsol有序列表:12345表现为：1……2……3……ul无序列表，表现为li前面是大圆点而不是123:12。
JavaScript使用ul中li标签实现删除效果
12-10
本文实例为大家分享了js使用ul中li标签实现删除效果的具体代码，供大家参考，具体内容如下 <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"&...
css中使用ul li ul li ul li ul li 实现四层级联菜单
12-08
复制代码代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ... /*–a标签的默认颜色为黑色–*/ text-decoration:none; /*–隐藏超链接的下划线–*/ } a:
CSS实现ul和li横向排列的两种方法
11-21
本文将详细介绍两种利用CSS实现`<ul>`和`<li>`横向排列的方法。 ### 方法一：使用`float:left` 首先，我们可以使用`float`属性来改变`<li>`元素的行为。默认情况下，`<li>`是块级元素，占据一整行。通过将`<li>`的...
HTML中Li标签的使用示例
12-14
在HTML中，`<li>`（List Item）标签用于定义有序列表`<ol>`或无序列表`<ul>`中的每一项。在这个示例中，我们看到如何在`<li>`元素内创建一种布局，使得标题居左，日期居右。这种布局在不同浏览器之间可能有不同的...
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
11-30
在本文中，我们将深入探讨如何使用Vue.js来创建一个基于`ul-li`标签的下拉列表，以此模拟原生的`select`标签功能。这个实例将涵盖Vue.js中的几个核心概念，包括组件的创建与使用、组件间的数据传递以及动态数据绑定...
HTML: 列表
qq_55038440的博客
10-20 628
ul、ol、嵌套列表等标签
html获取ul的li,如何从html中提取一些<li>（在ol / ul标签下）标签</li>
weixin_29332029的博客
06-09 1443
5 个答案:答案 0 :(得分：2)您可以简单地将它们转换为DOM元素，并使用普通选择器。听起来你只想附加前3个li元素，所以只需抓住ul的子元素，然后在追加到页面之前对前3个进行切片。$(my_string).children("li").slice(0, 3).appendTo("#target");答案 1 :(得分：1)另一种jQuery方式：var html = $('test1test...
HTML的列表、表格、表单标签的使用
凌晨三点
06-04 579
标签：dl 嵌套 dt 和 dd，dl 是定义列表，dt 是定义列表的标题，dd 是定义列表的描述 / 详情。< dl > < dt > 列表标题 </ dt > < dd > 列表描述 / 详情 </ dd > …… </ dl >< dl > < dt > 列表标题 </ dt > < dd > 列表描述 / 详情 </ dd > …… </ dl ></< dl > < dt > 列表标题 </ dt > < dd > 列表描述 / 详情 </ dd > …… </ dl >
HTML列表，表格，表单（简洁版）
m0_74854911的博客
03-31 931
你来自哪来自旋风星系的电子羊
html设计（两种常见的充电效果）
最新发布
2301_81704123的博客
07-12 1077
title>充电效果
html中ul和li标签的用法
07-15
ul（无序列表）和li（列表项）是HTML中用于创建列表的标签。 ul标签用于创建无序列表，其中的每个列表项由li标签包裹。无序列表的特点是列表项没有特定的顺序，通常以一个实心圆点或其他符号作为标记。 例子： ```...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值