DivCSS实例教程：新颖别致的网站栏目列表元素

现在的网站界面UI设计越来越丰富多彩，各种各样的形式、结构都有可能遇到。仔细的观察UI效果图，合理的运用HTML标签来组织内容，使HTML文档具有良好的结构，将外观表现完全分离到CSS中。

本文作者：52CSS.com 如需转载请建立本站链接（http://www.52css.com/），并且不得随意改动文章内容、保留此版权声明文本！

本站52CSS.com介绍一款新颖别致的网站栏目列表元素。色彩丰富，新颖别致，此形式将会给页面视觉带来很好的影响。效果图片如下：

首先开始HTML编码，上部是一个标题标签“52CSS DivCSS教程”，下部为网站栏目列表。标题运用h2标签，网站栏目列表运用ul+li标签来组织。HTML编码如下：

Example Source Code [www.52css.com]

<h2><a href="http://www.52css.com/" title="我爱CSS">52CSS <em>DivCSS教程</em></a></h2>
<ul>
    <li id="link1"><a href="#">DivCSS教程</a></li>
    <li id="link2"><a href="#">CSS网页布局实例</a></li>
    <li id="link3"><a href="#">CSS2.0教程</a></li>
    <li id="link4"><a href="#">CSS酷站欣赏</a></li>
    <li id="link5"><a href="#">CSS模板免费下载</a></li>
</ul>

以上面的编码来组织内容具有良好的结构。在未进行CSS样式定义以前，我们可以观察一下效果。在手机或其他便携设置中，在网站丢失样式文件与图片时，我们有可能得到这样的“纯素”效果，如图所示：

开始编写CSS样式。将HTML“还原”成如效果图所示的外观。首先是标题的CSS样式定义：

Example Source Code [www.52css.com]

h2 { 
    width:200px; 
    height:30px; 
    margin:0 auto; 
    border-bottom:2px solid #beba87;
}
h2 a { 
    font-size:20px; 
    font-family:Arial, Helvetica, sans-serif, "宋体";
    color:#de9d00; 
    text-decoration:none;
}

定义h2标签的宽度、高度，设置外边距实现水平居中对齐，设置下边框线为2px的实线。
设置链接文本的大小、字体、颜色，去掉链接文本下划线。

Example Source Code [www.52css.com]

h2 a em { 
    font-size:16px; 
    color:#000; 
    font-style:normal;
}
h2 a:hover { 
    color:#06f;
}
h2 a:hover em { 
    color:#c00;
}

设置h2标签链接元素中em的文字大小、颜色，字形为正常。
分别定义链接元素及em悬停状态下的颜色。
此时标题部分的CSS样式已经定义完成。效果如图所示：

开始编写网站栏目列表UL的CSS样式。

Example Source Code [www.52css.com]

ul { 
    width:125px; 
    margin:0 auto; 
    padding:8px 0 8px 75px; 
    background:url(bg.jpg) no-repeat 3px 12px; 
    list-style-type:none;
}
ul li { 
    line-height:24px; 
    font-size:13px;
}

设置宽度，定义外边距，实现水平居中对齐。定义内边距，将内容约束在合适的位置。定义背景图片，去除列表项预设标记。定义li的行距与文字大小。

Example Source Code [www.52css.com]

ul li a { 
    display:block; 
    width:125px; 
    height:24px; 
    text-indent:22px; 
    color:#333; 
    text-decoration:none; 
}
ul li a:hover { 
    color:#00f; 
    text-decoration:underline;
}

将列表内链接元素转换为块元素，设置宽度、高底，文本缩进、文本颜色，去除链接下划线。
定义链接的悬停状态，文本颜色及链接下划线。此时的页面效果如图所示：

我们发现，还有小图标没有完成。我们首先制作好这些小图片备用，将这五个小图标全部集成到一张图片上，然后通过背景图片的定位来完成。这就是CSS Sprites思想。关于此知识，请参考：
CSS Sprites工作原理及其对CSS布局的意义、优点和缺点介绍
http://www.52css.com/article.asp?id=735

准备好需要用到的图片icon.png，宽度为16px，高度为150px，每一个图片居于16*30的区域内，这样做可以很方便的进行统一定位的设置，而不需要再进行精确的计算。
如第一个图标的y定位是4px，则第二个图标相差30px，就可以定义为：-26px。如图所示为文件icon.png：

在ul li a内加入两条属性，第一条属性设置背景图片，第二条属性设置背景图片不重复平铺：

Example Source Code [www.52css.com]

    background-image:url(icon.png); 
    background-repeat:no-repeat;

然后进行定位的设置：

Example Source Code [www.52css.com]

ul li#link1 a { background-position:0 4px;}
ul li#link2 a { background-position:0 -26px;}
ul li#link3 a { background-position:0 -56px;}
ul li#link4 a { background-position:0 -86px;}
ul li#link5 a { background-position:0 -116px;}

在不同的li下的链接元素，将会有不同的定位。以此来实现最终的效果。

本文作者：52CSS.com 如需转载请建立本站链接（http://www.52css.com/），并且不得随意改动文章内容、保留此版权声明文本！

★★★ >>>点击查看本案例最终预览<<<

最终的效果图片：