ul和li 基本用法分析

最新推荐文章于 2024-04-19 12:54:59 发布
最新推荐文章于 2024-04-19 12:54:59 发布
阅读量1k 收藏 1
点赞数
分类专栏： ASP javascript 文章标签： float div xhtml menu 资讯 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>
<title>ul和li应用</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; clear:both;width:100px;display:inline; font-size: larger;}
#myul li{float:left;width:100px;}
</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>
<div>默认是竖排，并且带圆点
<ul>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
</ul>
</div>
<div>
<ul>
<li style="list-style-type:none;">去掉圆点</li>
<li style="display:inline;">hello</li>
<li>hello</li>
<li style="display:inline;">hello</li>
</ul>
</div>
<!--横向的方法,如果要居中，需要设置宽度才可以，这个宽度要和里面的li总长度一样。-->
<div style="text-align:center;background:#def">
<ul style="width:150px;background:#eee;">
<li style="float:left;">hello</li>
<li style="float:left;">hello</li>
<li style="float:left;">hello</li>
<li style="float:left;">hello</li>
<li style="float:left;">hello</li>
</ul>
</div>
<!--制作表格的原理，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>
</body>
</html>

详细出处参考：http://www.jb51.net/web/9731.html

snihcel
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ul-li（div）下拉列表
weixin_43011230的博客
07-11 1478
ul-li（div）下拉列表 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ul-li的下拉列表</title> <style> #sel { display...
ul元素的使用
酷小亚
09-24 2386
为了使网页更易读、排序有序、条理清晰，所以我们要学会ul元素——无序列表 效果图： 代码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>元素的使用</title> </head> <body> <ul> <li>春</li> <li>夏</li> <
无序列表标签＜ul＞和＜li＞
企业级技术与网站app运营
05-18 8495
标签的子标签必须是<li>，绝对不能出现任何其他的标签。但是你把<p>标签写到<li>标签的外面、作为<ul>的直接子标签是错误的。无序列表使用<ul>
CSS入门：ol，ul列表用法详解（附案例）
最新发布
u013179804的博客
04-19 2308
无序列表（<ul>）和有序列表（<ol>）是 HTML 中常用的列表标签。它们在网页中是一种灵活且功能强大的组合方式，能够帮助设计师和开发者有效地组织和展示网页内容，提高页面的可读性、可访问性和用户友好性。ul：用于显示项目列表，项目之间没有顺序关系。默认使用实心圆（●）或者其他符号作为项目符号。ol：用于显示项目序号列表，项目之间有顺序关系，通常用于列出步骤、排名等内容。默认使用数字（1, 2, 3...）作为项目序号，可以通过 CSS 修改序号样式。
html中ul和li标签的用法
热门推荐
kwame211的博客
11-28 7万+
普通的显示数据的时候，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中ul和li标签的用法介绍
xiaoweids的博客
05-16 3336
普通的显示数据的时候，ul就是项目列表，li就是列表项，可以用来显示数据，如果用于DIV＋CSS布局的话，ul+li可以替换表格的作用，具体的设置，如果宽度高度、行间距、背景边框需要配合CSS一起设置，这篇文章主要介绍了html中ul和li标签的用法详解,需要的朋友可以参考下普通的显示数据的时候，ul就是项目列表，li就是列表项。可以用来显示数据。如果用于DIV＋CSS布局的话，ul+li可以替换表格的作用，具体的设置，如果宽度高度、行间距、背景边框等需要配合CSS一起设置。
ul li标签是什么元素？
Always-Learning
10-25 4038
这两个都是块级元素，可以给宽高！
CSS实现ul和li横向排列的两种方法
11-21
以上就是使用CSS实现`<ul>`和`<li>`横向排列的两种方法，每种方法都有其优缺点，开发者应根据项目需求和浏览器兼容性选择合适的方法。在实际开发中，还应注意调整`line-height`、`padding`等属性，以达到理想的布局...
修改UL和LI间隔的简单方法
12-13
本文将详细讲解如何使用CSS来修改`<ul>`和`<li>`元素之间的间隔，使得列表更加紧凑或者适配不同的设计需求。 `<ul>`（无序列表）和`<li>`（列表项）是HTML中常用的结构元素，通常用于展示项目列表。默认情况下，...
css中使用ul li ul li ul li ul li 实现四层级联菜单
09-25
四级菜单的使用很常见实现的方法也有很多，在本文为大家介绍下使用ul li ul li ul li ul li 来轻松实现下，感兴趣的朋友可以参考下
【一篇文章带你掌握HTML中ul、ol和dl列表的使用 - 超详细】
liuqinhou的博客
05-27 2062
有序列表就是有明确标注先后顺序的列表需要逐条给出定义描述的列表，就是定义列表，定义列表最大的特点就是对每一项内容都给出解析说明。ul、ol和dl分别要在什么场合下使用？ul是无序列表，适用于页面中一些没有标注先后顺序的列表，比如导航栏等等ol是有序列表，适用于页面中一些有顺序排列的列表，比如轮播图的小圆点dl是定义列表，适用于一些存在对数据项进行描述说明语义的列表ul和li标签（ol和li）标签的嵌套使用规则是什么？
块元素居中方式
gklcsdn的博客
12-10 786
<!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-...
ul与li的使用
刚哥的博客
06-22 1342
一般情况下ul 去掉显示，li 通过浮动来实现横排显示或者竖排显示的效果
＜ul＞和＜li＞标签的作用
qq_55278081的博客
08-15 2053
如果用于DIV＋CSS布局的话，ul+li可以替换表格的作用，具体的设置，如果宽度高度、行间距、背景边框等需要配合CSS一起设置。普通的显示数据的时候，ul就是项目列表，li就是列表项。
UL-LI 标签结合CSS的运用
04-19 1239
LI代码的格式化:A).运用CSS格式化列表符： ul li{list-style-type:none;}B).如果你想将列表符换成图像，则： ul li{list-style-type:none;list-style-image: url(images/icon.gif);}C).为了左对齐，可以用如下代码： ul{list-style-type:none;margin:0px;}D
ul和li的用法
温故知新
03-31 1万+
一、清除缩进和项目符 1、清除项目符和缩进：ul {list-style: none; padding-left:0px;} 2、清除缩进    ul {margin:7;list-style-type:disc;} 3、清除缩进    ul {margin-left:20px} 4、清除缩进    ul {margin-left: -24px;} 二、更换项目符漂亮小图标 下面有3种
java中ul标签的属性_常用的div ul li css样式 详细的UL-LI样式三种形式
weixin_39883208的博客
02-27 589
常用的div ul li css样式 详细的UL-LI样式三种形式BODY {FONT-SIZE: 12px;FONT-FAMILY: "宋体", arial}.menu {CLEAR: both; OVERFLOW: hidden; HEIGHT: 22px}.menu LI {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 2px;...
li和ul标签用法举例
VirgooooS
11-22 1122
或者 是项目列表，是列表项。是无序列表，就是用符号来列的，所以你列出来默认的就是黑点，是编号列表，用数字来列的，也是用做列表项， 是 list item 即列表项，但列表有很两种，所以外面得有 或者 用来区别无序列表（小点点）和有序列表（1,2,3...）。 A).运用CSS格式化列表符： [code="java"] ul li{ list-style-type:no...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值