您的位置：首页 > Web前端 > HTML

HTML----列表

2014-04-07 00:08 127 查看

ul和ol列表的基本用法
<ul>:定义无序列表
<ol>:定义有序列表
<li>:列表下唯一子元素，定义列表项。

应用与效果展示：

ul和ol的type属性
虽然不建议，但是通过list-style-type，让ul和ol在页面显示上由无序变有序，由有序变无序。
type主要有以下几个属性值：
disc—实心圆(ul默认）、circle—空心圆、square—实心方块
1—数字（ol默认）、a—小写字母、A—大写字母、i—小写希腊字母、I—大写希腊字母。

应用
用列表ul或ol做菜单栏
<head>
<title>test</title>
<style>
li{
border:1px blue dashed;
float: left;
list-style-type: none;
padding: 5px 5px;
}
</style>
</head>

<body>
<ul>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
</ul>
</body>
</html>
效果显示：

如上所示，通过设置
“float: left;”，可以使块级li元素变成字符级。搭配使用a元素，便实现了简易的菜单设置。
（注意：设置display属性也可以达到left的效果，但是对type属性有影响）

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 菜单栏 ul ol

相关文章推荐

新的分享

章节导航