美文网首页
CSS链接 列表

CSS链接 列表

作者: 忆往昔Code | 来源:发表于2018-09-18 14:34 被阅读0次

    A:链接

    1:设置链接的样式

    a:link - 普通的、未被访问的链接

    a:visited - 用户已访问的链接

    a:hover - 鼠标指针位于链接的上方

    a:active - 链接被点击的时刻

    2:text-decoration 属性大多用于去掉链接中的下划线

    a:visited {text-decoration:none;}

    a:hover {text-decoration:underline;}

    3:背景色

    background-color 属性规定链接的背景色:

    a:link {background-color:#B2FF99;}

    a:visited {background-color:#FFFF85;}

    a:hover {background-color:#FF704D;}

    a:active {background-color:#FF704D;}

    B:列表

    1:要修改用于列表项的标志类型,可以使用属性 list-style-type

    ul.disc {list-style-type: disc}

    ul.circle {list-style-type: circle}

    ul.square {list-style-type: square}

    ul.none {list-style-type: none}

    ol.decimal {list-style-type: decimal}  123

    ol.lroman {list-style-type: lower-roman} i ii iii

    ol.uroman {list-style-type: upper-roman}I II III

    ol.lalpha {list-style-type: lower-alpha} a b c

    ol.ualpha {list-style-type: upper-alpha}    A B C

    所有样式

    ul.none {list-style-type: none}

    ul.disc {list-style-type: disc}

    ul.circle {list-style-type: circle}

    ul.square {list-style-type: square}

    ul.decimal {list-style-type: decimal}

    ul.decimal-leading-zero {list-style-type: decimal-leading-zero}

    ul.lower-roman {list-style-type: lower-roman}

    ul.upper-roman {list-style-type: upper-roman}

    ul.lower-alpha {list-style-type: lower-alpha}

    ul.upper-alpha {list-style-type: upper-alpha}

    ul.lower-greek {list-style-type: lower-greek}

    ul.lower-latin {list-style-type: lower-latin}

    ul.upper-latin {list-style-type: upper-latin}

    ul.hebrew {list-style-type: hebrew}

    ul.armenian {list-style-type: armenian}

    ul.georgian {list-style-type: georgian}

    ul.cjk-ideographic {list-style-type: cjk-ideographic}

    ul.hiragana {list-style-type: hiragana}

    ul.katakana {list-style-type: katakana}

    ul.hiragana-iroha {list-style-type: hiragana-iroha}

    ul.katakana-iroha {list-style-type: katakana-iroha}

    ul {list-style-type : square}-把无序列表中的列表项标志设置为方块。

    2:列表项图像 ul li {list-style-image : url(xxx.gif)}

    只需要简单地使用一个 url() 值,就可以使用图像作为标志。

    3:列表标志位置 list-style-position ;

    相关文章

      网友评论

          本文标题:CSS链接 列表

          本文链接:https://www.haomeiwen.com/subject/gcgigftx.html