首页 > HTML5与CSS3.0 > html网页之列表效果实现

html网页之列表效果实现

作者: 分类:HTML5与CSS3.0 点击: 10,005 次

    列表是组织网页内容非常有用的一种方法。列表主要分为:

    1、无序列表

    2、有序列表

    3、定义列表

    一、无序列表

    用在网站的导航(网站主导航,侧边栏导航,文章列表)上,用来组织内容,是一种结构性标签。在li里面可以包含div等布局性的标签。

    1、基本结构

    <ul>  
       <li></li>  
       <li></li>
        ……
    </ul>

    ul:unorderlist,li:list

    ul和li是一种父子关系,一个无序列表里面可以包含很多列表项(li)。

    2、常见案例

    2.1普通列表

    <ul>
        <li><a href="#">HTML教程</a></li>
        <li><a href="#">CSS教程</a></li>
        <li><a href="#">jQuery教程</a></li>
        <li><a href="#">zblog教程</a></li>
    </ul>

    这种结构一般用来实现水平或者纵向的导航,一般是网站的主导航,或者文章列表。

    纵向导航.png

    文章列表.png

    2.2嵌套列表

    如果要实现二级或者三级的下拉菜单,则需要列表的嵌套。

    <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">新手妈妈指南</a>
            <ul>
                <li><a href="#">准妈妈胎教</a></li>
                <li><a href="#">新生儿用品</a></li>
                <li><a href="#">母乳喂养</a></li>
                <li><a href="#">新生儿护理</a></li>
            </ul>
        </li>
        <li><a href="#">宝宝成长日记</a></li>
        <li><a href="#">家庭育儿心得</a></li>
    </ul>

    注意:被嵌套的列表是某一个li的子列表,应该放在对应的li里面,不能放在这个li后面的a标签里面。

    水平下拉导航.png

     

    2.3稍微复杂的内容组织

    模块化内容.png

    图文文章列表.png

    这种模块化的内容,每一个模块都可以是一个li,整个文章列表构成一个无序列表。

    <ul>
        <li>
           <div class="img">
              <a href="#" target="_blank"><img src="1.jpg"></a>
           </div>
           <div class="txt">
              <h3><a href="#" target="_blank">明朝最后一个皇帝的逃亡方案</a></h3>
              <p><div class="detail"> 2016-05-16 06:53:59更新<span class="tag">标签:永历政权,李定国,桂王,独家-大家</span></div>
           </div>
       </li>
       <li>...</li>
         ....
    <ul>

    可见li是一个结构性的标签,是用来组织内容的,只要内容具有模块化的特征,都可以考虑使用无序列表。

    2.4 排行榜

    很多人看见排行榜,都以为是用有序列表做的,哦漏!看看百度搜索风云榜就知道了。

    电影排行榜.png

    如果想让1、2、3等数字看起来有样式的话,还是无序列表好使。

    <ul>
        <li>
           <div>
        	    <span>1</span>
        	    <a title="百鸟朝凤" href="#">百鸟朝凤</a>						
        	    <a href="#">团购</a>
        	    <span>67284</span>
        	    <a href="#">search</a>
            </div>   
            <div>
                <a href="#"><img src="6.jpg"></a>
                <p><a href="#">朝:朝见;凤:凤凰,古代汉族神话传说中的鸟王。旧时喻指君主圣明而天下依附,后也比喻德高望重者众望所归。</a></p>
            </div>
        </li>
        <li>...</li>
        ...
    </ul>

    当然还有很多其他的用途,关键是有一双会观察会发现的眼睛,还有会思考的大脑。

    二、有序列表

    <ol> 
      <li><a href="#">《欢乐颂》</a></li>
      <li><a href="#">《大江东去》</a></li>
      <li><a href="#">阿耐简介</a></li>
    </ol>

    貌似很少发现有序列表在网页上的应用,连排行榜这么看似明显的效果都被无序列表抢了去,就暂且不表了。

    三、定义列表

    主要是用来描述某个专业术语的。只不过延伸开来,只要是个对象,都可以拿来描述的吧。

    <dl>     
        <dt>宋仲基</dt> 
        <dd>《太阳的后裔》和宋慧乔搭档,两宋CP。</dd> 
        <dt>宋慧乔</dt>
        <dd>《太阳的后裔》和宋仲基搭档,两宋CP。</dd>
        <dt>胡歌</dt>
        <dd>《仙剑奇侠传》《琅琊榜》《伪装者》</dd>
        <dt>霍建华</dt>
        <dd>《仙剑奇侠传3》《花千骨》</dd>
    </dl>

    dl:definition list(定义列表)

    dt:definition title(定义标题)

    dd:definition description(定义描述)

    记住了单词就不会把这几个标签搞混了,曾经见过有童鞋把dl标签当成dt,dt当dl的,傻傻分不清呀,还是提高英语单词为第一要义。

    不过在网页中,我们可以换个用法。

    <dl>
      <dt><a href="#">关于</a></dt>
      <dd><a href="#">关于站酷</a></dd>
      <dd><a href="#">版权声明</a></dd>
      <dd><a href="#">关于隐私</a></dd>
      <dd><a href="#">免责声明</a></dd>
      <dd><a href="#">网站地图</a></dd>
      <dd><a href="#">加入站酷</a></dd>
    </dl>

    定义列表dl.png

     



文章作者:andy
本文地址:http://wanlimm.com/77201809226965.html
版权所有 © 转载时必须以链接形式注明作者和原始出处!

上一篇:
下一篇:

或许你会感兴趣的文章:

6条回应:“html网页之列表效果实现”

  1. avatar 2279525437说道:

    感谢作者!感谢作者!

  2. avatar 2279525437说道:

    ~~ 感谢大大分享~~~

  3. avatar syz说道:

    学习了学习了~~ 感谢大大分享~~~

  4. avatar newfly35说道:

    很不错的文章,感谢作者!

发表评论

电子邮件地址不会被公开。 必填项已用*标注

This site uses Akismet to reduce spam. Learn how your comment data is processed.