基本用法:

<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. [51nod1213]二维曼哈顿距离最小生成树

    二维平面上有N个坐标为整数的点,点x1 y1同点x2 y2之间的距离为:横纵坐标的差的绝对值之和,即:Abs(x1 - x2) + Abs(y1 - y2)(也称曼哈顿距离).求这N个点所组成的完全图 ...

  2. CodeForces628-B.New Skateboard

    B. New Skateboard time limit per test 1 second memory limit per test 256 megabytes input standard in ...

  3. 2017ecjtu-summer training # 9 HDU 4544

    湫湫系列故事--消灭兔子 Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others)Tota ...

  4. WEB 小案例 -- 网上书城（一）

    距离上次写博客有两周了吧,最多的原因就是自己期末考试了,上课没听就只能在期末狠狠的复习了,毕竟已经挂科了.当然还是因为自己懒吧!!!废话不多说开始我们今天的正题,网上书城! 一. 新建数据表(MySQ ...

  5. java.lang.NoSuchMethodError: javax.wsdl.xml.WSDLReader.readWSDL(Ljavax/wsdl/xml/WSDLLocator;Lorg/w3c/dom/Element;)Ljavax/wsdl/Definition;

    http://stackoverflow.com/questions/6066054/whats-wrong-with-my-apache-cxf-client You likely have a 1 ...

  6. parseInt原来是这样用的

    今天在群里无意中看到了这样一个问题,突然发现不会,结果运行一看,懵逼了,不知道为什么???(结果是啥?自己去试试看) 现在我们还是先来复习一下parseInt()这个知识点吧! parseInt() ...

  7. 10年java过来人聊聊自己的自学、培训和工作经历

    一 . 自我介绍 我叫王涛,我是一位北漂十年的码农,2008年9月份开始自学java,三个月后,自学无果,于2008年11月份开始参加培训,培训完之后,我觉得自己还是啥也不会,只会抄抄代码,竟然连de ...

  8. O2O网站

    编辑 020是新型的网络营销模式,O2O即Online To Offline,线下销售与服务通过线上推广来揽客,消费者可以通过线上来筛选需求,在线预订.结算,甚至可以灵活地进行线上预订,线下交易.消费 ...

  9. 5.04 toArray()有一个问题须要解决一下

    把查询数据转为数组输出,这个toArray()方法是把对像转为数组输出,本身是没啥 问题.但是里面好像少写了一句判断:应先判断这个对像是否为空!如果为空则不转换直接输出空就行了吗,否则一个空值去转成数 ...

  10. javascript中window.location.search的用法和作用。

    用该属性获取页面 URL 地址: window.location 对象所包含的属性 属性 描述 hash 从井号 (#) 开始的 URL(锚) host 主机名和当前 URL 的端口号 hostnam ...