位置:电子教程 > HTML入门到精通 (如果看不到内容请使用360浏览器) 推荐学习资源
第1章 HTML 入门
第2章 HTML 基础标签
第3章 HTML 高级标签
第4章 HTML 表单标签
第5章 HTML 媒体和视频(Videos)
当前阅读教程:HTML入门到精通 > 3.5 HTML无序列表 ul标签
阅读(22555525)      收藏       赞(5685)      分享
上一篇: 单元格边距(Cell padding)和单元格间距(Cell spacing) 下一篇: 3.6 HTML 有序列表ol标签

标签定义及使用说明

<ul> 标签定义无序列表。

<li> 标签定义列表项目。将 <ul> 标签与 <li> 标签一起使用,创建无序列表。

使用 CSS 为列表定义样式。

示例

小白教程网www.2d5.net

代码如下:

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

嵌套示例

小白教程网www.2d5.net

代码如下:

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

语法

<ul type="disc|circle|square">
ul的属性

属性

描述

type

Disc

Square

circle

规定列表的项目符号的类型。

Type属性值

描述

disc

默认值。实心圆。

circle

空心圆。

square

实心方块。

下面我们来看下在网页中的效果,示例

小白教程网www.2d5.net

代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML无序列表 ul标签</title>
</head>
<body>
     <ul>
             <li>黄菊华老师</li>
             <li>浙江杭州</li>
     </ul>
     <hr>
     <ul>
             <li>黄菊华老师</li>
             <li>web基础课包含
                      <ul>
                               <li>HTML</li>
                               <li>css</li>
                               <li>javascript</li>
                      </ul>
             </li>
     </ul>   
</body>
</html>

效果如图3-10

image.png

HTML无序列表 ul标签 type几种属性的使用

示例

小白教程网www.2d5.net

代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML无序列表 ul标签 type几种属性的使用</title>
</head>
<body>
     <ul style="list-style: square;">
             <li>a1</li>
             <li>a2</li>
             <li>a3</li>
     </ul>
     <ul type="disc">
             <li>a1</li>
             <li>a2</li>
             <li>a3</li>
     </ul>
     <ul type="circle">
             <li>a1</li>
             <li>a2</li>
             <li>a3</li>
     </ul>
     <ul type="square">
             <li>a1</li>
             <li>a2</li>
             <li>a3</li>
     </ul>   
</body>
</html>

效果如图3-11

image.png




上一篇: 单元格边距(Cell padding)和单元格间距(Cell spacing) 下一篇: 3.6 HTML 有序列表ol标签
毕业设计网             广告联系QQ:45157718(微信同号)