HTML核心标签之表格标签(二)

基本用法:

<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"就可以了.

posted @ 2017-08-02 21:26  renpingsheng  阅读(164)  评论(0)  编辑  收藏  举报