中的三种列表,html有序列表和无序列表
分类:web前端

  • (X)HTML 中的三种列表-介绍
  • (X)HTML 中的三种列表-UL、OL
  • (X)HTML 中的三种列表-DL

列表

1.无序列表
无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。
无序列表使用 <ul> 标签

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

圆点列表:<ul style="list-style-type:disc"> </ul>
圆圈列表:<ul style="list-style-type:circle"> </ul>
正方形列表:<ul style="list-style-type:square"> </ul>
嵌套列表​:

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

2.有序列表
有序列表也是一列项目,列表项目使用数字进行标记。 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
列表项项使用数字来标记

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

大写字母列表:<ol type="A"> </ol>
小写字母列表:<ol type="a"> </ol>
罗马数字列表:<ol type="I"> </ol>
罗马数字列表:<ol type="I"> </ol>
3.自定义列表
自定义列表不仅仅是一列项目,而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

css控制UL LI 的样式详解(推荐)

CSS: 

代码如下:

#menu ul {list-style:none;margin:0px;} 
#menu ul li {float:left;} 

  

代码如下:

<div id="menu"> 
<ul> 
<li><a href="#">首页</a></li> 
<li class="menuDiv"></li> 
<li><a href="#">博客</a></li> 
<li class="menuDiv"></li> 
<li><a href="#">设计</a></li> 
<li class="menuDiv"></li> 
<li><a href="#">相册</a></li> 
<li class="menuDiv"></li> 
<li><a href="#">论坛</a></li> 
<li class="menuDiv"></li> 
<li><a href="#">关于</a></li> 
</ul> 
</div> 

 

 

解释一下: 
#menu ul {list-style:none;margin:0px;} 
list-style:none,这一句是取消列表前点,因为我们不需要这些点。 
margin:0px,这一句是删除UL的缩进,这样做可以使所有的列表内容都不缩进。 

#menu ul li {float:left;} 
这里的 float:left 的左右是让内容都在同一行显示,因此使用了浮动属性(float)。 

 

CSS中的ul与li样式详解
ul和li列表是使用CSS布局页面时常用的元素。在CSS中,有专门控制列表表现的属性,常用的有list-style-type属性、list-style-image属性、list-style-position属性和list-style属性。

  一、list-style-type属性

  list-style-type属性是用来定义li列表的项目符号的,即列表前面的修饰。list-style-type属性是一个可继承的属性。其语法结构如下:(列举一些常用的属性值)

  list-style-type:none/disc/circle/square/demical/lower-alpha/upper-alpha/lower-roman/upper-roman

  list-style-type属性的属性值有很多,在这里我们只是列举了比较常用的几个。

none:不使用项目符号。 disc:实心圆。 circle:空心圆。 square:实心方块。 demical:阿拉伯数字。 lower-alpha:小写英文字母。 upper-alpha:大写英文字母。 lower-roman:小写罗马数字。 upper-roman:大写罗马数字。

  使用list-style-type属性的示例代码如下:

li{
list-style-type:square;}

<ul>
<li>这里是列表内容</li>
<li>这里是列表内容</li>
<li>这里是列表内容</li>
</ul>

 

  该样式应用到页面的效果如下图所示。

图片 1

  二、list-style-image属性

  list-style-image属性用来定义使用图片代替项目符号。它也是一个可继承属性,其语法结构如下:

  list-style-image:none/url

  list-style-image属性可以取两个值:

none:没有替换的图片。 url:要替换图片的路径。

  来看一段代码:

li{
list-style-image:url(images/bg03.gif);}

<ul>
<li>这里是列表内容</li>
<li>这里是列表内容</li>
<li>这里是列表内容</li>
</ul>

 

  效果如下图。

图片 2

  三、list-style-position属性

  list-style-position属性,是用来定义项目符号在列表中显示位置的属性。它同样是一个可继承的属性,语法结构如下:

  list-style-position:inside/outside

inside:项目符号放置在文本以内。 outside:项目符号放置在文本以外。

  使用list-style-position属性的示例如下:

li{
list-style-type:square;
list-style-position:outside;}

<ul>
<li>这里是使用list-style-position属性值为outside的示例。请注意换行以后项目符号的位置。</li>
<li>这里是列表内容</li>
<li>这里是列表内容</li>
</ul>

  

  效果如下图所示。

