CSS列表和超链接的使用（8个案例+代码+效果图+素材）
目录
1.无序列表ul
案例:定义不同type的li
1.代码
2.效果
2.有序列表ol
type 取值
start属性
value
案例:定义不同类型的有序列表
1.代码
2.效果
3.定义列表dl
1.代码
2.效果
4.list-style-type属性
list-style-type的取值
案例:list-type的使用
1.代码
2.效果
5.list-style-image属性
案例:为列表添加图片序号
1.代码
2.效果
6.list-style-position属性
案例:list-style-postion的使用
1.代码
编辑
2.效果
7.超链接
案例：制作百度连接和CSND连接
1.代码
2.效果
8.锚点连接
案例:页面跳转+浮动窗口（跳转指定球）
1.代码
2.效果
1.无序列表ul
ul是无序列表，li是ul的列表项
案例:定义不同type的li
type的取值说明
disc 默认是实心圆点circle 是一个空心远点square 是一个是新方块
1.代码
-
这是我的无序列表1的内容
-
这是我的无序列表2的内容
-
这是我的无序列表3的内容
-
这是我的无序列表4的内容
2.效果
2.有序列表ol
ol是有序列表
type 取值
1 是数字 使列表的前置数字为1a 是小写字母 使列表的序号变为小写字母A 是大写字母 使列表的序号变为大写字母i 是罗马数字 使列表序号变为罗马数字 小I 是罗马数字 使列表序号变为罗马数字 大
start属性
定义该项的起始位置
value
定义该项的值
案例:定义不同类型的有序列表
1.代码
-
type为数字
-
type为小写字母
-
type为大写字母
-
type罗马数字 小
-
type罗马数字 大
-
start属性:定义该项的起始位置
-
value属性
2.效果
3.定义列表dl
dl标签定义列表，dt是列表头，dt是列表子项
案例:dl的基本使用
1.代码
- dt定义列表的头部
- dd定义列表的内容
- dt定义列表的头部
- dd定义列表的内容
2.效果
4.list-style-type属性
用于定义列表
list-style-type的取值
desc 实心圆circle 空心圆square 实心方块decimal 阿拉伯数字lower-roman 小写罗马数字lower-alpha 小写英文字母lower-latin 小写拉丁字母hebrew 希伯编号none 不使用项目符号cjk-ideographic 简单的数字georgian 表意数字decimal-leading-zero 0开头的阿拉伯数字upper-roman 大写罗马数字upper-Latin 大写拉丁字母armeniaan 亚美尼亚编号的方式
案例:list-type的使用
1.代码
-
decimal 阿拉伯数字
-
lower-roman 小写罗马数字
-
lower-alpha 小写英文字母
-
lower-latin 小写拉丁字母
-
hebrew 希伯编号
-
none 不使用项目符号
-
cjk-ideographic 简单的数字
-
georgian 表意数字
-
decimal-leading-zero 0开头的阿拉伯数字
-
upper-roman 大写罗马数字
-
upper-Latin 大写拉丁字母
-
armeniaan 亚美尼亚编号的方式
2.效果
5.list-style-image属性
list-style-image这个用来定义序号为图片
案例:为列表添加图片序号
1.代码
- ONE_Li
- TWO_Li
- THREE_Li
- FOUR_Li
- FIVE_Li
- SIX_Li
- SEVEN_Li
2.效果
6.list-style-position属性
list-style-position属性说明
inside 在列表里面outside 在列表外面
案例:list-style-postion的使用
1.代码
- ONE_Li
- TWO_Li
- THREE_Li
- FOUR_Li
- FIVE_Li
- SIX_Li
- SEVEN_Li
2.效果
文本/图像href: 用于指定连接地址target 指定弹出的方式
_self原窗口打开 _target新窗口打开
案例：制作百度连接和CSND连接
1.代码
2.效果
点击百度,弹出一个新窗口
点击csdn，在原来的窗口打开
8.锚点连接
通过href和控件的id属性跳转指定位置
案例:页面跳转+浮动窗口（跳转指定球）
1.代码
2.效果
附录:
所用素材下载
aMouse.png等2个文件官方版下载丨最新版下载丨绿色版下载丨APP下载-123云盘
