css7.列表

最新推荐文章于 2024-12-21 13:32:58 发布

时光无错孤独难谈

最新推荐文章于 2024-12-21 13:32:58 发布

阅读量133

点赞数

分类专栏： html5 && css

本文链接：https://blog.youkuaiyun.com/qq_43745403/article/details/104291909

版权

html5 && css 专栏收录该内容

23 篇文章

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <style type="text/css">

            /* 
                去点项目符号
             */
        
            ul{
                list-style: none;
            }
/*         
            ol{
                list-style: none;
            } */
        



        dl{
            font-family:微软雅黑 ;
        }
        </style>


    </head>
        <!-- 
            1.无序列表                      
            2.有序列表
            3.定义列表
         -->

         <!--       ul,li 都是块元素
             无序列表  
                使用<ul>标签,创建列表
                使用li创建列表项

                通过type属性可以修改无序列表项目符号
                    可选值： <ul type="square">
                        disc:实心圆点
                        square:实心方块
                        circle:空心圆圈
          -->
         <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
         </ul>

         <!--   块元素
             有序列表和无序列表类似，用ol创建
                可选值：1 a A I i
          -->

          <ol type="A">
              <li>1</li>
              <li>2</li>
              <li>3</li>
          </ol>

          <!-- 
              列表之间可以互相嵌套，ol,ul,dl
           -->
           <ul>
               <li>
                   鱼香肉丝
                    <ol>
                        <li>鱼</li>
                        <li>香</li>
                        <li>肉丝</li>
                    </ol>
               </li>
           </ul>

           <!-- 
               定义列表
                    作用：对词汇或内容进行定义
                    使用 dl 标签
                        两个子标签：
                            dt:被定义内容
                            dd:对定义内容描述
            -->
            <dl>
                <dt>武松</dt>
                <dd style="color: rgb(72, 218, 138);">英雄，战斗力99</dd>
                <dd>打死老虎，投奔梁山</dd>
            </dl>



            
    <body>
        


    </body>


</html>