图片 3

  再来看一下属性值为inside的样式。

li{
list-style-type:square;
list-style-position:inside;}

<ul>
<li>这里是使用list-style-position属性值为inside的示例。请注意换行以后项目符号的位置。</li>
<li>这里是列表内容</li>
<li>这里是列表内容</li>
</ul>

  

图片 4

  四、list-style属性

  list-style属性是综合设置li样式的属性,也是一个可以继承的属性,语法结构如下:

  li-style:list-style-type/list-style-image/list-style-position

  各个值的位置可以交换。比如:

li{
list-style:url(images/bg03.gif) inside;}

<ul>
<li>这里是使用list-style属性的示例。请注意换行以后项目符号的位置。</li>
<li>这里是列表内容</li>
</ul>

 

  可以看一下应用到页面的效果。

图片 5

 

 

有序列表: 按照字母或数字等顺序排列的列表项目. 注意有序列表的结果是带有前后顺序之分的编号,如果插入和删除一个列表项,编号会自动调整。

基本语法:      

<ol>

    <li>项目1</li>

    <li>项目2</li>

    <li>项目3</li>

</ol>

有序列表的属性标记:<type >、<start>

基本语法:     

<ol type=value1 start=value2>

    <li>项目1</li>

    <li>项目2</li>

    <li>项目3</li>

</ol>

value1表示有序列表项目符号的类型, value2表示项目开始的数值. start是编号开始的数字,如start=2则编号从2开始,如果从1开始可以省略,或是在<li>标签中设定value="n"改变列表行项目的特定编号,例如<li value="7">。type=用于编号的数字,字母等的类型,如type=a,则编号用英文字母。使用这些属性,把它们放在<ol>或<li>的的初始标签中。

有序列表type的属性包括(下图):

图片 6

前端07班 王
大家晚上好,今天晚上刚学完前端课不知道写些什么,于是就顺手总结了一下ul,li和ol,li,dl,dt,dd标签的区别,希望对大家有帮助,好了,开始正题走起。


区块

HTML可以通过 <div> 和 <span>将元素组合起来
1.块级元素
块级元素在浏览器显示时,通常会以新行来开始(和结束)。
实例: <h1>, <p>, <ul>, <table>
2.内联元素
内联元素在显示时通常不会以新行开始。
实例: <b>, <td>, <a>, <img>
3.div
<div> 元素是块级元素,它可用于组合其他 HTML 元素的容器。
<div> 元素没有特定的含义。除此之外,由于它属于块级元素,浏览器会在其前后显示折行。
如果与 CSS 一同使用,<div> 元素可用于对大的内容块设置样式属性。
<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。
4.span
<span> 元素是内联元素,可用作文本的容器
<span> 元素也没有特定的含义。
当与 CSS 一同使用时,<span> 元素可用于为部分文本设置样式属性。

有序列表示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<html>
<head>
<title>有序列表示例</title>
</head>
<body>
    <ol>
        <li>默认的有序列表</li>
        <li>默认的有序列表</li>
        <li>默认的有序列表</li>
    </ol>
    <ol  type=a start=2>
        <li>第1项</li>
        <li>第2项</li>
        <li>第3项</li>
        <li value= 20>第4项</li>
    </ol>
    <ol  type= I start=2>
        <li>第1项</li>
        <li>第2项</li>
        <li>第3项</li>
    </ol>
</body>
</html>

运行结果:

图片 7

 

