HTML+CSS基础入门-第十六天(CSS-列表属性)

标记的类型list-style-type

属性值

  • none:无标记
  • disc:默认标记是实心圆
  • circle:标记是空心圆
  • square:标记是实心方块
  • decimal:标记是数字
  • decimal-leading-zero:0开头的数字标记(01,02,03等)
  • lower-roman:小写罗马数字(i,ii,iii,iv,v)
  • upper-roman : 大写罗马数字(I,II,III,IV,V)
  • lower-alpha:小写英文字母(a,b,c,d,e)
  • 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)
  • hebrew:传统的希伯来编号方式
  • armenian:传统的亚美尼亚编号方式
  • georgian:传统的乔治亚编号方式(an,ban,gan)
  • cjk-ideographic:简单的表意数字
  • hirakana:标记是:a,i,u。e。o。ka。ki 日文片假名
  • katakana:标记是:A,I,U,E,O,KA,KI 日文片假名
  • hiragana-iroha:标记是:i,ro,ha,ni,ho,he,to 日文片假名
  • katakana-iroha:标记是:I,RO,HA,NI,HO,HE,TO

代码

给无序列表添加数字的属性 就变成的有序列表


<head>
    <title>列表属性title>
    <meta charset="utf-8">
    <style type="text/css">
        ul{
            list-style:decimal;
        }

    style>

head>
<body>
    <ul>
        <li>无序列表li>
        <li>无序列表li>
        <li>无序列表li>
        <li>无序列表li>
        <li>无序列表li>
        <li>无序列表li>
    ul>
    <ol>
        <li>有序列表li>
        <li>有序列表li>
        <li>有序列表li>
        <li>有序列表li>
        <li>有序列表li>
        <li>有序列表li>
    ol>
body>

显示结果

HTML+CSS基础入门-第十六天(CSS-列表属性)_第1张图片

标记的位置list-style-position

属性

  • inside 列表项目标记放置在文本以内,且环绕文本根据标记对齐
  • outside 默认值。保持标记位于文本的左侧。列表项标记放置在文本以外,且环绕文本不根据标记对齐
  • inherit 根据应该从父元素继承 list-style-position

代码


<head>
    <title>列表属性title>
    <meta charset="utf-8">
    <style type="text/css">
        ul.inside{
            list-style-position:inside;
        }

        ul.outside{
            list-style-position:outside;
        }
    style>

head>
<body>
    <p>无序列表insidep>
    <ul class="inside">
        <li>无序列表li>
        <li>无序列表li>
        <li>无序列表li>
        <li>无序列表li>
        <li>无序列表li>
        <li>无序列表li>
    ul>
    <p>无序列表outsidep>
    <ul class="outside">
        <li>无序列表li>
        <li>无序列表li>
        <li>无序列表li>
        <li>无序列表li>
        <li>无序列表li>
        <li>无序列表li>
    ul>
body>

显示结果

HTML+CSS基础入门-第十六天(CSS-列表属性)_第2张图片

设置图像列表标记

属性

  • url 图像的路径
  • none 默认,无图形被显示
  • inherit 规定应该从父元素继承 list-style-image 属性的值

代码


<head>
    <title>列表属性title>
    <meta charset="utf-8">
    <style type="text/css">
        ul{
            list-style-image:url(play.png);
        }

    style>

head>
<body>

    <ul >
        <li>无序列表li>
        <li>无序列表li>
        <li>无序列表li>
        <li>无序列表li>
        <li>无序列表li>
        <li>无序列表li>
    ul>

body>

显示结果

HTML+CSS基础入门-第十六天(CSS-列表属性)_第3张图片

简写方式

list-style:squere inside url(*.jpg)

代码


<head>
    <title>列表属性title>
    <meta charset="utf-8">
    <style type="text/css">
        ul{
            list-style:square inside url(play.png)
        }
        ol{
            list-style: square inside url(play.jpg)
        }

    style>

head>
<body>

    <ul >
        <li>无序列表li>
        <li>无序列表li>
        <li>无序列表li>
        <li>无序列表li>
        <li>无序列表li>
        <li>无序列表li>
    ul>

    <ol >
        <li>有序列表li>
        <li>有序列表li>
        <li>有序列表li>
        <li>有序列表li>
        <li>有序列表li>
        <li>有序列表li>
    ol>
body>

显示结果

HTML+CSS基础入门-第十六天(CSS-列表属性)_第4张图片

你可能感兴趣的:(html+css)