❮ 上一节 下一节 ❯
HTML 无序列表HTML <ul> 标签界说无序(项指标记)列表。
无序列表无序列表以 <ul> 标签初步。每个列表项都以 <li> 标签初步。
无序列表是一个项宗旨列表,默许状况下,此列名目运用粗体圆点(典型的小黑圆圈)停行符号:
真例
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
亲身试一试 »
无序列表 - 选择列表项符号CSS list-style-type 属性用于界说列表项符号的花式。它可以具有以下值之一:
值 形容真例 - 项指标记
<ul style="list-style-type:disc;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
真例 - 圆形
<ul style="list-style-type:circle;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
真例 - 正方形
<ul style="list-style-type:square;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
真例 - None
<ul style="list-style-type:none;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
列表可以嵌淘(列表中的列表):
真例
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
注释: 一个列表项 (<li>) 可以包孕一个新的列表和其余 HTML 元素,比如图像和链接等。
CSS 水平列表HTML 列表可以用多种差异的 CSS 方式设置花式。
一种风止的办法是水平设置列表花式,以创立导航菜单:
真例
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
oZZZerflow: hidden;
background-color: #333333;
}
li {
float: left;
}
li a {
display: block;
color: white;
teVt-align: center;
padding: 16pV;
teVt-decoration: none;
}
li a:hoZZZer {
background-color: #111111;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
提示: 理解更多有关CSS的信息: CSS 教程。
原章小结运用 HTML <ul> 元素界说无序列表
运用 CSS list-style-type 属性界说列表项符号
运用 HTML <li> 元素界说列表项
列表可以嵌淘
列表项可以包孕其余 HTML 元素
运用 CSS 属性 float:left 从右到左水平显示列表
HTML List 标签 标签 形容
如需所有可用的 HTML 标签的完好列表,请会见 HTML 标签参考手册。
❮ 上一节 下一节 ❯