学习任务

    学习制作网页中常见的列表

学习目标

    1.熟悉背景background的相关属性

    2.掌握使用CSS样式美化列表的方法

    list-style是一个复合属性，用于控制列表项目符号的样式。在网页制作过程中，为了更有效地控制列表项目符号，通常将list-style的属性值定义为none，然后通过为<li>设置背景图像的方式实现不同的列表项目符号。

观看视频

任务要求

    制作如图所示的列表。

素材下载

      点击此处下载素材1

关键代码

    <style type="text/css">

        li{

          list-style:none;  /*清除列表的默认样式*/

          height:30px;

          line-height:30px;

          background:url(images/book.png) no-repeat left center;  /*为li设置背景图像*/

          padding-left:25px;

          border-bottom:1px dotted #ccc;

          }

    </style>

拓展训练

制作音乐排行榜，效果如图所示。

素材下载

        点击此处下载素材2