html中ul和li标签的用法
2024-06-20 02:36:26
普通的显示数据的时候，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和li标签的用法相关推荐
- html中ul和li标签的用法介绍
普通的显示数据的时候,ul就是项目列表,li就是列表项,可以用来显示数据,如果用于DIV+CSS布局的话,ul+li可以替换表格的作用,具体的设置,如果宽度高度.行间距.背景边框需要配合CSS一起设置 ...
- ul列表li标签前加带有颜色的圆点技巧
项目开发中,ul列表布局时li标签带有样式圆点??应该如何去处理呢? 一般情况下,默认的li标签前是有黑色小圆点,但是其颜色无法改变. 在布局初始化的时候我们会去掉默认样式. 所以,今天就为大家讲解一 ...
- php中 datalist,html5 datalist标签的用法是什么？这里有datalist标签的用法实例
本篇文章主要为大家讲述了关于html5 datalist标签的用法及html5 datalist标签的用法实例.本文说了两个常用的选项框的实例供大家选择观看,下面就让我们一起来看这篇文章吧 我们先来看 ...
- HTML中 ＜img＞标签的用法
<img> 语法 在HTML网页中经常需要插入图片,使页面更加美观,表达更加清晰准确.插入图片,在 HTML中是由<img>标签定义的,通过它可以导入需要显示的图片.<i ...
- ul、li 标签实现完美表格
第一种是没有缺口的,如下图 第二种是有缺口的,如下图 两种表格的最大特点就是不用给表格里的每个 li 元素都单独设置 css 样式,要用的时候直接闭着眼睛循环 li 标签即可. 第一种的特点是 1.内 ...
- CSS中如何去掉li标签前面的小圆点
CSS去掉li标签前面的小圆点 ul li 代码示例 <ul><li>西瓜</li><li>冬瓜</li><li>南瓜</ ...
- php正则获取li,用正则表达式抓取网页中的ul 和 li标签中最终的值！
获取你要抓取的页面 const string URL = "http://www.hn3ddf.gov.cn/price/GetList.html?pageno=1"; ...
- 关于H5中的video/video标签的用法总结
写了一个H5播放视频的功能, 遇到一些问题,记录一下,借鉴了一些博友的文章,如果有侵权请联系删除 现在如果要在页面中使用video标签,需要考虑三种情况,支持Ogg Theora或者VP8(如果这玩意 ...
- mybatis中＜choose＞标签的用法
choose 标签是按顺序判断其内部 when 标签中的 test 条件出否成立,如果有一个成立,则 choose 结束.当 choose 中所有 when 的条件都不满则时,则执行 otherwis ...
最新文章
- 【进阶玩法】Angular用emit()实现类似Vue.js的v-model双向绑定[(ngModel)]功能
- c++观察者模式observer
- Linux服务部署之NTP时间服务器
- 利用Linux socket 模拟大华IPC发送广播包，让大华客户端搜索到一个模拟的ip摄像头
- C语言新手入门成长帖（1）
- 如何用C语言实现批量修改文件类型
- excel - 单元格的表示方式 （称为：单元格引用 ）（类似：变量表示单元格）
- 金蝶KIS旗舰版7.03 KIS旗舰版7.01 金蝶KIS专业版16.04 KIS专业版16.01 KIS商贸版9.04 KIS商贸版9.01 金蝶K3 15.1 云星空Cloud7.6企业版标准版
- 阅读心得1：《蚂蚁金服11.11：支付宝和蚂蚁花呗的技术架构及实践 》
- linux移除硬盘命令,在Linux中在线添加及移除SCSI硬盘方法
- How browsers work----Introduction
- 高纯度钨酸铜粉末/钨酸铁粉末/钨酸亚铁粉末/硫化铋粉末/铬酸铋粉末/氧化锆粉末/铬酸钡粉末
- Windows powershell Terminal；linux tmux终端分屏使用；tabby终端使用
- 国内首家专注影视文化产业的数藏平台“神缘”即将上线
- 如何恢复计算机中被隐藏的文件夹,电脑中病毒后，文件与文件夹被隐藏，如何恢复正常显示。...
- [AWT] 常用组件
- 聊聊微软的两个产品XBOX和SharePoint
- UEFI win7 U盘制作安装激活
- 【附源码】计算机毕业设计java医疗门诊管理系统设计与实现
- 正则表达式快速入门笔记