精华内容
下载资源
问答
  • css-列表样式

    2018-01-24 18:26:28
    列表属性 值 效果 list-style 简写属性。用于把所有用于列表的属性设置于一个声明中。 list-style-image 将图象设置为列表项标志。 list-style-position 设置列表列表项标志的位置。 list-...

    列表属性

    效果
    list-style简写属性。用于把所有用于列表的属性设置于一个声明中。
    list-style-image将图象设置为列表项标志。
    list-style-position设置列表中列表项标志的位置。
    list-style-type设置列表项标志的类型。

    list-style-type

    ul.circle {list-style-type:circle;}//空心圆
    ul.disc {list-style-type:disc}//实心圆
    ul.decimal{list-style-type:decimal}//数字
    ul.square {list-style-type:square;}//实心方块
    ol.upper-roman {list-style-type:upper-roman;}//大写罗马数字(I, II, III, IV, V, 等。)
    ol.lower-alpha {list-style-type:lower-alpha;}//小写英文字母(a, b, c, d, e, 等。)

    列表标记的类型:
    css2.1中的值:disc | circle | square | decimal | decimal-leading-zero |
    lower-roman | upper-roman | lower-greek | lower-latin | upper-latin |
    armenian | georgian | none | inherit

    list-style-image

    自定义图片标记:

    ul 
    {
        list-style-image: url('/i/eg_arrow.gif')
    }

    list-style-position

    效果
    inside列表项目标记放置在文本以内,且环绕文本根据标记对齐。
    outside默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外,且环绕文本不根据标记对齐。

    简单说,inside会有种缩进效果.

    展开全文
  • CSS列表样式的简介

    千次阅读 2015-08-20 21:53:08
    CSS列表样式是很重要的,在百度中我们经常看到的是风云榜,很羡慕吧,其实我们也可以做的和他一样的漂亮,我们需要的是专注。对于CSS列表样式,在这个地方介绍的是基础,希望对大家有所帮助。
    什么是CSS列表样式:

         所谓的CSS列表样式,肯定和列表有关,但是列表我们要清楚地是,列表可以分为有序列表和无序列表。于是我们的列表样式又可以分为三种类型,第一是设置不同形状的标记的无序列表,第二是设置不同的符号(此处的符号可能是数字,或者是罗马符号,或者是英文符号等等),第三是用图像来作为列表项标记的列表。那么看到这个地方我们已经对列表样式应该有了内心独到的理解,其实我们理解就应该这样,我们心中想说的无意是,所谓的列表样式原来就是对文本前面的标记的表示方法,对啊,就是这样,你理解的那样。当然如果你不清楚我理解的对不对啊,我们通过例子来为大家说一下列表样式的使用,顺便增强一下理解。

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">
        ol.a{
        list-style-position:inside;

    /*列表项标记的位置,有outside,和inside两个值。通过明察秋毫,俺已经将这两个值之间的差别看看出来了,其实这个位置的设置在当标记项为图像的时候,差别是很明显的,特别的当图形比较大的时候,inside可将图片完全的显示作为一个标记,但是outside是不同的,他似乎有严格的长度设置,但是高度是图像的高度,因此当我们使用list-style-position常常是和list-style=image一起使用,并且我们使用list-style-image的时候也要注意的是图像的大小一定要合适,否则作出来的列表项样式人类欣赏不了,只能拿到动物园区使用了,哈哈。*/
         }
        ol li.b
        {
        list-style-type: lower-alpha;

    /*虽然我们这个着一篇文章主要是对列表项的样式属性进行介绍,但是很抱歉,转移一下话题。我们对列表属性进行设置的时候,大括号的外边写什么,这个地方写的是ol li.b我们知道有序列表定义的时候是使用的ol ,但是标签里面的每一项用的是li进行定义,也就是说,我们的列表样式要看看是对全部的列表项都其作用,如果是这样,我们就可以像上看的位置设置那样仅仅写一个ol.a但是如果我们想做的是让列表项 里面的每一项样式不同,我们就要使用ol li他们之间是空格,li.b然后在定义项的时候li里面使用class来引用这一项的定义。话题转移到正题来,在这个里面我们用到的是属性list-style-type是对列表项前面的标记进行设置,因为是有序列表,我们考虑应该从符号这个角度来考虑lower-alpha是表示的小写的字母,当然聪明的我们也可以想到大写字母的是upper-alpha,还可以用数字decimal

    lower-roman小写的罗马字符,upper-roman大写的罗马字符,这是有序列表前面的标记项常用到的值,但是对于无序列表我们可以让none没有标记,circle空心的圆标记,square实心的方块,这些可以作为这个属性的值,看到这里

    其实你已经学到了两个知识,点,算上上面的属性,你学到了三个,也许你会问还有其他 的属性吗,有list-style-position*/
        }
        ol li.c
        {
        list-style-image: url(../pic/123.jpg);

    /*这个地方我们仅仅看看这个属性的属性的值是一个url*/
        }
        ul{
        list-style: inside url(../pic/124.gif);
        }
        </style>
    <title></title>
    </head>
    <body>
    <h1 align="center">傻逼的共性</h1>
    <ol class="a">
    <li>爱说大话</li>
    <li class="b">不做事实</li>
    <li class="c">爱幻想</li>
    </ol>
    <ul>
       <li>无序的,但是应该使用图画作为标记</li>
    </ul>
    </body>
    </html>

    上面这个例子可以说集做人,集知识点于一身。也许对于我们这些菜鸟来说,这个例子刚开始看的时候并没有理解,没关系,我们一点一点的来分析。首先我们应该知道的是设置列表的样式的时候,我们应该知道通过什么来设置样式,也就是说我们要打敌人,我们的武器是什么。你可以说是CSS,当然很正确,但是我相信能看到这个地方的,傻瓜也都知道是通过CSS语句来实现对列表样式的设置,如果你不知道,那么就当我啥也没说。CSS语句是不是太笼统了,应该说我们是通过属性,列表属性来对列表样式进行设置。也就是我们应该知道列表属性有什么,然后对列表属性进行赋值,也就是实现了对列表样式的设置。我们来看一下列表属性:list-style-type:列表标记项的类型

    list-style-position标记项的位置,list-style-image:将图像设置为列表项标志,list-style:属性的简写,用于将所有的

    列表属性设置在一个声明中。看到这个地方,我们在去看看在例子中对这些属性的分析,你就会知道了。列表的样式我们的设置也就是通过对列表属性的设置俩实现,记住列表的属性,然后对应的属性所对应的值。













    展开全文
  • CSS列表样式属性list-style有哪些类型?不同类型CSS控制列表样式使用时该注意什么? 这是W3Cschool用户Shirley于2016-11-10在W3Cschool编程问答提出的问题。云南小天使的回答很好的帮助了众多遇到同样问题的网友原文...

    CSS列表样式属性list-style有哪些类型?不同类型CSS控制列表样式使用时该注意什么?

    这是W3Cschool用户Shirley于2016-11-10在W3Cschool编程问答提出的问题。云南小天使的回答很好的帮助了众多遇到同样问题的网友原文地址http://www.w3cschool.cn/css3/question-10231611.html

    以下为回答原文:

    一、什么是CSS列表?


    CSS列表是HTML里一种很有用的显示方式,可以把相关的并列内容整齐地垂直排列,使网页显得整洁专业,并让浏览者有一目了然的感觉。 样式表为列表增加了一些功能,控制列表的样式包括列表样式、图形符号、列表位置三个部分。

    1.列表符号
    列表符号是指显示于每一个列表项目前的符号标识。
    
    基本格式如下:
    list-style-type:参数
    
    参数取值范围:
    ·disc:圆形
    ·circle:空心圆
    ·square:方块
    ·decimal:十进制数字
    ·lower-roman:小写罗马数字
    ·upper-roman:大写罗马数字
    ·lower-alpha:小写希腊字母
    ·upper-alpha:大写希腊字母
    ·none:无符号显示
     {background: 颜色 } 安全显示列表符   
    参数中的disc是默认选项。
    
    2.图形符号
    图形符号指原来列表的项目符号将可以使用图形来代替。
    
    基本格式如下:
    list-style-image:URL
    URL是用来代替项目符号的图形文件的地址,可以使用相对地址或绝对地址。
    
    3.列表位置列表位置描述列表在何处显示。
    基本格式如下:
    list-style-position:参数
    
    参数取值范围:
    ·inside:在BOX模型内部显示
    ·outside:在BOX模型外部显示

    二、CSS列表分类


    CSS列表样式分为有序列表、无序列表和定义列表。
    * 无序列表(可嵌套)<ul></ul>声明列表是无序的<li></li>包含一列项目。
    * 有序列表(可嵌套)<ol></ol>声明列表是有序的<li></li>包含一列项目。
    * 定义列表dt定义概念、dd解释;有缩进)

    <dl></dl>声明定义列表
    <dt></dt>概念
    <dd></dd>概念的解释

    有序列表是按照顺序排列如12345、ABCDE等;
    无序列表包含圆点、方块、空心圆等。
    CSS列表属性样式常见语法如下:

    1、 控制显示:display
    语法:

    {display:none|block|inline|list-item}

    作用:改变元素的显示值,可以将元素类型线上,块和清单项目相互变换。
    说明:

    ·none 不显示元素 
    ·block 块显示,在元素前后设置分行符 
    ·inline 删除元素前后的分行符,使其并入其它元素流中 
    ·list-item 将元素设置为清单中的一行 注意:可用 display 属性值生成插入标题和补加清单或让图形变成线上显示。

    2、控制空白:white-space
    语法:

    {white-space:normal|pre|nowarp}

    作用:控制元素內的空白。
    说明:

    ·normal 不改变,保持缺省值,在浏览器页面长度处换行。 
    ·pre 要求文档显示中采用源代码中的格式。 
    ·nowarp 不让访问者在元素內换行。

    3、符号列表:list-style-type
    语法:

    {list-style-type:none|disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha}

    作用:指定清单所用的强调符或编号类型
    说明:

    ·none - 无强调符 
    ·disc - 碟形强调符(实心圆) 
    ·circle - 圆形强调符(空心圆) 
    ·square - 方形强调符(实心) 
    ·decimal - 十进制数强调符 
    ·lower-roman - 小写罗馬字强调符 
    ·upper-roman - 大写罗馬字强调符 
    ·lower-alpha - 小写字母强调符 
    ·upper-alpha - 大写字母强调符

    例子:

    LI.square { list-style-type: square }
    UL.plain { list-style-type: none }
    OL { list-style-type: upper-alpha } /* A B C D E etc. */
    OL OL { list-style-type: decimal } /* 1 2 3 4 5 etc. */
    OL OL OL { list-style-type: lower-roman } /* i ii iii iv v etc. */

    4、图片列表:list-style-image
    语法:

    {list-style-image:URL}

    作用:用于将清单中标准强调符换成所选的图形
    说明: 

    ·url - 图形URL地址

    例子:

    UL.check { list-style-image: url(/LI-markers/checkmark.gif) }
    UL LI.x { list-style-image: url(x.png) }

    位置列表:list-style-position

    语法:

    {list-style-position:inside|outside}

    作用:用于设置强调符的缩排或伸排,这个属性可以让强调符突出于清单以外或与清单项目对齐。
    说明:

    ·inside - 缩排,将强调符与清单项目内容左边界对齐
    ·outside - 伸排,强调符突出到清单项目内容左边界以外

    6、 目录列表:list-style
    语法:

    {list-style:目录样式类型|目录样式位置|url}

    作用:目录样式属性是目录样式类型、目录样式位置,和目录样式图象属性的略写
    说明:

    ·list-style-type
    ·list-style-position
    ·list-style-image

    注意:这些值的细节见各个属性部分。
    例子:

    LI.square { list-style: square inside }
    UL.plain { list-style: none }
    UL.check { list-style: url(/LI-markers/checkmark.gif) circle }
    OL { list-style: upper-alpha }
    OL OL { list-style: lower-roman inside }

    7、鼠标形状cursor
    语法:

    {cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-resize|se-resize|sw-resize}

    作用:CSS提供了多达13种的鼠标形状,供我们选择。
    说明:

    ·hand 手形 
    ·crosshair 十字形 
    ·text 文本形 
    ·wait 沙漏形 
    ·move 十字箭头形 
    ·help 问号形 
    ·e-resize 右箭头形 
    ·n-resize 上箭头形 
    ·nw-resize 左上箭头形 
    ·w-resize 左箭头形 
    ·s-resize 下箭头形 
    ·se-resize 右下箭头形 
    ·sw-resize 左下箭头形

    可参阅W3Cschool官网上的《CSS 列表样式(ul)》及《CSS list-style 属性

    三、CSS列表样式属性list-style的使用方法


    ● list-style
    定义:
    用于在一个声明中设置一个列表的所有属性的简写属性,该属性是一个简写属性,涵盖了所有其他列表样式属性,仅作用于具有display值等于list-item的对象(如li对象)。
    相关 : 

    list-style-image || list-style-position || list-style-type

    ● list-style-image
    说明:
    设置或检索作为对象的列表项标记的图像。若此属性值为 none 或指定 url 地址的图片不能被显示时,list-style-type 属性将发生作用。
    取值:

    none : 默认值。不指定图像
    url ( url ) : 使用绝对或相对 url 地址指定图像

    ● list-style-position
    说明:
    设置或检索作为对象的列表项标记如何根据文本排列。假如一个列表项目的左外补丁( margin-left )被设置为 0 ,则列表项目标记不会被显示。左外补丁( margin-left )最小可以被设置为 30 。仅作用于具有 display 属性值等于 list-item 的对象。如 li 对象。
    取值:

    outside : 默认值。列表项目标记放置在文本以外,且环绕文本不根据标记对齐
    inside : 列表项目标记放置在文本以内,且环绕文本根据标记对齐

    ● list-style-type
    说明:
    设置或检索对象的列表项所使用的预设标记。若 list-style-image 属性值为 none 或指定 url 地址的图片不能被显示时,此属性将发生作用。
    取值:

    disc :  CSS1 实心圆
    circle :  CSS1 空心圆
    square :  CSS1 实心方块
    decimal :  CSS1 阿拉伯数字
    lower-roman :  CSS1 小写罗马数字
    upper-roman :  CSS1 大写罗马数字
    lower-alpha :  CSS1 小写英文字母
    upper-alpha :  CSS1 大写英文字母
    none :  CSS1 不使用项目符号
    armenian :  CSS2 传统的亚美尼亚数字
    cjk-ideographic :  CSS2 浅白的表意数字
    georgian :  CSS2 传统的乔治数字
    lower-greek :  CSS2 基本的希腊小写字母
    hebrew :  CSS2 传统的希伯莱数字
    hiragana :  CSS2 日文平假名字符
    hiragana-iroha :  CSS2 日文平假名序号
    katakana :  CSS2 日文片假名字符
    katakana-iroha :  CSS2 日文片假名序号
    lower-latin :  CSS2 小写拉丁字母
    upper-latin :  CSS2 大写拉丁字母

    使用背景图片改变列表符

    list-style-image:url(xxx.jpg);

    改变列表符位置
    list-style-position:

    inside列表项目标记放在文本内,且对标记对齐 
    outsid(默认)列表项目放在标记外,不根据标记对齐

    以上内容由W3Cschool小编整理自W3Cschool编程问答,希望可以帮助大家!

    展开全文
  • css列表样式

    2014-06-08 00:36:03
    ul:(unordered list)无序列表列表项标志 值 circle: 空心圆 square: 方块 disc: 实心园 none: 没有 ol:(oedered list)有序列表列表项标志 值 decimal 标记是数字。  ...

    list-style-type:

    ul:(unordered list)无序列表列表项标志

    circle: 空心圆

    square: 方块

    disc: 实心园

    none: 没有

    ol:(oedered list)有序列表列表项标志

    decimal 标记是数字。 
    decimal-leading-zero 0开头的数字标记。(01, 02, 03, 等。) 
    lower-roman 小写罗马数字(i, ii, iii, iv, v, 等。) 
    upper-roman 大写罗马数字(I, II, III, IV, V, 等。) 
    lower-alpha 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。) 
    upper-alpha 大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。) 
    lower-greek 小写希腊字母(alpha, beta, gamma, 等。) 
    lower-latin 小写拉丁字母(a, b, c, d, e, 等。) 
    upper-latin 大写拉丁字母(A, B, C, D, E, 等。) 

    list-style-image:

    ul

      {

      list-style-image:url("/i/arrow.gif");

      }

    list-style-position:

    声明列表标志相对于列表项内容的位置(ouside,inside)

    值  

    inside 列表项目标记放置在文本以内,且环绕文本根据标记对齐。 

    outside 默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外,且环绕文本不根据标记对齐。 

    inherit 规定应该从父元素继承 list-style-position 属性的值。 

    展开全文
  • CSS列表样式属性

    千次阅读 2008-06-09 21:23:00
    用这个属性可以同时设值列表样式类型属性(list-style-type),列表样式位置属性(list-style-position)和列表样式图片属性(list-style-image)。示例代码如下:ul {list-style:circle inside url(../images/css_...
  • CSS(七) css列表样式(ul)

    千次阅读 2019-01-25 19:43:21
    CSS列表属性作用如下: 设置不同的列表项标记为有序列表 设置不同的列表项标记为无序列表 ... 使用CSS,可以列出进一步的样式,并可用图像作列表项标记。 2.不同的列表项标记 list-style-type属性指定属性列表...
  • jQuery+div+css选项卡列表样式

    热门讨论 2011-07-04 16:34:46
    jQuery+div+css选项卡,兼容ie6、7、8和firefox。包含文字和图片列表等效果,套用简单方便,适合新闻文章图片发布类网站。 ps:使用时请清除中文注释!!!
  • Css 列表样式的控制

    2008-08-01 19:41:00
    样式表为列表增加了一些功能,控制列表的样式包括列表样式、图形符号、列表位置三个部分。 1.列表符号 列表符号是指显示于每一个列表项目前的符号标识。 基本格式如下: list-style-type:参数 参数取值范围: ·...
  • 列表样式CSS中,列表元素是一个框,列表中的每个表项也是一个框,只是在表项前面多了一个项目符号。列表的格式化,主要由浏览器完成,而不是由设计人员完成。设计人员只能通过 list-style属性来定义列表的...
  • css列表样式(ul和ol)

    千次阅读 2018-08-04 19:51:54
    简写顺序:list-style-type~list-style-position~list-style-image eg:ul{list-style:square url("img.png")} 注意:如果上述值丢失一个,其余仍在指定的顺序,就没关系。 按简写顺序依次介绍每个属性...
  • CSS样式词汇列表

    2014-04-25 09:21:22
    CSS 是前端开发必备技能,入门容易,深入难。比如像 Pseudo-class、Pseudo-element、Media query、Media type 以及 Vendor prefix 的概念,很多人都还很模糊。CSS Vocabulary 是一个很全的 CSS 词汇表,能帮助你...
  • css li 前面样式

    2020-12-03 14:49:08
    CSS中LI圆点样式li {list-style-type:符号名称} css中用list-style-type指定列表(lists)前面符号,如下: li {list-style-type:符号名称} 符号名称可用的值为: disc : CSS1 实心圆 circle : CSS1 空心圆 square...
  • CSS 列表

    2016-06-19 16:31:44
    1、CSS列表属性作用如下:  设置不同的列表项标记为有序列表  设置不同的列表项标记为无序列表  设置列表项标记为图像 ... 使用CSS,可以列出进一步的样式,并可用图像作列表项标记。 3、不同的列表项标记
  • CSS基础学习十二:CSS样式

    千次阅读 2015-11-16 20:04:15
    CSS样式包括:CSS背景,CSS文本,CSS字体,CSS列表CSS表格,CSS轮廓等样式。我们就目前用到的 CSS样式简单地介绍一下。 下面只是总结性的一些东西,具体的可以参考:CSS样式教程  (1)背景色  background-color...
  • CSS 设置列表格式

    2018-02-27 18:17:24
    CSS中,列表列表项都是块级元素。也就是说,一个列表会形成一个框,其中的每个列表项也会形成一个独立的框。所以,盒模型中框的所有属性,都适用于列表列表项。除此之外,列表还有 3 个特有的属性 list-...
  • CSS样式_列表表格轮廓

    2016-02-21 10:20:10
    CSS列表: list-style 简写属性在一个声明中设置所有的列表属性。添加一个图标代替原来的列表图标。 ul { list-style:square inside url('/i/arrow.gif'); }list-style-type 属性设置列表项标记的类型。...
  • CSS样式_链接&列表

    2016-04-08 07:49:39
    CSS链接&列表
  • WEB_CSS的各种样式

    千次阅读 2019-06-20 12:46:15
    文章目录span标签Div标签字体样式超链接伪类列表样式网页背景背景尺寸渐变 span标签 span标签是行内元素,能够让几个文字或者某个词语凸显出来 示例: <!DOCTYPE html> <html lang="en"> <head&...
  • 1.列表样式的属性: ● 1.list-style-type:序号变成,空心圆、方框、数字,拉丁字母等等 列表前面的序号的样式;自然下面前几个是无序列表的,后面几个是有序列表的;(实测,可以混用,但应该不提倡这样做吧,...
  • CSS 定义li样式

    2012-09-21 17:21:20
    li的这个样式定义是将列表项目使用图片来代替显示的小圆点。当然您也可以显示成其它效果,详细请参阅下面的定义:  列表项目效果的CSS定义 li {list-style-image: url(images/disc.gif);}  *list-style-type: ...
  • 常见CSS(层叠样式表)介绍

    千次阅读 2016-10-15 20:51:37
    CSS(cascading style sheet,层叠样式表) CSS(cascading style sheet,层叠样式表)是描述文档怎么样被呈现的语言,使用CSS可以对HTML文档进行描述。语法: 1)CSS属性和值之间用冒号分隔 2)CSS属性之间用分号分隔...
  • CSS层叠样式

    2019-11-20 22:30:01
    CSS层叠样式表 第一章 CSS简介 1.1 CSS概念 CSS :层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。...
  • list_style属性用于修改列表的属性 格式如下: list_style:列表项标记类型 列表项标记的位置 列表项标记; 也可以单独设置列表项标记: list-style-type用于设置列表项类型: 默认值为disc为实心圆, 常用值:...
  • 在无序列表ul>li中,无线列表的标志是出现在各列表前面的圆点。在有序列表ol>li中,前面默认带有数字,如何修改列表前面的项目符号,只需要通过list-style调整就好,常见的符号有(/*内容注释部分*/)list-style-...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 48,173
精华内容 19,269
关键字:

css块列表样式