• 网页列表设计


    1、建立无序的列表

    无序列表用<ul>标签定义,表示一个没有特定顺序的相关条目的集合。无序列表的各个列表之间没有顺序级之分。通常会在每个列表前添加一个项目符号,并且每行会针对左边界压缩一定的距离。

    无序列表用一对<ul>标记,但每个列表要用<li>定义。

    使用type属性可以定制无序项目列表符号:disc实心圆、circle空心圆、square实心方块、默认的是disc。type属性既可以在ul中设置,还可以直接在li中设置。

    body>
       <div>
           <h1 align="center">本章内容</h1>
           <ul>
               <li><h2 >建立无序的列表</h2></li>
               <li><h2>建立有序的列表</h2></li>
               <li><h2>建立定义列表</h2></li>
               <li><h2>列表的嵌套</h2></li>  
           </ul>
       </div>
        <hr />
        <div style=" 650px; margin :0 auto ">
            <p><h3>建立无序列表中的具体知识</h3></p>
            <div style=" 300px; height:120px; background-color:yellowgreen ">
                <ul type="disc">
                    <li>在ul中设置type属性为disc时的列表符号样式</li>
                    <li type="circle">在li中设置type属性为circle时列表符号样式</li>
                    <li type="square">在li中设置type属性为实心正方形</li>
                </ul>
            </div>
        </div>
    </body>


    2、建立有序的列表

    有序列表<ol>标签在列表项目前添加的编号而不是项目符号,编号从第一列表项开始向后递增。当需要给列表项目排列顺序时就可以使用有序列表。

    同样可以

    1>通过设置type属性定制有序列表的项目符号:设置成1数字序号、a小写字母、A大写字母、i小写罗马字母、I大写罗马数字。默认是1数字列表。

    2>start属性:定制有序列表中列表项的起始数。例type=“i”,start=5.则有序表的第一个项目符号从v开始。

    3>value属性:定制有序列表中列表序号的数值。仅仅使用于li元素,用来指定当前列表项的序号。

      <div style="600px;height:900px ;background-color :gold">
            <p><h3>建立有序的列表</h3></p>
            <div >
                <ol>
                    <li>第一个有序列表</li>
                    <li>第二个有序列表</li>
                </ol>
                <hr style="400"/>
                <ol type="i">
                    <li>使用type属性的不同格式</li>
                    <li>使用type属性的不同格式</li>
                    <li>使用type属性的不同格式</li>
                </ol>
                <hr style="400" />
                <ol type="a">
                    <li>使用type属性的不同格式</li>
                    <li>使用type属性的不同格式</li>
                    <li>使用type属性的不同格式</li>
                </ol>
                <hr style="400" />
                <ol type="A">
                    <li>使用type属性的不同格式</li>
                    <li>使用type属性的不同格式</li>
                    <li>使用type属性的不同格式</li>
                </ol>
                <hr />
                <ol type=" A" start=" 3">
                    <li>start属性定制起始数</li>
                    <li>start属性定制起始数</li>
                    <li>start属性定制起始数</li>
                </ol>
                <hr />
                <ol>
                    <li>li标签适用的value属性</li>
                    <li value=" 3">li标签适用的value属性</li>
                    <li value="6">li标签适用的value属性</li>
                </ol>
    
            </div>
        </div>


    3、建立定义列表

    定义列表通常用于术语的定义,用<dl>标签实现。术语标签由<dt>标签开始,术语的解释说明由<dd>标签实现,dd后的文字会缩进显示。

     1  <div style ="background-color :red ">
     2         <p><h3>建立定义列表</h3></p>
     3         <dl>
     4             <dt>术语的定义:张保东</dt>
     5             <dd>东腾科技有限公司的创始人</dd>
     6         </dl>
     7         <dl>
     8             <dt>东腾科技</dt>
     9             <dd>东腾科技有限公司的简称,一个拥有现代科技为一体的全职能新型化公司</dd>
    10         </dl>
    11     </div>


    4、列表的嵌套

    通常嵌套列表用于反映层次较多的内容。可以将编号或项目列表嵌套在其他的编号列表中。

    1>嵌套一层列表

    2>嵌套多层

    3>混合嵌套

     1 <div style=" 600px; height: 800px; background-color: #b2e05c">
     2         <h3>列表的嵌套</h3><hr />
     3         <div>
     4             <h4>嵌套一层列表</h4>
     5             <ul>
     6                 <li>手机</li>
     7                 <li>
     8                     电脑
     9                     <ul>
    10                         <li>联想</li>
    11                         <li>戴尔</li>
    12                         <li>华硕</li>
    13                     </ul>
    14                 </li>
    15                 <li>冰箱</li>
    16             </ul>
    17         </div><hr />
    18         <div>
    19             <h4>嵌套多层无序列表</h4>
    20             <ul>
    21                 <li>手机</li>
    22                 <li>电脑
    23                     <ul>
    24                         <li>联想
    25                         <ul>
    26                             <li>联想电脑顶呱呱</li>
    27                             <li>联想电脑没有用</li>
    28                         </ul>
    29                         </li>
    30                         <li>戴尔
    31                         <ul>
    32                             <li>戴尔电脑好的不得了</li>
    33                             <li>戴尔电脑还不错</li>
    34                             </ul>
    35                         </li>
    36                     </ul>
    37                 </li>
    38                 <li>冰箱</li>
    39             </ul>
    40         </div><hr />
    41         <div>
    42             <h4>混合嵌套的列表,有序与无序</h4>
    43             <ul>
    44                 <li>手机</li>
    45                 <li>
    46                     电脑
    47                     <ul>
    48                         <li>联想
    49                         <ol>
    50                             <li>联想不错</li>
    51                             <li>联想杠杠的</li>
    52                             <li>联想是个啥</li>
    53                             </ol></li>
    54                         <li>戴尔</li>
    55                     </ul>
    56                 </li>
    57                 <li>华硕</li>
    58             </ul>
    59         </div>
    60        
    61 
    62     </div>

  • 相关阅读:
    模拟一个弹出层
    mysql去重
    java 使用map返回多个对象组装
    java替换包含html标签
    java 给指定时间加上天数or给当前日期加天数
    js下载文件 阿星小栈
    Redis中Set集合命令 阿星小栈
    Mysql查询不为null值和字段为null 阿星小栈
    php求今天、昨天、明天时间戳的方法 阿星小栈
    PHP百分数转小数,php 小数转换百分数函数 阿星小栈
  • 原文地址:https://www.cnblogs.com/dongteng/p/4977503.html
Copyright © 2020-2023  润新知