您的位置:首页> 前端教程> HTML教程
文章导航

HTML <ul> 无序列表

2018-11-5 09:59| 作者: admin| 查看: 1262| 评论: 0|来自: 蚂蚁部落

ul的英文全称是unordered lists,翻译成汉语就是无序列表的意思。

顾名思义,通过<ul>元素可以创建无序列表。

所谓无序列表,就是列表前面没有采用类似数字之类能够体现先后顺序标识。

无序列表和有序列表相对应,具体参阅HTML <ol>无序列表一章节。

其实在实际工作中,无所谓无序列表与有序列表,因为自带的列表标识基本毫无用处。

<ul>是具体列表的父元素,<li>元素用于定义真正的列表内容。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>蚂蚁部落</title>   
</head> 
<body> 
<ul type="dise">
  <li>蚂蚁部落一</li>
  <li>蚂蚁部落二</li>
  <li>蚂蚁部落三</li>
</ul>
<ul type="circle">
  <li>蚂蚁部落一</li>
  <li>蚂蚁部落二</li>
  <li>蚂蚁部落三</li>
</ul>
<ul type="square">
  <li>蚂蚁部落一</li>
  <li>蚂蚁部落二</li>
  <li>蚂蚁部落三</li>
</ul>
</body> 
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/05/100056ido937f79739wyzy.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码分析如下:

(1).通过<ul>定义三个无序列表。

(2).列表的具体内容通过<li>元素定义,li是list的缩写。

(3).通过type定义了列表前端的标识,每一种类型标识都无法区别出先后顺序。

type属性说明:

(1).dise:实心圆(默认值)。

(2).circle:空心圆。

(3).square:实心方块。

关于标签自带属性说明:

标签自带属性的初衷是为了提高开发效率。

但遗憾的是,这些属性通常毫无用处,不但外观丑陋,而且它的位置也难以控制。

根本无法满足客户对美观度的需求,所以还是需要通过CSS来对列表进行美化。

CSS提供了设置了表样式的属性,具体参阅CSS 设置列表样式一章节。

不过在设置列表前面图片标识时,使用背景图片更加灵活。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
ul{
  list-style-type:none;
  padding:0px;
  margin:0px;
}
ul li{
  background-image:url(mytest/div+css/index.jpg);
  background-repeat:no-repeat;
  background-position:0px 5px; 
  padding-left:14px;
}
</style>
</head>
<body>
<ul>
  <li>蚂蚁部落一</li>
  <li>蚂蚁部落二</li>
  <li>蚂蚁部落三</li>
</ul>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/05/100159p4g8g75gj71jg9oi.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

列表前面的小箭头是一个背景图片,然后使用background-position将其控制到一个恰当位置。

此方式非常的灵活,可以任意定制列表前面的标识,并且位置完全可控,推荐使用。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部