基本用法:

<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. 一步一步从原理跟我学邮件收取及发送 3.telnet命令行发一封信

    首先要感谢博客园管理员的及时回复,本系列的第二篇文章得以恢复到首页,这是对作者的莫大鼓励.说实在的本来我真的挺受打击的.好在管理员说只是排版上有些问题,要用代码块修饰下相关的信息.说来惭愧因为常年编码 ...

  2. Linux下采用VI编辑器删除复制或移动多行文本内容

    一.删除多行 单行删除,:1(待删除行号)d 多行删除,:1,10d dd 删除光标所在行ndd删除以当前行开始的n行dw删除以当前字符开始的一个字符ndw删除以当前字符开始的n个字符d$.D删除以当 ...

  3. c++(快速排序)

    快速排序是编程中经常使用到的一种排序方法.可是很多朋友对快速排序有畏难情绪,认为快速排序使用到了递归,是一种非常复杂的程序,其实未必如此.只要我们使用好了方法,就可以自己实现快速排序. 首先,我们复习 ...

  4. vue vue-style-loader !css-loader错误

    最近在学习vue框架,使用webpack打包vue项目,在执行npm run start的时候 出现如下错误: This dependency was not found: * !!vue-style ...

  5. HDU 1233 还是畅通工程（模板——克鲁斯卡尔算法）

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1233 题意描述: 输入n个城镇以及n*(n-1)/2条道路信息 计算并输出将所有城镇连通或者间接连通 ...

  6. Android ListView 设置单选

    为 ListView 设置选中状态,需要经过如下几个步骤: 设置 ListView 的 android:choiceMode="singleChoice" 设置 ListView ...

  7. libJPEG-turbo库使用示例代码

    libJPEG库是用于编码数据为JPEG格式或者解码JPEG格式图片的常用库,OpenCV读取图像底层实现就是利用libJPEG库,而libJPEG-turbo则效率更高. 具体怎么编译编译libJP ...

  8. 用CSS实现“表格布局”

    当我们进行浮动布局时,会发现存在着非浮动元素与浮动元素的底部难以对齐的情况,这就是浮动布局的缺陷.因此,过去的前端工作者曾利用<table>以实现"表格布局".因为表格 ...

  9. [转]maven打包报错：Failed to execute goal org.apache.maven.plugins:maven-surefire-plugin:2.5:test

    源文URL:http://blog.csdn.net/caiwenfeng_for_23/article/details/44514947 mvn compile  没有问题,mvn package的 ...

  10. linux unzip 解压后文件名乱码

    在windows上zip的包,rz上传到linux下,发现出现乱码.记录下解决过程: 1.确定windows上的默认字符集 在Windows平台下,直接在命令行中,输入:chcp 在显示的结果中,会出 ...