HTML无序列表ul标签用法_随笔

我们在用HTML编写页面的时候，经常需要用ul标签来调整列表。那么如何使用ul标签呢？下面我给大家分享一下。

工具/材料

sublime text

首先我们打开sublime text软件新建一个html文档，如下图所示

然后在html文档中加入ul标签内容，如下图所示

运行页面代码以后你就会看到ul中的内容按顺序输出了，如下图所示

另外我们也可以通过type属性指定内容前面的标签类型，如下图所示

<!DOCTYPE html>

<head>

<title>Arrow</title>

<style>

html, body, ul{margin: 0 padding: 0 background-color: #000}

ul, li{margin: 0 padding: 0 list-style: none}

#box{position: relative width: 100px height: 50px background-color: red text-align: center margin: 100px auto}

h3{width: 100% height: 100% line-height: 50px margin: 0}

ul{background-color: #fff display: none}

li{font-size: 14px line-height: 30px cursor: pointer}

span{position: absolute display: none border: 6px solid transparent border-bottom-color: #fff left: 50% margin-left: -6px top: 38px}

#box:hover ul{display: block}

#box:hover span{display: inline-block}

</style>

</head>

<body>

<ul>

<li>合作保障机构</li>

<li>CFCA战略合作</li>

<li>政策法规保障</li>

</ul>

</div>

</body>

</html>

可以通过图片，但是性能上稍微差一点，可以用一个标签的边框来表示，下边框有颜色其余的透明然后定位即可。代码是个小例子，你可以看看。

欢迎分享，转载请注明来源：内存溢出

HTML无序列表ul标签用法