基本用法:

<ul type="cir">
<li>显示数据</li>
<li>显示数据</li>
</ul>

type可用的选项有三个:

circle      空心圆形
disc 实心圆形
square 方块

来看下面的代码:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>无序列表</title>
</head>
<body>
<ul>
<li>光辉岁月</li>
<li>大地</li>
<li>灰色轨迹</li>
</ul>
</body>
</html>

显示的效果如下:

想为这个列表添加一个背景色,该怎么做呢??

修改后的代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>无序列表</title>
</head>
<body>
<ul style="background-color: pink;">
<li>光辉岁月</li>
<li>大地</li>
<li>灰色轨迹</li>
</ul>
</body>
</html>

显示效果如下:

把列表前面的实心加点改成空心圆点,要加type属性.

修改后的代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>无序列表</title>
</head>
<body>
<ul style="background-color: pink;" type="circle">
<li>光辉岁月</li>
<li>大地</li>
<li>灰色轨迹</li>
</ul>
</body>
</html>

修改后的效果如下:

更改成功了.

同样的,想把列表前面改成空心正方形,只需要把type的属性值修改为"square"就可以了.

HTML核心标签之表格标签(二)的更多相关文章

  1. HTML核心标签之表格标签(一)

    表格的基本语法: <body> <table> <tr><td></td><td></td></tr> ...

  2. HTML入门(转义字符、行内样式和块级元素、定位、锚点、跑马灯标签、图片标签、表格标签的讲解)

    一.转义字符由特殊字符包裹的文本 会当做标签去解析 对应不换行空格 对应全角空格 em是字体排印学的计量单位,相当于当前指定的点数.其占据的宽度正好是1个中文宽度,而且基本上不受字体影响.<对应 ...

  3. Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)

    一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...

  4. HTML常用标签与表格标签

    超链接标签: <a href="超链接地址" target="_blank">超链接的文字</a> _blank或new是在新网页中打开 ...

  5. HTML-常用标签与表格标签

    超链接标签: <a href="超链接地址" target="_blank">超链接的文字</a> _blank或new是在新网页中打开 ...

  6. HTML高级标签之表格标签

    前面学习了一下HTML的经常使用标签, 今天開始高级标签之路! 一.表格标签 1.作用: 创建一张表格 2.各属性作用: <table cellspacing="0" cel ...

  7. HTML基本标签,表格标签,框架标签

    1.html简介 1.1什么是html html全称:Hyper Text Markup Language(超文本标记语言) 备注:           a.超文本:页面内可以包含图片.链接,甚至音乐 ...

  8. 讲课笔记1——meta标签、表格标签

    图片属性:src(source): 图片的来源(路径),可以放置本地图片,也可以放网上的图片的url地址 [相对路径:        ./:当前目录            ../:跳出当前目录,到上一 ...

  9. HTML的列表标签和表格标签

    网页的列表和表格 列表的分类 无序列表 有序列表 自定义列表 有序列表 <!--有序列表--><ol>    <li>辽宁</li>    <li ...

随机推荐

  1. HDU 1728 逃离迷宫(DFS经典题,比赛手残写废题)

    逃离迷宫 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  2. BZOJ 1207: [HNOI2004]打鼹鼠【妥妥的n^2爆搜,dp】

    1207: [HNOI2004]打鼹鼠 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 3259  Solved: 1564[Submit][Statu ...

  3. HDU 1541 树状数组

    树状数组入门博客推荐 http://blog.csdn.net/qq_34374664/article/details/52787481 Stars Time Limit: 2000/1000 MS ...

  4. ES5.0集群搭建

    最近在网上看到很多ES集群的搭建方法,本人在这人使用Elasticsearch5.0.1版本,介绍如何搭建es集群并安装head插件和其他插件安装方法. 一.搭建环境(2台Centos7系统服务器) ...

  5. [国嵌攻略][156][I2C自编设备驱动设计]

    AT24C08的驱动在Linux内核中已经提供,在/drivers/misc/eeprom/at24.c文件中.在对应的probe函数中有一个创建/sys/.../eeprom文件的函数,应用程序通过 ...

  6. oracle游标的使用

    --游标的使用 步骤1.声明游标 .打开游标 .获取数据 .关闭游标 declare cursor cur is select * from emp; t_sal cur%rowtype; begin ...

  7. 详解用em替换px

    em 的实际大小是相对于其上下文的字体大小而言的.如果我们给<body>标签设置文字大小为 100%,给其他文字都使用相对单位 em,那这些文字都会受body 上的初始声明的影响.这样做的 ...

  8. How to find missing USB Records?

    In my previously article "EnCase missed some USB activities in the evidence files", I ment ...

  9. thinkphp5自动完成

  10. Bootstrap中data-src无法显示图片,但是src可以

    在学习bootstrap时,书中的源码是用的data-src来定义图像位置,但是我在使用的时候无法显示图片:data-src可以在img标签中使用来显示图片吗?我使用src可以,而是用data-src ...