html无序列表空心圆_列表样式的使用CSS入门基础（018）

今天我们分享关于列表样式的内容。列表项list-sytle-type：在HTML学习中，我们知道有有序列表和无序列表，都是使用type属性来定义的。1、有序列表 有序列表有序列表有序列表 属性值type：1，数字1、2、3……；a，小写英文字母a、b、c……；A，大写英文字母A、B、C……；i，小写罗马数字i、ii、iii……；I，大写罗马字母I、II、III……；2、无序列表

  无序列表  无序列表  无序列表

属性值type：dics，默认值，实心圆；circle，空心圆；square，实心正方形；在css中，不管是有序列表还是无序列表，都统一使用list-style-type属性来定义。语法：

list-style-type:属性值；

有序列表list-style-type属性取值
属性值	说明
decimal	默认值，数字1、2、3
lower-roman	小写罗马数字i、ii、iii
upper-roman	大写罗马数字I、II、III
lower-alpha	小写英文字母a、b、c
upper-alpha	大写英文字母A、B、C

无序列表list-style-type属性取值
属性值	说明
disc	默认值，实心圆
circle	空心圆
square	实行正方形

去除列表项符号
属性值	说明
none	无，去除

示例代码：

      列表项          #ol1 { list-style-type:decimal;}      #ol2 { list-style-type:lower-roman;}      #ol3 { list-style-type:upper-roman;}      #ol4 { list-style-type:lower-alpha;}      #ol5 { list-style-type:upper-alpha;}      #ul1 { list-style-type:disc;}      #ul2 { list-style-type:circle;}      #ul3 { list-style-type:square;}            有序列表

HTML CSS Javascript HTML CSS Javascript HTML CSS Javascript HTML CSS Javascript HTML CSS Javascript 无序列表 HTML CSS Javascript HTML CSS Javascript HTML CSS Javascript 示例代码：

      列表项          ol { list-style-type:none;}      ul { list-style-type:none;}            有序列表

HTML CSS Javascript 无序列表 HTML CSS Javascript 在实际开发中，我们经常需要用到这个小技巧，去除列表项默认符号。自定义列表项符号list-style-image:默认的列表符号比较丑，我们可以使用自定义的列表项美化网页的，在css中，可以使用list-style-image属性来自定义符号。语法：

list-style-image:url("图像地址");

图像地址可以是相对地址，也可以是绝对地址。示例代码：

      自定义列表          ul {        list-style-image: url("images/2.png");      }                  HTML      CSS      Javascript

自定义列表项符号，实际上就是将原来的符号用一张图片替换了。这个在实际开发中用的不是太多。

html无序列表空心圆_列表样式的使用CSS入门基础（018）相关推荐

CSS入门基础（样式，css文件，选择器）
CSS入门学习 CSS的简介基本语法结构基本用法给元素添加样式行内样式内部样式外部样式定义样式css文件在html中引入css文档选择器标签选择类选择 id选择 CSS的简介层 ...
python字符串与列表与运算_[Python学习笔记1]Python语言基础数学运算符字符串列表...
这个系列是我在学习Python语言的过程中记录的笔记,主要是一些知识点汇总,而非学习教程,可供有一定编程基础者参考.文中偏见和不足难以避免,仅供参考,欢迎批评指正. 本系列笔记主要参考文献是官网文档: ...
python列表赋值连续整数_列表切片赋值，小技巧（Python基础）。
列表的操作相对我还是比较熟悉的,累的时候看一些基础教程,巩固加补充知识点. 随便提示一下,list命令不是函数,是一个类. 列表的切片赋值: In [1]: name = list('sidian') ...
画一个空心圆_圆形在PPT中的6大妙用，每一个都能瞬间提升PPT的逼格！
Hello,各位叨友们好呀!我是叨叨君~ 大家在做PPT的时候,用的最多的形状是什么呢?我相信大部分的人回答是圆形或者矩形,看似简单的两个形状,有些人用的是简约又漂亮,而有些人用的就是简约又单调. 今 ...
画一个空心圆_用SolidWorks画一个空心挂钩，这种画法稍微有点麻烦
建模过程 1.在[右视基准面]画一个圆. 2.[旋转]. 3.还是在[右视基准面]画圆. 4.[拉伸凸台]等距:75 ,给定深度:30 . 5.在[前视基准面]画圆弧和直线.(上方是两段圆弧) 6.在 ...
python列表数据求和_列表求和python
{"moduleinfo":{"card_count":[{"count_phone":1,"count":1}],&q ...
c语言二进制输出_推荐收藏！C语言入门基础知识大全
01C语言程序的结构认识用一个简单的c程序例子,介绍c语言的基本构成.格式.以及良好的书写风格,使小伙伴对c语言有个初步认识. 例1:计算两个整数之和的c程序: #include main() {i ...
13 ，CSS 入门基础,行内排版内嵌式排版和外部排版样式
1.认识 CSS 2.传统 HTML 设计网页版面的缺点 3.CSS 的特点 4.CSS 的排版样式 13.1 认识CSS CSS的英文全名是 Cascading Style Sheets,中文可翻译 ...
html圆如何找到垂直中心线,HTML+CSS入门 7种方式实现垂直居中
本篇教程介绍了HTML+CSS入门 7种方式实现垂直居中,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 1.使用绝对定位垂直居中绝对对位原理:元素在过度受限情况下,将m ...

html无序列表空心圆_列表样式的使用CSS入门基础（018）

html无序列表空心圆_列表样式的使用CSS入门基础（018）相关推荐

最新文章

热门文章