html中ul和li标签的用法

最新推荐文章于 2025-03-26 13:48:16 发布
最新推荐文章于 2025-03-26 13:48:16 发布
阅读量8w 收藏 228
点赞数 47
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kwame211/article/details/110286962
版权 
普通的显示数据的时候，ul就是项目列表，li就是列表项。可以用来显示数据。
如果用于DIV＋CSS布局的话，ul+li可以替换表格的作用，具体的设置，如果宽度高度、行间距、背景边框等需要配合CSS一起设置。

 

 

一.做导航，居中 

 

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

 

二.少量数据表格

 

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

 

 

 

 

三.少量数据表格

 

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

 

 

 

四.少量数据表格

 

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

 

 

 

五.少量数据表格

 

<!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 的使用介绍
孔乙己的博客
08-29 3369
在 Web 前端开发中，ul元素是一个非常常见且重要的 HTML 标签。ul的全称是，意思是无序列表。顾名思义，ul元素通常用于表示一组无序的项目列表，这些项目的排列顺序没有特殊的含义。这与ol（有序列表）元素相对，ol列表中的项目通常表示有序的数据，排序顺序是有意义的。ul元素在 HTML 文档中的作用不仅仅是展示列表内容，它在语义化、可访问性和样式设计等方面也具有重要的作用。理解ul元素的作用，离不开对 HTML 语义、浏览器渲染流程以及前端开发工具的深入理解。ul。
html中ul和li是什么单位,html中ul，ol和li的区别
weixin_36108931的博客
06-09 8600
ul是无序列表，全称是unordered list，先来个例子：●张三●李四●王二●刘五ol是有序列表 ,全称是ordered list，同样举个例子：1、张三2、李四3、王二4、刘五这就是ul与ol的区别。ul与ol前的符号是可以修改的。只需要修改它们的type值。ul的type属性有：disc—实心圆(默认)、circle—空心圆、square—实心方块ol的type属性有：1—数字(默认)、...
Jquery和JS获取ul中li标签的实现方法
10-22
下面小编就为大家带来一篇Jquery和JS获取ul中li标签的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
无序列表标签＜ul＞和＜li＞
热门推荐
企业级技术与网站app运营
05-18 1万+
标签的子标签必须是<li>，绝对不能出现任何其他的标签。但是你把<p>标签写到<li>标签的外面、作为<ul>的直接子标签是错误的。无序列表使用<ul>
ul,li,ol等标签的使用方法
最新发布
gyj081229的博客
03-26 265
type="circle"则是在ul后指定符号的样式，可设定ul中所有<li>标签的前导符号，其中这个符号为空心圆点，此外还有type=“dics”（实心圆点，type="square"（实心方块，和特殊的img src="mygraph.gif"使用ol标签可以建立有序列表，表项标签为li，type="A"则是定义一个有序的符号样式。
html中ul和li标签的用法介绍
xiaoweids的博客
05-16 5425
普通的显示数据的时候，ul就是项目列表，li就是列表项，可以用来显示数据，如果用于DIV＋CSS布局的话，ul+li可以替换表格的作用，具体的设置，如果宽度高度、行间距、背景边框需要配合CSS一起设置，这篇文章主要介绍了html中ul和li标签的用法详解,需要的朋友可以参考下普通的显示数据的时候，ul就是项目列表，li就是列表项。可以用来显示数据。如果用于DIV＋CSS布局的话，ul+li可以替换表格的作用，具体的设置，如果宽度高度、行间距、背景边框等需要配合CSS一起设置。
Html之【ul和li】综合技巧大全(持续更新中..)
【敦厚的曹操】的专栏
10-03 7635
一、修改【ul】和【li】的行间距或间距的方法！ 首先，用下面的方法，但发现太小了字体也显示一半了。 缩小行li的间距应改变行高line-height li{line-height:20px;} 其次，用下面的方法还是比较管用！ ul,li{margin:0;padding;0}放在css的第一行。 二、去掉【ul】和【li】前面的点！ #center_b_left ul l
HTML的ul和li标签的使用
weixin_30587025的博客
08-03 1323
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>我的第一个网页</title> </head> <body> <h2>我的电脑文件列表</h2> <ul&g...
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 实现四层级联菜单
09-25
在这里，我们使用了嵌套的ul和li标签来构建一个层级关系。每个li元素内可以包含一个a标签（代表链接）和一个更深层次的ul列表。这样逐层嵌套，直到达到四级菜单。 接下来，我们通过CSS来定义这些菜单项的样式。在...
html的ul和li标签
ryan1214的专栏
04-18 432
Home News Contact About
html ＜ul＞ 标签 和 ＜li＞ 标签
Dontla的博客
02-23 6568
html的ul和li元素
Theworld007的博客
10-22 2607
块元素：div p h ul li ul：整个列表 li:列表中的每一项 什么时候用列表：当出现了一系列相同样式的结构之后，优先考虑列表来写 内联元素:span a img 文字的样式 文字居中：text-align:center （让元素里面的文字居中）(文字离谁近听谁的) 颜色 color 里面的文字是什么颜色 文字上下居中 设置行高和外面的块一样高 近几天代码补充： 文字居中text-al...
html 中li样式,CSS中的ul与li样式用法详解
weixin_36083698的博客
06-18 6382
你对CSS中的ul与li样式的使用是否熟悉，这里和大家分享一下，在CSS中有专门控制列表表现的属性，常用的有list-style-type属性、list-style-image属性、list-style-position属性和list-style属性。CSS中的ul与li样式详解ul和li列表是使用CSS布局页面时常用的元素。在CSS中，有专门控制列表表现的属性，常用的有list-style-ty...
html中的li和ul是什么标签
qq_44165157的博客
10-02 4554
https://zhidao.baidu.com/question/1498680674660117099.html
初学者，html，ul、li标签
爱星爷爱拉芳的博客
06-23 1366
ul标签 ul标签是非常实用的，例如用户信息，下面一大列，位置一样，字体一样，其他都一样。例如： 或者是导航栏，或者是某某列表，写起来又方便，看起来也很整洁 整个的css是这样的 .left-cate{ margin-left: -17px; } .left-cate ul{ margin-top: 21px; width: 98%; padding-
前端基础知识总结 （一） （2）
weixin_45433013的博客
12-10 454
**昊哥前端知识基本总结** 今天我们继续说说HTML其他基本知识！ 首先给大家推荐一个本人喜欢用的编辑器 ：Visual Studio Code。 这个编辑器用起来特别的人性化方便便捷，适合大部分初学者使用。点击网址就可以下载：Visual Studio Code 编辑器怎么样使用就不在这详细讲了，大家可以看下这个视频：VSCoder入门视频 1.HTML主体该怎么编写？ 先看一下主体的大概样子： <body> <h1></h1&g...
html---列表标签（ul、li、ol）
weixin_46218101的博客
08-06 4920
web前端入门笔记之html（7） 列表标签 1.ul ⦁ < ul>标签表示的是一个无序列表。 常用属性: type:规定列表的项目符号类型,可取值 disc（圆点）,square（方块）,circle（圆圈）.默认值为disc <ul>你好呀，你好呀！</ul> <ul type="disc">你好呀，你好呀！</ul> <ul type="square">你好呀，你好呀！</ul> <ul type="circl
li和ul标签用法举例
VirgooooS
11-22 1207
或者 是项目列表，是列表项。是无序列表，就是用符号来列的，所以你列出来默认的就是黑点，是编号列表，用数字来列的，也是用做列表项， 是 list item 即列表项，但列表有很两种，所以外面得有 或者 用来区别无序列表（小点点）和有序列表（1,2,3...）。 A).运用CSS格式化列表符： [code="java"] ul li{ list-style-type:no...
ul和li的用法
03-08
### HTML `ul` 和 `li` 标签使用教程 #### 一、基本结构 在HTML文档中，`<ul>`代表无序列表（unordered list），而`<li>`则表示列表项（list item）。通常用于创建项目列表。下面是一个简单的例子来展示如何构建一个基础的无序列表[^3]。 ```html <ul> <li>苹果</li> <li>香蕉</li> <li>橙子</li> </ul> ``` 此代码片段会渲染成带有圆点标记的三个条目组成的垂直列表。 #### 二、去除默认样式 为了移除`<ul><li>`前的小黑点以及它们之间的空白区域，在CSS文件或者页面内的`<style>`标签里加入特定的选择器规则可以实现这一点[^1]： ```css ul { list-style-type: none; /* 移除前面的小图标 */ padding-left: 0px; /* 清除左边距 */ } ``` 这段CSS将会使上述示例中的水果名称不再伴有任何装饰性的符号，并紧贴左侧边界排列。 #### 三、控制水平布局及其间隔调整 当希望将多个`<li>`元素横向并列放置时，可以通过设置浮动属性或将display设为inline-block等方式达成目的；与此同时，利用`margin`或`padding`属性可方便地调节相邻两项间的距离大小[^2]。 以下是通过float方式实现水平分布的例子： ```html <style> .horizontal-list li{ float:left; margin-right:1em;/* 设置右边框距 */ } </style> <ul class="horizontal-list"> <li>链接A</li> <li>链接B</li> <li>链接C</li> </ul> ``` 另外一种更现代的方法是采用flexbox布局模式来进行更加灵活多变的设计安排。 #### 四、嵌套列表支持 值得注意的是，不仅可以在单层`<ul>`内部添加若干个`<li>`作为其直接子节点，还允许在一个已有的`<li>`之内再引入新的`<ul>`容器，从而形成层次化的数据展现形式。 例如： ```html <ul> <li>主要分类 <ul> <li>次级类别1</li> <li>次级类别2</li> </ul> </li> <!-- 更多项 --> </ul> ``` 这样就可以轻松表达出具有父子关系的信息架构了。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值