列表样式属性
- 在
HTML
中有2
种列表、无序列表和有序列表,在工作中无序列表比较常用,无序列表就是ul
标签和li
标签组合成的称之为无序列表,那什么是有序列表呢?就是ol
标签和li
标签组合成的称之为有序列表,列表的基础知识就简单说明下,本章内容主要说明的是如何给列表设置样式,若有不懂列表是什么的园友笔者建议去 W3school官网 进行学习。 - 列表样式常用的属性有4种如:
list-style-type
、list-style-position
、list-style-image
、list-style
,在这里就是简单说明下列表常用的属性名称而已,具体使用或每一个属性值的介绍,在下面会具体的说明,爱学习的园友不用担心哦。
list-style-type属性
- list-style-type属性作用:就是设置列表前面项目符号的类型。
- list-style-type属性值说明表。
属性值为none使用方式
- 让我们进入列表的
list-style-type
属性值为none
实践,实践内容如:使用class
属性值为.box
将列表前面项目符号去除掉。 - 我们在实践列表的
list-style-type
属性值为none
之前看看列表前面项目符号是什么,让初学者有一个直观的印象。
代码块
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>列表的list-style-type属性值为none实践</title> </head> <body> <ul> <li>成功不是打败别人,而是改变自己。</li> <li>成功不是打败别人,而是改变自己。</li> <li>成功不是打败别人,而是改变自己。</li> </ul> </body> </html>
结果图
现在爱学习的园友们知道了什么是列表前面的项目符号了,那我们就进入列表的 list-style-type
属性值为 none
实践咯。
代码块
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>列表的list-style-type属性值为none实践</title> <style> .box{ list-style-type: none; } </style> </head> <body> <ul class="box"> <li>成功不是打败别人,而是改变自己。</li> <li>成功不是打败别人,而是改变自己。</li> <li>成功不是打败别人,而是改变自己。</li> </ul> </body> </html>
结果图
既然能看到这里说明园友已经掌握了,列表的 list-style-type
属性值为 none
使用,恭喜恭喜恭喜。
属性值为disc使用方式
在这里说明下列表的 list-style-type
属性值为 disc
,列表的 list-style-type
属性值默认就是 disc
,如果是细心的园友已经发现了,上面有现成的列子在这里就不过多的介绍了,这个属性值为 disc
就跳过了哈。
属性值为circle使用方式
让我们进入列表的 list-style-type
属性值为 circle
实践,实践内容如:将列表前面的项目符号设置为空心圆。
代码块
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>列表的list-style-type属性值为circle实践</title> <style> .box{ list-style-type: circle; } </style> </head> <body> <ul class="box"> <li>成功不是打败别人,而是改变自己。</li> <li>成功不是打败别人,而是改变自己。</li> <li>成功不是打败别人,而是改变自己。</li> </ul> </body> </html>
结果图
属性值为square使用方式
让我们进入列表的 list-style-type
属性值为 square
实践,实践内容如:将列表前面项目符号设置为实心方块。
代码块
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>列表的list-style-type属性值为square实践</title> <style> .box{ list-style-type: square; } </style> </head> <body> <ul class="box"> <li>成功不是打败别人,而是改变自己。</li> <li>成功不是打败别人,而是改变自己。</li> <li>成功不是打败别人,而是改变自己。</li> </ul> </body> </html>
结果图
list-style-position属性
list-style-position
属性作用:设置列表前面项目符号的位置, list-style-position
属性有2个属性值,分别是 outside
、 inside
,具体说明看下面的属性值说明表。
list-style-position属性值说明表
属性值为outside使用方式
- 在实践
list-style-position
属性值为outside
之前,我们先看看列表前面的项目符号的默认位置在哪,笔者为了让初学者有一个直观的印象,笔者将HTML
页面中的ul
标签li
标签设置了一些样式。 -
ul
标签样式如::width
宽度设置为300px
像素、height
高度为150px
像素、border
边框为(1px
像素、显示是实线、边框颜色为蓝色)、样式。 ul
标签中的li
标签设置样式如:width
宽度设置为280px
像素、height
高度为30px
像素line-height
行高为30px
像素、border
边框为(1px
像素、显示是实线、边框颜色为红色)、样式。- 如果园友没有掌握
border
边框的知识,爱学习的园友不用担心以后会写border
边框的文章,若有想了解border
边框知识的园友可以去W3school官网 进行学习。
代码块
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>属性值为outside使用方式</title> <style> ul { width: 300px; height: 150px; border: 1px solid #00F; } ul li { width: 280px; height: 30px; line-height: 30px; border: 1px solid red; } </style> </head> <body> <ul> <li>成功不是打败别人,而是改变自己。</li> <li>成功不是打败别人,而是改变自己。</li> <li>成功不是打败别人,而是改变自己。</li> </ul> </body> </html>
结果图
现在大家应该很清楚的看到了列表前面项目的符号默认在 ul
标签和 li
标签之间的位置,现在我们知道了列表前面的项目符号的默认位置,那我们进行 list-style-position
属性值为 outside
实践了,实践内容:将 HTML
页面中的列表前面的项目符号设置为外面。
代码块
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>属性值为outside使用方式</title> <style> ul { width: 300px; height: 150px; border: 1px solid #00F; } ul li { width: 280px; height: 30px; line-height: 30px; border: 1px solid red; list-style-position: outside; } </style> </head> <body> <ul> <li>成功不是打败别人,而是改变自己。</li> <li>成功不是打败别人,而是改变自己。</li> <li>成功不是打败别人,而是改变自己。</li> </ul> </body> </html>
结果图
注意:为什么给列表设置了 list-style-position
属性值为 outside
,运行结果没有发生任何变化呢,因为列表前面的项目符号默认就在外面的位置,列表前面的项目符号外面的位置就是 ul
标签和 li
标签之间的位置。
属性值为inside使用方式
- 通过介绍
list-style-position
属性值为outside
,大家已经知道了列表前面项目符号外边的位置了,接下来我们将列表前面项目符号设置在里面咯。 - 让我们进入
list-style-position
属性值为inside
实践,将列表前面项目符号位置设置在里面。
代码块
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>属性值为inside使用方式</title> <style> ul { width: 300px; height: 150px; border: 1px solid #00F; } ul li { width: 280px; height: 30px; line-height: 30px; border: 1px solid red; list-style-position: inside; } </style> </head> <body> <ul> <li>成功不是打败别人,而是改变自己。</li> <li>成功不是打败别人,而是改变自己。</li> <li>成功不是打败别人,而是改变自己。</li> </ul> </body> </html>
结果图
注意: list-style-position
属性值为 inside
作用就是将列表前面项目符号位置设置在 li
标签中,这就是里面的位置。
list-style-image属性
list-style-image
属性作用:将列表前面项目符号设置为一张图片。
list-style-image属性说明表
让我们进入 list-style-image
属性的实践,实践内容将列表前面项目符号更换一张图片。
代码块
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>使用list-style-image属性方式</title> <style> ul { width: 300px; height: 150px; border: 1px solid #00F; } ul li { width: 280px; height: 30px; line-height: 30px; border: 1px solid red; list-style-image: url(./img/001.png); } </style> </head> <body> <ul> <li>成功不是打败别人,而是改变自己。</li> <li>成功不是打败别人,而是改变自己。</li> <li>成功不是打败别人,而是改变自己。</li> </ul> </body> </html>
结果图
注意:图片路径一定要写在 url(./img/001.png);
括号当中,不然不会被渲染的,图片路径可以是相对路径也可以绝对路径。
list-style属性
list-style
属性是( list-style-type
属性、 list-style-position
属性、 list-style-image
属性)的一个简写属性,它集成了( list-style-type
属性、 list-style-position
属性、 list-style-image
属性)的功能。
让我们进入 list-style
属性实践,既然看到了这里想必园友都已经掌握了本章的内容了。
代码块
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>使用list-style属性方式</title> <style> ul { width: 300px; height: 150px; border: 1px solid #00F; } ul li { width: 290px; height: 30px; line-height: 30px; border: 1px solid red; list-style: none inside url(./img/001.png) ; } </style> </head> <body> <ul> <li>成功不是打败别人,而是改变自己。</li> <li>成功不是打败别人,而是改变自己。</li> <li>成功不是打败别人,而是改变自己。</li> </ul> </body> </html>
结果图
注意: list-style
属性值可以也 1
个或 2
个 3
个,顺序没有要求,若有不明白的园友可以做个实例看看就明白了,学习就要多尝试不要偷懒呦。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
CSS,列表样式
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
更新日志
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]