dl、dt、dd也是列表项,不过它们被忽视得比较厉害,人们只知道ul、ol、li,却经常漠视它们的存在,其实有时候,dl、dt、dd也是非常好用的,这两个家族是近亲,很多地方都是一模一样。dl类似ul,申明一个列表项,里面的dt和dd与li相似。不过dt是上级,dd是下级;dt类似表头,dd类似表身;dt若是一级菜单,dd就是二级菜单。若是用dl家族系列,明显它在语义上更为直观,更符合要求,另外结构也更清晰
ul: unordered listsol: ordered listsli: Lists
ol 有序列表:<ol><li>……</li><li>……</li><li>……</li></ol>表现为:1……2……3……ul 无序列表,表现为li前面是大圆点而不是123:<ul><li>……</li><li>……</li></ul>很多人容易忽略 dl dt dd的用法:dl 内容块dt 内容块的标题dd 内容可以这么写:<dl><dt>标题</dt><dd>内容1</dd><dd>内容2</dd></dl>dt 和dd中可以再加入 ol ul li和p,理解这些以后,在使用div布局的时候,会方便很多,w3c提供了很多元素辅助布局。
LI代码的格式化:
A).运用CSS格式化列表符:
以下是引用片段:ul li{list-style-type:none;}
B).如果你想将列表符换成图像,则:
以下是引用片段:ul li{list-style-type:none;list-style-image: url(/blogicon.gif);}
C).为了左对齐,可以用如下代码:
以下是引用片段:ul{list-style-type:none;margin:0px;}
D).如果想给列表加背景色,可以用如下代码:(http://www.webjx.com/css/)
以下是引用片段:ul{list-style-type: none;margin:0px;}ul li{background:#CCC;}
E).如果想给列表加MOUSEOVER背景变色效果,可以用如下代码:
以下是引用片段:ul{ list-style-type: none; margin:0px; }ul li a{ display:block; width: 100%; background:#ccc; }ul li a:hover{ background:#999; }说明:display:block;这一行必须要加的,这样才能块状显示!
F).LI中的元素水平排列,关键FLOAT:LEFT:
以下是引用片段:ul{list-style-type:none;width:100%;}ul li{width:80px;float:left;}
<ul><li>的区别
<LI> 的参数设定(常用):
例如: <li type="square" value="4">
type="square"
只适用于非顺序清单,设定符号款式,其值有三种,如下,内定为 type="disc":
以下是引用片段:符号 是当 type="disc" 时的列项符号。符号 if" width=10 height=10 border=0> 是当 type="circle" 时的列项符号。符号 是当 type="square" 时的列项符号。value="4"
只适用于顺序清单,设定该一项的数目,其後各项将以此作为起始数目而递增,但前面各项则不受影响,其值只能是 1,2,3.. 等整数,没有内定值。
<UL>称为无序清单标记。
所谓无序清单就是在每一项前面加上 、、等符号,故又称符号清单。
<UL> 的参数设定(常用):
例如: <UL type="square">
type="square"
设定符号款式,其值有三种,如下,内定为 type="disc":
以下是引用片段: 符号 是当 type="disc" 时的列项符号。 符号 是当 type="circle" 时的列项符号。 符号 是当 type="square" 时的列项符号。
<ul>是项目列表,<li>是列表项,项目列表就是用符号来列的,所以你列出来默认的就是黑点,还有一个是<ol>这个是编号列表,用数字来列的,也是用<li>做列表项
<li>是 list item 即列表项,但列表有很两种,所以外面得有 <ul> 或者 <ol> 用来区别无序列表(小点点)和有序列表(1,2,3...)。

用法

UL 和 OL 的用法很像,它们均有子标签 li:

<ul>
  <li>千一产品</li>
  <li>技术文档</li>
</ul>

<ol>
  <li>千一产品</li>
  <li>技术文档</li>
</ol>

一般用法上来说,只是 u 和 o 的区别。默认情况下,ul 项目(li)前面是实心圆点引导,而 ol 是数字(1、2……)引导。但 ul 设置样式 list-style-type:decimal; 也可实现数字引导,所以大多数情况下使用 ul。

li 下可以继续嵌套 ul 或 ol。

属性

ul 和 ol 以及它们的 li 还有几个属性,这几个属性虽然也是符合 XHTML 1.0 Transitional,但 W3C 已经标明并不推荐使用,但了解一下也是没有坏处的。

type 现已经被 CSS 的 list-style-type 取代。

start 只用于 ol,用于项目(li)引导数字从哪个值开始。

value 只用于 li,用于强制设置当前项目(li)引导数字,而不是从上一个项目(li)的引导数字 +1。

compact 设置该属性为 true 后,浏览器使用更紧凑的样式来显示列表。浏览器不一定支持。

  • (X)HTML 中的三种列表-介绍
  • (X)HTML 中的三种列表-UL、OL
  • (X)HTML 中的三种列表-DL

本文由10bet手机官网发布于web前端,转载请注明出处:中的三种列表,html有序列表和无序列表

上一篇:微软将成OpenID提供商,行业组织称苹果ID登陆第三方有漏洞 下一篇:html基础进阶
猜你喜欢
热门排行
精彩图文