列表制作音乐榜单的实例

zxh5566  2016-07-22 06:17   Hits: 

列表在生活中随处可见,在网页中也是如此,页面制作人员为了使网页的xhtml结构更加符合语义,会将列表以各种各样的形式体现在网页中,合理的使用列表会增强页面的结构性,语义性。(文章中的

xhtml代码与css代码已经经过测试,拷到网页中就可以看见实际效果)

首先看一下这个排行榜的xhtml结构

<div class="music_sort">
 <h1>音乐排行榜</h1>
 <div class="content">
  <ol>
   <li><strong>浪人情歌</strong> <span>伍佰</span></li>
   <li><strong>K歌之王</strong> <span>陈奕迅</span></li>
   <li><strong>心如刀割</strong> <span>张学友</span></li>
   <li><strong>零(战神 主题曲)</strong> <span>柯有伦</span></li>
   <li><strong>双子星</strong> <span>光良</span></li>
   <li><strong>离歌</strong> <span>信乐团</span></li>
   <li><strong>海阔天空</strong> <span>信乐团</span></li>
   <li><strong>天高地厚</strong> <span>信乐团</span></li>
   <li><strong>边走边爱</strong> <span>谢霆锋</span></li>
   <li><strong>想到和做到的</strong> <span>马天宇</span></li>
  </ol>
 </div>
</div>

经过前面的分析,可以知道这个榜单是有有序列表为核心构成的,在无任何css样式修饰的时候会显示浏览器默认解析的序号。将默认的显示效果与经过修饰过的显示效果对比可以发现数字序号已经不再

是普通的常见文字了,而是经过特殊处理的文字效果,换言之就是这个数字效果是我们必须使用图片才可以达到的,这个数字图片在列表中的处理方式也就是本例中要讲解的地方,这里主要注意两个问

题:
10个数字,也就是10个图片,可不可以将其合并为一张
将10张图片合并成一张图片,但xhtml结构中又没有针对每个列表li标签添加class类名,要怎么将图片指定到相对应的排名中。
针对这两个主要问题,看一下css样式代码

<style type="text/css">
.music_sort {
 width:200px;
 border:1px solid #E8E8E8;
}
.music_sort * {
 margin:0;
 padding:0;
 font:normal 12px/22px "宋体", Verdana,Lucida, Arial, Helvetica, sans-serif;
} /* 清除.music_sort容器中所有元素的默认内补丁和外补丁,并设置文字相关属性 */
.music_sort h1 {
 height:24px;
 text-indent:10px; /* 标题文字缩进,增加空间感 */
 font-weight:bold;
 color:#FFFFFF;
 background-color:#999999;
}
.music_sort ol {
 height:220px; /* 固定榜单列表的整体高度 */
 padding-left:26px; /* 利用内补丁增加ol容器的空间显示背景图片 */
 list-style:none; /* 去除默认的列表修饰符 */
 background:url(images/number.gif) no-repeat 0 0;
}
.music_sort li {
 width:100%;
 height:22px;
 list-style:none; /* 去除默认的列表修饰符 */
}
.music_sort li span {
 color:#CCCCCC; /* 将列表中的歌手名字设置为灰色 */
}
</style>

这段代码就是为了实现最终效果而写的,但重点的部分是.music_sort ol与.music_sort li两个类,将有序列表ol标签的高度属性值设置为一个固定值,这个固定值为列表li标签的10倍,并将列表所有的

默认样式修饰符取消,利用有序列表ol标签中增加左补丁的空间显示合并后的数字背景图。
简单的方法代替了给不同的列表li标签添加不同背景图片的繁琐步骤,但这种处理方式的缺陷就是必须调整好背景图片中10个数字图片之间的间距,而且如果增加了每个列表li标签的高度,那么就需要

重新修改背景图片10个数字图片之间的间距。

上一篇:css滤镜的是与非
下一篇:php数组的相关处理函数