基本用法:

<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. [bzoj1819] [JSOI]Word Query电子字典

    正解是trie树...在树上跳来跳去什么的 然而在企鹅qq那题的影响下我写了hash... 添加一个字母到一个串,就相当于另一个串删对应位置上的字母. 改变某个位置上的字母,就相当于两个字符串删掉同一 ...

  2. An Easy Problem?!（细节题，要把所有情况考虑到）

    http://poj.org/problem?id=2826 An Easy Problem?! Time Limit: 1000MS   Memory Limit: 65536K Total Sub ...

  3. [国嵌攻略][173][BOA嵌入式服务器移植]

    1.解压boa嵌入式web服务 tar zxvf boa-0.94.13.tar.gz 2.进入src目录生成配置文件 ./configure 3.修改生成的Makefile CC=arm-linux ...

  4. TypeScript笔记 5--变量声明(解构和展开)

    解构是什么 解构(destructuring assignment)是一种表达式,将数组或者对象中的数据赋给另一变量. 在开发过程中,我们经常遇到这样问题,需要将对象某个属性的值赋给其它两个变量.代码 ...

  5. PHP编码规范及建议

    <h3 align="center">PHP编码规范及建议</h3>### 编码规范- PHP代码文件必须以 <?php 标签开始.```<?p ...

  6. Anaconda入门教程

    Anaconda入门教程 [TOC] Anaconda是什么 Anaconda附带了 conda.Python 和 150 多个科学包及其依赖项.应用程序 conda 是包和环境管理器.Anacond ...

  7. eclipse中如何同期化

    打开MyEclipse8.0help->Software Updates->find and install(如果没有这个就用help->Software Updates->A ...

  8. 【笔记】BFC 模型知识整理

    网上看了很多 BFC 的概念,发现都说得不是很完整和深入,刚好最近看了一些视频教程说到了 BFC 概念所以记录一下. BFC 的概念: BFC 全称:Block format context 块级格式 ...

  9. JVM之GC算法

  10. 洛谷 P1078 文化之旅

    P1078 文化之旅 题目描述 有一位使者要游历各国,他每到一个国家,都能学到一种文化,但他不愿意学习任何一种文化超过一次(即如果他学习了某种文化,则他就不能到达其他有这种文化的国家).不同的国家可能 ...