本站首页 收藏本站
广告位联系

APP正在开发中...
返回顶部
您的位置： 主页 > 网页 > html5 >

收藏
分享到

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

html5 来源：互联网 作者：佚名 发布时间：2023-02-23 21:46:47 人浏览
摘要

普通的显示数据的时候，ul就是项目列表，li就是列表项。可以用来显示数据。如果用于DIV＋CSS布局的话，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>


版权声明 : 本文内容来源于互联网或用户自行发布贡献，该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权， 违法违规的内容， 请发送邮件至2530232025#qq.cn(#换@)举报，一经查实，本站将立刻删除。

您可能感兴趣的文章 :

原文链接 :
相关文章
  • H5使用Vant自适应布局(postcss-pxtorem)介绍
    1、安装 postcss-pxtorem 1 npm install postcss postcss-pxtorem --save-dev 2、在根目录新建postcss.config.js，配置 postcss-pxtorem 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 1

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

    html中ul和li标签的用法介绍
    普通的显示数据的时候，ul就是项目列表，li就是列表项。可以用来显示数据。如果用于DIV＋CSS布局的话，ul+li可以替换表格的作用，具体的

  • HTML5 Web Worker(多线程处理)介绍

    HTML5 Web Worker(多线程处理)介绍
    概述 JavaScript的执行环境是单线程的，也就是一次只能执行一个任务。如果遇到多个任务时，只能排队依次执行。 在HTML5中，可以使用Web W
  • html5播放器实现倍速播放的方法介绍
    定义和用法 playbackRate 属性设置或返回音频的当前播放速度。 playbackspeed 指示音频的当前播放速度。 例值： 1.0 正常速度 0.5 半速（更慢）

  • 短视频滑动播放在H5下的实现方式

    短视频滑动播放在H5下的实现方式
    这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 短视频已经无数不在了，但是主体还是使用 app 来承载的。本文讲述

  • HTML5页面打开微信小程序功能实现

    HTML5页面打开微信小程序功能实现
    微信终于支持由页面跳转至小程序啦 ~ 步骤一：绑定域名 登录微信公众平台进入公众号设置的功能设置里填写JS接口安全域名。 步骤二：引
  • html5+实现plus.io进行拍照和图片等获取
    使用Hbuilder开发工具开发：实现可对Android机进行控制和获取资源 说明：IO模块管理本地文件系统，用于对文件系统的目录浏览、文件的读取

  • HTML标签实现带动画的抖音LOGO效果

    HTML标签实现带动画的抖音LOGO效果
    先上结果，最终实现效果如下： 还原度应该还可以吧？ 抖音Logo结构 想要用CSS来画抖音的Logo，前提要先了解它的构造，一定是一些几何图形

  • video.js支持m3u8格式直播的实现教程

    video.js支持m3u8格式直播的实现教程
    为什么要使用video.js？ 1. PC端浏览器并不支持video直接播放m3u8格式的视频 2. 手机端各式各样的浏览器定制的video界面风格不统一，直接写原生
  • html5调用摄像头截图功能的介绍
    关于html5调用音视频等多媒体硬件的API已经很成熟，不过一直找不到机会把这些硬件转化为实际的应用场景，不过近年来随着iot和AI的浪潮，
推荐阅读
最新更新
友情链接
  • 本站所有内容来源于互联网或用户自行发布，本站仅提供信息存储空间服务，不拥有版权，不承担法律责任。如有侵犯您的权益，请您联系站长处理！
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计