列表属性(list-style)

1.引入

我们之前在学习标签的时候学习了列表相关的标签，主要有三个:ul-li(无序列表)、ol-li(有序列表)、dl-dt-dd(定义列表)，那么下面我们来学习一下用于设置列表相关样式的列表属性:list-style。

2.列表相关属性

list-style列表相关属性1.list-style-type:用于设置在列表显示内容的时候列表项的符号，一般的取值有如下几种:none:无样式Disc:实心圆circle:空心圆Square:实心方块2.list-style-image:用于设置使用图片作为列表项目的符号，说白了就是使用一张图片作为列表的开头符号。3.list-style-position:用于设置图像作为列表项目的的位置，一般有两个取值:inside、outside(默认值)4.list-style:用于设置上述三个的属性值，但是值得注意的是其值存在着顺序:list-style-type、list- style-position、list-style-image。

3.列表属性的相关代码示例以及效果图

<style type="text/css">.box1 ul{list-style: square;list-style-position: inside;}
</style><div class="box1">第一学期上课内容:<ul><li>语文</li><li>数学</li><li>物理</li><li>英语</li></ul>
</div>

前端开发_HTML5_CSS部分-列表属性(list-style)相关推荐

前端开发_HTML5_CSS部分-display属性
display属性 1.引入上几次课程的学习我们学习了一个比较重要的概念:盒子模型,下面我们来学习一个比较重要的属性:display,该属性是一个比较特殊的属性,它可以通过属性值控制元素是否显示,也 ...
前端开发_HTML5_CSS部分(一)
一.如何快速的学习CSS内容? 1.精确给页面元素设置样式,掌握三种选择方式. 2.掌握页面每一类型的元素常用的属性内容. 3.像记单词一样记住每一个样式设置之后产生的特效. ...
【前端开发系列】—— CSS3属性选择器总结
default:比如多选框,页面刷新时,默认选择触发 indeterminate:比如多选框,都没选时的样式 1 <html> 2 <head> 3 <script> ...
前端开发_HTML5_CSS部分-动画特效(animation)
动画特效(animation) 1.引入我们之前学习了过渡的特效,那么接下来我们一起来学习一下另一种比较特殊的特效动画. 2.动画特效(animation) (1).概述:CSS 可使用animat ...
前端开发_HTML5_CSS部分-背景(background)
背景(background) 1.引入为了更好对内容有更好的颜色搭配和设置,我们可以使用背景做一些美化效果,那么接下来我们一起学习以下背景相关的属性. 2.背景(background)相关的属性样式 ...
前端开发_HTML5_CSS部分-边框(border)
边框样式 1.概述我们之前已经把CSS的选择器学习了一遍,接下来,我们就一起来学习一下一些常见的样式属性,我们从边框样式开始学习. 2.边框样式 CSS中使用关键字border实现指定元素边框的样式 ...
前端开发_HTML5_CSS部分-过渡特效(transition)
过渡特效(transition) 1.引入 CSS3除了可以实现传统意义上的样式之外,还提供了一些比较特殊的特效,那么下面我们一起来学习一下这一些特效.学习完这一些特效将会更加丰富我们的页面美化效果. ...
前端开发_HTML5_CSS部分(四)
一.CSS相关的特性 1.引入在上一次课中,我们讲解了如何使用选择器的使用,能够通过选择器给不同的标签添加不同的样式信息.接下来,我们讲解以下CSS中存在的一些样式的特性,这些特性将更好的解决我们理 ...
前端开发工程师养成记
前端程序员:月薪 5K 到 5 万,我干了啥来源:点融黑帮高贵的前端程序猿们: 如何在前端开发这种高精尖的技术领域找到心仪的工作?实现在咖啡馆喝喝咖啡敲敲代码就能升职加薪.买房买车.迎娶白富美走上 ...

前端开发_HTML5_CSS部分-列表属性(list-style)

列表属性(list-style)

前端开发_HTML5_CSS部分-列表属性(list-style)相关推荐

最新文章

热门文章