您的位置：首页 > 运维架构 > 网站架构

css网站元素设计-列表元素的使用

2010-09-11 12:47 831 查看

1、列表形式由于展示形式整齐直观，在网站设计中占有很大的比重。早期的列表都是由表格实现的，在代码上过于繁杂，设计和可读性较差。这一节我们重点探讨无序列表ul及有序列表ol元素的使用。
看XHTML代码很简单：

程序代码
<ul>
<li>布局概述</li>
<li>页面元素入门</li>
<li>高级技巧</li>
<li>高级技巧</li>
</ul>
<ol>
<li>布局概述</li>
<li>页面元素入门</li>
<li>高级技巧</li>
<li>高级技巧</li>
</ol>
以上对比效果见图左：

2、针对ul的项目列表符号有以下几种：

程序代码
ul{list-style-type:none} /*不显示项目符号*/
ul{list-style-type:disc} /*实心圆点，默认的*/
ul{list-style-type:ncircle} /*空心圆点*/
ul{list-style-type:square} /*实心方块*/
针对ol的项目列表符号有以下几种：none（没有）;decimal（实心圆点，默认的）;circle（空心圆点），square（小方块）；

程序代码
ol{list-style-type:none} /*不显示项目符号*/
ol{list-style-type:decimal} /*阿拉伯数字*/
ol{list-style-type:lower-roman} /*小写罗马数字*/
ol{list-style-type:upper-roman} /*大写罗马数字*/
ol{list-style-type:lower-alpha} /*小写英文字母*/
ol{list-style-type:upper-alpha} /*大写英文字母*/

3、使用图片自定义项目符号

程序代码
ul{list-style-image:url(arrow.gif);border:1px #33ccff solid;list-style-position:inside;}
其中：list-style-position:inside;的意义是设置列表项位置位于内部，inside与outside是这一句的属性值，对比效果如上图右侧。
其实用过这种方法的朋友会发现，使用这种方法固然简单，但定位起来比较麻烦，而且在效果上也有很大的局限性，下面我们采用背景图片的方法来实现项目列表样式：
css代码如下：

程序代码
ul{list-style-type:none;}/*去掉项目符号*/
li{background:url(arrow.gif) no-repeat 0px 3px;
padding-left:20px;}

4、使列表变为段落
在以前的教程中，我们接触了display:block;的属性定义，而display的可用值中除了这个外，还有一个inline;详细见下：

程序代码
display:block;//将对象显示为块状或叫做盒状，后一个对象换行显示。
display:none;//隐藏，不显示对象；
display:inline;//行间内联样式，对象排列在一行中，后一个对象继续连接此对象显示；
display:inline-block;//对象显示为块状，但能呈现内联样式。
display:list-item;//将对象作为列表项显示；
以下做一对比：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>步步为营，实战div+css系列教程</title>
</head>
<style tpye="text/css">

</style>
<body>
<h1>这一节我们重点讲解列表元素的应用：</h1>
<ul>
<li>改变列表项目符号</li>
<li>使列表变为段落</li>
<li>列表的缩进排版</li>
<li>复杂列表的排版</li>
</ul>
<h1>在排版的过程中，应用一些图文混排技术，可以实现更好的效果。</h1>
</body>
</html>

效果如图：

把ul对象，li对象,h1对象都设置为内联属性，便形成一段落，再控制好左边距及内边距，就如图右部分所示。
下面我们继续对代码改进，设置其首行缩进：
首行缩进代码：

程序代码
text-indent:32px;//可以用固定值，
text-indent:50%; //也可以用其它值如：50%，0.5em.还可以用负值。

小结：这一节主要认识了有序列表ol与无序列表ul，并且常用的属性参数。下一节我们将综合这方面内容实现较复杂的列表布局。

if ($ != jQuery) {
$ = jQuery.noConflict();
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航