在网页设计中,我们经常将某些具有相似功能的标签放在同一组中,这时我们经常会用到列表标签(无序列表ul,有序列表ol),在列表标签中对列表样式的设计可以使我们的页面得到一定程度的美化。

在css中对列表样式主要是对列表项目前列表符号的设置,其语法如下:

list-style-type : disc | circle | square | decimal |
           lower-roman | upper-roman | lower-alpha | upper-alpha |
           none | armenian | cjk-ideographic | georgian | lower-greek |
          hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha |
           lower-latin | upper-latin

通过取不同的list-style-type属性值,我们可以得到不同的项目符号。

例:

ul { list-style-type:disc;} /*实心圆*/

ul { list-style-type:circle;} /*空心圆*/

ul { list-style-type:square;} /*实心方块*/

ul { list-style-type:none;} /*不显示项目符号*/

ol { list-style-type:decimal;} /*阿拉伯数字*/

ol { list-style-type:lower-roman;} /*小写罗马数字*/

ol { list-style-type:upper-alpha;} /*大写英文字母*/

如果对于css中所规定了的众多列表符号感到不满意,我们呀可以自定义列表的符号

list-style-image : none | url ( url )

使用这种方式,我们可以为项目列表设置任意的图片为列表符号。这里,我们所设的值为图片文件相对于网页文件的路径或绝对路径(来自网站的文件)。

在列表样式中最为需要注意的是,列表样式只能在列表标签中设置(ul,ol),而不能设置在列表的自标签中(li)。

css中的列表样式的更多相关文章

  1. CSS Ul(列表样式)

    CSS Ul(列表样式) CSS列表属性作用如下: 设置不同的列表项标记为有序列表 设置不同的列表项标记为无序列表 设置列表项标记为图像 一.列表 在HTML中,有两种类型的列表: 无序列表 - 列表 ...

  2. css3系列-2.css中常见的样式属性和值

    css3系列-2.css中常见的样式属性和值 继续上一篇文章的继续了解css的基础知识,关注我微信公众号:全栈学习笔记 css中常见的样式属性和值 字体与颜色 背景属性 文本属性 边框属性 内外边距 ...

  3. css中的字体样式及元素样式

    css中的字体样式一般包含有就9中,常见的有7种.这7种依次为: 1.字体样式:font-family: 2.字体大小:font-size: 3.字体加粗:font-weight: 4.字体斜体:fo ...

  4. 【经验】在CSS中定义超链接样式a:link、a:visited、a:hover、a:active的顺序

    以前用CSS一直没有遇到过这个问题,在最近给一个本科同学做的项目里面.出现一些问题,搜索引擎查了一些网站和资料,发现很多人问到这个问题,给出的结果我试了试,大部分都不正确. 给出我试的顺序,可能会对大 ...

  5. css中的列表属性

    list-style-type设定引导列表的符号类型,可以设置多种符号类型,值为disc.circle.square等 list-style-image使用图像作为定制列表的符号 list-style ...

  6. css中的段落样式及背景

    一.段落样式 css中关于段落的样式主要有行高,缩进,段落对齐,文字间距,文字溢出,段落换行等.它们的具体语法如下: line-height : normal | length text-indent ...

  7. CSS如何设置列表样式属性

    列表样式属性 在HTML中有2种列表.无序列表和有序列表,在工作中无序列表比较常用,无序列表就是ul标签和li标签组合成的称之为无序列表,那什么是有序列表呢?就是ol标签和li标签组合成的称之为有序列 ...

  8. CSS如何设置列表样式属性,看这篇文章就够用了

    列表样式属性 在HTML中有2种列表.无序列表和有序列表,在工作中无序列表比较常用,无序列表就是ul标签和li标签组合成的称之为无序列表,那什么是有序列表呢?就是ol标签和li标签组合成的称之为有序列 ...

  9. css冲突2 要关闭的css在项目代码以外,但是是通过<link>标签引入的css(例如bootstrap):解决方法,在APP.css中使用全局样式

    css冲突,导致html字体过小. 通过浏览器检查发现,导致字体过小的css来自bootstrap. 现要关闭bootstrap的css: 直接在APP.css中添加: html{ font-size ...

随机推荐

  1. Color 颜色码-英文名称-十六进制-RGB对照表

      色 英文代码 形像颜色 HEX格式 RGB格式 LightPink 浅粉红 #FFB6C1 255,182,193 Pink 粉红 #FFC0CB 255,192,203 Crimson 猩红 # ...

  2. openfire连接登陆优化方案

    client登陆openfire,大概总共须要9个来回才完毕登录. 在2G情况下.就表现为client登录特别慢,所以,为解决问题,对openfire进行了例如以下优化 openfire的连接.登陆过 ...

  3. Node.js 博客实例(六)留言功能

    原教程https://github.com/nswbmw/N-blog/wiki/_pages的第六章,因为版本号等的原因,在原教程基础上稍加修改就可以实现. 实现用户给文章留言的功能,留言保存在数据 ...

  4. 手机软件记事本(SuperNotepad)的使用教程

    软件简介: 手机应用记事本(SuperNotepad)类似电脑应用notepad, 可用于文本阅读和编辑新建电子书(本应用限文本txt文件),是阅读小说和便签记录的好帮手. 电子书阅读器及便签的手机应 ...

  5. .net对文件的操作之文件读写

    读写文件的步骤一般需要5步: 创建文件流 创建读写器 执行读或写的操作 关闭读写器 关闭文件流 需要引用:System.IO这个命名空间 代码演示: string path = @"F:\a ...

  6. C复习手记(Day2)

    1.共用体 共用体是一种特殊的结构,允许在相同的位置存储不同的数据类型.可以定义一个带有多成员的共同体,但是任何时候只能有一个成员带有值. 定义共用体: union Data { int i; flo ...

  7. (转)Jquery弹窗插件Lhgdialog的用法

    Lhgdialog的用法 大家都知道用js可以实现,但是在使用js实现的弹窗时得考虑很东西:浏览器的兼容.页面的交互等等问题. 在这里简单介绍一下lhgdialog的用法. 参数有: Title:弹窗 ...

  8. javascript 操作 css Rule

    //add addCssRule('.bcd',{'color':'red','font-weight':'bold','font-size':'12px'},document.styleSheets ...

  9. c++中vector等容器的实现机制

    stl容器区别: vector list deque set map-底层实现 stl容器区别: vector list deque set map (转) 在STL中基本容器有: vector.li ...

  10. C#关于等待窗体(转)

    c#.net 中如果想在主窗口A里点击打开新窗口B(因为要数据库操作,Bload需一小段时间)之前弹出带有滚动条等待子窗口C来提示用户没有死机,应该怎么做?我用多线程打开了c窗口,但是问题:1.C窗口 ...