• HTML+CSS学习笔记(十三)


    HTML包含专门用于创建项目列表的元素,你可以创建普通列表、编号列表、符号列表以及描述列表,列表之中可以嵌套另一个列表。

    所有的列表都由父元素和子元素构成,父元素用于指定列表的项目类型,子元素用于指定要创建的列表项目类型。有这样三种类型:

    1 、有序列表——ol为父元素,li为子元素

    2 、无序列表——ul为父元素,li为子元素

    3 、描述列表——dl为父元素,dt和dd分别代表dl中的术语和描述

    其中,无序列表是最常见的!

     

    一 、创建有序列表和无序列表

    如果列表项的顺序对于列表来说非常关键,这种时候有序列表就是恰当的选择。有序列表适于提供完成某一项任务的分步说明,或用于创建大型文档的大纲。

    <ol>

    <li>……..</li>

    <li>……..</li>

    <li>……..</li>

    </ol>

    默认是阿拉伯数字创建带编号的有序列表。

     

    无序列表正好相反,且应用更加普遍,如果列表项的顺序不太重要就使用无序列表。

    <ul>

    <li>……..</li>

    <li>……..</li>

    <li>……..</li>

    </ul>

    默认情况下列表前面显示实心黑色圆点。

    注意:列表前的样式都可以通过CSS修改,所以在使用标签的时候一定要严格遵循语义!

    二 、选择标记

    创建列表时,无论是有序列表还是无序列表,都可以选择出现在列表项目左侧标记的类型。

    1 、选择标记

    在样式表中,输入list-style-type:marker,这里的marker可以是:

    disc——圆点

    circle——圆圈

    square——方块

    decimal——数字

    upper-alpha——大写字母

    lower-alpha——小写字母

    upper-roman——大写罗马字母

    lower-roman——小写罗马字母

    2 、显示无标记列表

    在样式表中,输入list-style-type:none

    3 、也可以在HTML中使用type属性,type可以是A,a,1,I,i等,但最好还是在CSS中定义样式。

     

    三 、使用定制的标记

    除此之外,你可以使用图像创建自己的标记。这里有一些技巧。

    1 、清除列表的样式

    2 、设置margin-left和padding-left属性

    3 、设置列表项的背景图像

    4 、输入padding-left,让文字为图像腾出位置

    ol{

        list-style: none;

        margin-left: 0;

        padding-left: 0;

    }

    li{

        background: url(../imag/round_check.png) no-repeat 0 0;

        padding-left: 1.75em;

    }

     

    注意:

    1 、相对背景图像的url是相对于样式表的

    2 、默认标记在默认情况下位于列表项目的外面,而定制标记显示在列表项目的里面

     

    四 、选择列表的起始编号

    你可能希望列表的编号从默认值1以外的某个数字开始。

    1 、设置整个列表编号方案的初始值

    在ol标签中输入"start="n"",n表示项目的初始值

    2 、修改有序列表中某项列表项目的编号

    在目标li项目内输入"value="n"",n代表该列项目的值,至此接下来的项目都会受到影响

     

    五 、控制标记的位置

    默认情况下,列表项前面的标记,是不在文本块里面的,不过可以更改,即通过修改list-style-position:inside,便可让标记与文本块融为一体。

     

    六 、同时设置所有的样式属性

    CSS为list-style提供了简写形式,将list-style-type、list-style-position、list-style-image放到一条属性中。

    ul{

    list-style:circle inside url(……png);

    }

    可以指定三个list-style属性,也可以指定其中的任意一个,指定多个属性的顺序任意,没有指定的,为默认,list-style-type的默认为disc,list-style-image的默认值为none,list-style-position的默认值为outside。

    list-style最常用的是使用none来取消标记,这个属性也是继承的

     

    七 、设置嵌套列表的样式

    可以在一个列表中嵌套另一个列表,对于有序列表和无序列表都有效!

    这里要注意的是,嵌套的列表一定要在<li></li>标签里,通常情况下,有序列表正确的列表嵌套顺序为大写罗马数字、大写字母、阿拉伯数字和小写字母,此后交替使用阿拉伯数字和小写字母。无序列表的顺序为第一级用圆点符号,第二级用空心圆,第三级往后使用方块符号。

     

    八 、创建描述列表

    HTML提供了专门用于描述成组出现的名称(术语)及其值之间关联的列表类型,这种类型在HTML5中称为描述列表,用dl描述,dt表示名称,dd表示值,一个dt可以对应多个dd,多个dt也可以对应一个dd。

    对于dt而言,有的时候会在这个标签里包裹<dfn>标签,指出该列表是定义术语的。

     

    总结:这一章的内容不算复杂,平常也经常能用到,比如说导航栏,相比而言,HTML本身还算好写,难的是应用CSS,网上有很多这样的例子,可以实现很酷炫的效果,还得继续学习!

     

     

     

     

     

     

     

     

    却道,此心安处是吾乡
  • 相关阅读:
    codeforces 37 E. Trial for Chief【spfa】
    bzoj 1999: [Noip2007]Core树网的核【树的直径+单调队列】
    codehunter 「Adera 6」杯省选模拟赛 网络升级 【树形dp】
    codeforces GYM 100781A【树的直径】
    bzoj 2878: [Noi2012]迷失游乐园【树上期望dp+基环树】
    bzoj 1791: [Ioi2008]Island 岛屿【基环树+单调队列优化dp】
    codeforces 949C
    codeforces 402E
    poj 3613 Cow Relays【矩阵快速幂+Floyd】
    bzoj 2097: [Usaco2010 Dec]Exercise 奶牛健美操【二分+树形dp】
  • 原文地址:https://www.cnblogs.com/lucifer25/p/6075474.html
Copyright © 2020-2023  润新知