zoukankan      html  css  js  c++  java
  • 前端列表

    含义
    把…制成表,以表显示容器里面装载着文字或图表的一种形式,叫列表。列表最大的特点就是 整齐 、整洁、 有序

    无序列表 ul

    无序列表的各个列表项之间没有顺序级别之分,是并列的。其基本语法格式如下:

    <ul>
      <li>列表项1</li>
      <li>列表项2</li>
      <li>列表项3</li>
      ......
    </ul>

    注意点:

     1. <ul></ul>中只能嵌套<li></li>,直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
     2. <li></li>之间相当于一个容器,可以容纳所有元素。
     3. 无序列表会带有自己样式属性,放下那个样式,一会让CSS来!

    例子:

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
        </head>
        <body>
         <h3> 你喜欢的水果:</h3>
         <ul>
          <li>香蕉</li>
          <li>苹果</li>
          <li>橘子</li>
          <li>榴莲</li>
          <li>大白菜</li>
          <li>
           <h4>水果蔬菜</h4>
           <p>西红柿</p>
          </li>
         </ul>
        </body>
    </html>

    运行结果如下:

    有序列表 ol

    有序列表即为有排列顺序的列表,其各个列表项按照一定的顺序排列定义,有序列表的基本语法格式如下:

    <ol>
      <li>列表项1</li>
      <li>列表项2</li>
      <li>列表项3</li>
      ......
    </ol>

    所有特性基本与ul 一致。

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
        </head>
        <body>
         <ol>
          <li>中国</li>
          <li>美国</li>
          <li>英国</li>
          <li>俄罗斯</li>
         </ol>
        </body>
    </html>

    运行结果如下:

    自定义列表

    定义列表常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号。其基本语法如下:

      <dt>名词1</dt>
      <dd>名词1解释1</dd>
      <dd>名词1解释2</dd>
      ...
      <dt>名词2</dt>
      <dd>名词2解释1</dd>
      <dd>名词2解释2</dd>
      ...
    </dl>
    
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
        </head>
        <body>
         <dl>
          <dt>北京</dt>
          <dd>昌平</dd>
          <dd>通州</dd>
          <dd>顺义</dd>
          <dd>海淀</dd>
         </dl>
         <dl>
          <dt>雍正</dt>
          <dd>甄嬛</dd>
          <dd>皇后</dd>
          <dd>沈眉庄</dd>
          <dd>年妃</dd>
          <dt>雍正</dt>
          <dd>甄嬛</dd>
          <dd>皇后</dd>
          <dd>沈眉庄</dd>
          <dd>年妃</dd>
         </dl>
        </body>
    </html>


    网站底部的友情链接用自定义列表做比较好

    别废话,拿你代码给我看。
  • 相关阅读:
    wingIDE Pro6 破解教程
    C++中的访问权限
    解决wine中文字体方块或乱码
    linux下目录的作用
    linux下查看系统信息
    Windows Eclipse Maven 安装
    Centos SVN 搭建
    Mysql MyISAM 与 InnoDB 效率
    Linux删除除指定后缀外的所有文件
    mysql 多个timestamp设置自动更新 错误:there can be only one TIMESTAMP column with CURRENT_TIMESTAMP
  • 原文地址:https://www.cnblogs.com/lvxueyang/p/13707466.html
Copyright © 2011-2022 走看看