网站制作必要的CSS列表样式技巧
在标记网站时，HTML中的某些元素适合许多情况，其中一个更有用的元素是HTML列表。使用列表，开发人员可以标记横向导航、下拉导航、链接列表，甚至滚动内容面板（在JavaScript的帮助下）。这些特性可以帮助开发人员构建新的站点和应用程序，以及将新内容集成到现有应用程序中。

无序/有序列表
unorderd列表推荐用于项目列表，顺序无关。无序列表（所有列表实际上）W3C阻止作者从单纯的应用列表缩进文本的一种手段。这是一个文体问题，由样式表妥善处理。

另一方面，当列表元素的顺序重要时，鼓励使用有序列表，例如：烹饪菜谱或按转身方向使用。对于本文中的示例，可以用OL代替UL或反之亦然。这个选择取决于你的判断力。

在它的最简单形式的有序列表、无序列表（简称前进，注意“列表”）将包含类似的标记如下：

<!-- an unordered list example -->
<ul>
    <li><a href="#">List Item One</li>
    <li><a href="#">List Item Two</li>
    <li><a href="#">List Item three</li>
    <li><a href="#">List Item Four</li>
    <li><a href="#">List Item Five</li>
&lt/ul>

<!-- an ordered list example -->
<ol>
    <li><a href="#">List Item One</li>
    <li><a href="#">List Item Two</li>
    <li><a href="#">List Item three</li>
    <li><a href="#">List Item Four</li>
    <li><a href="#">List Item Five</li>
&lt/ol>

检查列表的框模型揭示如下：

简言之，UL和OL都被认为是块级元素，它们的每一个子标记都被认为是块级元素。因此，我们可以将边距和填充应用到所有四个方面的两个项目中。关于UL（或OL的数字）的弹头点，左边距将同时将子弹/数字移动到右边和文本，同时填充，同时增加子弹/数字和内容之间的空间。

样式表的基本知识

将要使用的列表样式化为一个列表，是一项相当简单的任务。要用示例图形图标替换OL中的子弹，您可以做如下操作：

HTML

<ul>
    <li><a href="#">List Item One</li>
    <li><a href="#">List Item Two</li>
    <li><a href="#">List Item three</li>
    <li><a href="#">List Item Four</li>
    <li><a href="#">List Item Five</li>
&lt/ul>

CSS

ul li{
    list-style:none; /* removes the default bullet */
    background: url(../images/icon-for-li.gif) no-repeat left center;
    /*adds a background image to the li*/
    padding-left: 10px
    /* this would be the width of the background image, plus a little more to space things out properly */
    }

按顺序排列的列表的基本样式同样简单明了。考虑下面的列表和CSS。

<ol>
    <li><a href="#">List Item One</li>
    <li><a href="#">List Item Two</li>
    <li><a href="#">List Item three</li>
    <li><a href="#">List Item Four</li>
    <li><a href="#">List Item Five</li>
&lt/ol>

CSS

使用CSS，我们将改变字体的字体来改变数字的字体，然后我们将针对我们的李的标签改变他们的字体，以便给他们。

与数字不同的视觉表示。

ol{
    font-family: Georgia, "Times New Roman", serif;
    color: #ccc;
    font-size: 16px;
}
ol li a{
    font-family: Arial, Verdana, sans-serif;
    font-size: 12px;
}

更高级的列表使用

访问图像Tab Rollovers

虽然这是一篇较旧的文章，发表于2003，但其中包含的信息非常宝贵。对simplebits丹cedarholm解释如何使用CSS的创建导航图像，HTML和图像。如果在它的绝对值得一读，你没有读过这篇文章。下面的代码是一个概括的版本，但丹提供的一个完整的解释的代码在自己的网站simplebits

CSS

<ul id="nav">
<li id="thome"><a href="#">Home</li>
<li id="tservices"><a href="#">Our Services</li>
<li id="tabout"><a href="#">About Us</li>
&lt/ul>

HTML

#nav {
margin: 0;
padding: 0;
height: 20px;
list-style: none;
display: inline;
overflow: hidden;
}

#nav li {
margin: 0;
padding: 0;
list-style: none;
display: inline;
}

#nav a {
float: left;
padding: 20px 0 0 0;
overflow: hidden;
height: 0px !important;
height /**/:20px; /* for IE5/Win only */
}

#nav a:hover {
background-position: 0 -20px;
}

#nav a:active, #nav a.selected {
background-position: 0 -40px;
}

#thome a  {
width: 40px;
background: url(home.gif) top left no-repeat;
}
#tservices a  {
width: 40px;
background: url(services.gif) top left no-repeat;
}
#tabout a  {
width: 40px;
background: url(about.gif) top left no-repeat;
}

虽然上面的方法是很好的，如果你知道你的导航项将会是什么，它不会出现问题，如果你使用的内容管理或博客系统，如WordPress，允许您创建和重命名页面随意。下面的技术已经存在了一段时间，但同样有用，如果不是比以前的技术有用的话。Douglas Bowman写了一篇文章，题目是2003：CSS的滑动门

这种技术使用两个背景图像，它们可以水平平铺以包含一个长页面标题或水平收缩以包含一个短页面标题。我们的HTML标记与上面的技术非常相似。我们的主要变化将集中在我们如何用CSS样式表。

<div id="header">
<ul>
<li><a href="#">Home</li>
<li id="current"><a href="#">Services</li>
<li><a href="#">About Us</li>
</ul>    
</div>    

#header {
float:left;
width:100%;
background:#DAE0D2 url("bg.gif") repeat-x bottom;
font-size:93%;
line-height:normal;
}
#header ul {
margin:0;
padding:10px 10px 0;
list-style:none;
}
#header li {
float:left;
background:url("left.gif") no-repeat left top;
margin:0;
padding:0 0 0 9px;
}
#header a {
float:left;
display:block;
background:url("right.gif") no-repeat right top;
padding:5px 15px 4px 6px;
text-decoration:none;
font-weight:bold;
color:#765;
}
/* Commented Backslash Hack
hides rule from IE5-Mac */
#header a {float:none;}
/* End IE5-Mac hack */
#header a:hover {
color:#333;
}
#header #current {
background-image:url("left_on.gif");
}
#header #current a {
background-image:url("right_on.gif");
color:#333;
padding-bottom:5px;
}

内容器

一个趋势是越来越受欢迎的是内容器或滑块的概念。这些块级元素循环（或是切换通过用户交互）一组预定的内容可以是任何网页内容。这是一个技术，保留完全的Flash，但随着JavaScript库，如jQuery，MooTools的到来，和原型现在可以做严格的HTML / JavaScript和CSS。我们的代码下面是使用jQuery和jQuery插件叫做jCarousel Lite为例。

HTML

<button class="prev">Prev</button>
<button class="next">Next</button>
        
<div class="anyClass">
    <ul>
        <li><img src="someimage" alt="" width="100" height="100" ></li>
        <li><img src="someimage" alt="" width="100" height="100" ></li>
        <li><img src="someimage" alt="" width="100" height="100" ></li>
        <li><img src="someimage" alt="" width="100" height="100" ></li>
    </ul>
</div>
    
    
  $(function() {
            $(".anyClass").jCarouselLite({
                btnNext: ".next",
                btnPrev: ".prev"
            });
        });
    
这种技术的例子可以在下面找到。注意不是所有下面的例子使用jCarousel Lite，但他们确实描绘了一个类似的技术效果。