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

简介: 基本用法:显示数据显示数据type可用的选项有三个:circle 空心圆形disc 实心圆形square 方块来看下面的代码:无序列表 光辉岁月 大地 灰色轨迹显示的效果如下:想为这个列表添加一个...

基本用法:

<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>

显示的效果如下:

img_84a646d18f9287321c0cdb33a1588030.png

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

修改后的代码如下:

<!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>

显示效果如下:

img_75ba9935171cb806fd10eeed21db53ae.png

把列表前面的实心加点改成空心圆点,要加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>

修改后的效果如下:

img_96e57a05c15c42a8243e37d87dc479b7.png

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

目录
相关文章
|
22天前
|
移动开发 搜索推荐 HTML5
如何使用HTML5的语义化标签来提高网站的可访问性?
【4月更文挑战第1天】如何使用HTML5的语义化标签来提高网站的可访问性?
24 1
N..
|
1月前
|
前端开发 开发者
HTML表格
HTML表格
N..
11 1
|
6天前
|
前端开发 JavaScript 开发者
html标签的样式
【4月更文挑战第19天】html标签的样式
10 2
|
10天前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
18 1
|
18天前
|
JavaScript
Vue移动 HTML 元素到指定位置 teleport 标签
Vue移动 HTML 元素到指定位置 teleport 标签
|
22天前
|
移动开发 搜索推荐 开发者
HTML5中的语义化标签有哪些?
【4月更文挑战第1天】HTML5中的语义化标签有哪些?
9 0
HTML5中的语义化标签有哪些?
|
24天前
|
存储 移动开发 前端开发
html的常用标签
【4月更文挑战第1天】html的常用标签
22 4
|
1月前
|
移动开发 HTML5
HTML5表格简单应用案例之[招聘需求表]
HTML5表格简单应用案例之[招聘需求表]
11 0
|
1月前
HTML列表、表格和媒体元素
HTML列表、表格和媒体元素
11 0
|
1月前
如何在HTML中添加标签
如何在HTML中添加标签【2月更文挑战第26天】
33 5