css网站元素设计-列表元素的使用
1、列表形式由于展示形式整齐直观,在网站设计中占有很大的比重。早期的列表都是由表格实现的,在代码上过于繁杂,设计和可读性较差。这一节我们重点探讨无序列表ul及有序列表ol元素的使用。
看XHTML代码很简单:
程序代码
以上对比效果见图左:
![](http://www.chaojibaby.com/blog/attachments/month_0711/v20071118125525.gif)
2、针对ul的项目列表符号有以下几种:
程序代码
针对ol的项目列表符号有以下几种:none(没有);decimal(实心圆点,默认的);circle(空心圆点),square(小方块);
程序代码
3、使用图片自定义项目符号
程序代码
其中:list-style-position:inside;的意义是设置列表项位置位于内部,inside与outside是这一句的属性值,对比效果如上图右侧。
其实用过这种方法的朋友会发现,使用这种方法固然简单,但定位起来比较麻烦,而且在效果上也有很大的局限性,下面我们采用背景图片的方法来实现项目列表样式:
css代码如下:
程序代码
4、使列表变为段落
在以前的教程中,我们接触了display:block;的属性定义,而display的可用值中除了这个外,还有一个inline;详细见下:
程序代码
以下做一对比:
程序代码
看XHTML代码很简单:
![程序代码](http://www.chaojibaby.com/blog/images/code.gif)
<ul>
<li>布局概述</li>
<li>页面元素入门</li>
<li>高级技巧</li>
<li>高级技巧</li>
</ul>
<ol>
<li>布局概述</li>
<li>页面元素入门</li>
<li>高级技巧</li>
<li>高级技巧</li>
</ol>
<li>布局概述</li>
<li>页面元素入门</li>
<li>高级技巧</li>
<li>高级技巧</li>
</ul>
<ol>
<li>布局概述</li>
<li>页面元素入门</li>
<li>高级技巧</li>
<li>高级技巧</li>
</ol>
以上对比效果见图左:
![](http://www.chaojibaby.com/blog/attachments/month_0711/v20071118125525.gif)
2、针对ul的项目列表符号有以下几种:
![程序代码](http://www.chaojibaby.com/blog/images/code.gif)
ul{list-style-type:none} /*不显示项目符号*/
ul{list-style-type:disc} /*实心圆点,默认的*/
ul{list-style-type:ncircle} /*空心圆点*/
ul{list-style-type:square} /*实心方块*/
ul{list-style-type:disc} /*实心圆点,默认的*/
ul{list-style-type:ncircle} /*空心圆点*/
ul{list-style-type:square} /*实心方块*/
针对ol的项目列表符号有以下几种:none(没有);decimal(实心圆点,默认的);circle(空心圆点),square(小方块);
![程序代码](http://www.chaojibaby.com/blog/images/code.gif)
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} /*大写英文字母*/
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、使用图片自定义项目符号
![程序代码](http://www.chaojibaby.com/blog/images/code.gif)
ul{list-style-image:url(arrow.gif);border:1px #33ccff solid;list-style-position:inside;}
其中:list-style-position:inside;的意义是设置列表项位置位于内部,inside与outside是这一句的属性值,对比效果如上图右侧。
其实用过这种方法的朋友会发现,使用这种方法固然简单,但定位起来比较麻烦,而且在效果上也有很大的局限性,下面我们采用背景图片的方法来实现项目列表样式:
css代码如下:
![程序代码](http://www.chaojibaby.com/blog/images/code.gif)
ul{list-style-type:none;}/*去掉项目符号*/
li{background:url(arrow.gif) no-repeat 0px 3px;
padding-left:20px;}
li{background:url(arrow.gif) no-repeat 0px 3px;
padding-left:20px;}
4、使列表变为段落
在以前的教程中,我们接触了display:block;的属性定义,而display的可用值中除了这个外,还有一个inline;详细见下:
![程序代码](http://www.chaojibaby.com/blog/images/code.gif)
display:block;//将对象显示为块状或叫做盒状,后一个对象换行显示。
display:none;//隐藏,不显示对象;
display:inline;//行间内联样式,对象排列在一行中,后一个对象继续连接此对象显示;
display:inline-block;//对象显示为块状,但能呈现内联样式。
display:list-item;//将对象作为列表项显示;
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">
<!--
ul{list-style-type:none;display:inline;padding:0px;margin-left:0px;}/*去掉项目符号*/
li{display:inline}
h1{display:inline;font-size:16px;font-weight:normal}
-->
</style>
<body>
<h1>这一节我们重点讲解列表元素的应用:</h1>
<ul>
<li>改变列表项目符号</li>
<li>使列表变为段落</li>
<li>列表的缩进排版</li>
<li>复杂列表的排版</li>
</ul>
<h1>在排版的过程中,应用一些图文混排技术,可以实现更好的效果。</h1>
</body>
</html>
<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">
<!--
ul{list-style-type:none;display:inline;padding:0px;margin-left:0px;}/*去掉项目符号*/
li{display:inline}
h1{display:inline;font-size:16px;font-weight:normal}
-->
</style>
<body>
<h1>这一节我们重点讲解列表元素的应用:</h1>
<ul>
<li>改变列表项目符号</li>
<li>使列表变为段落</li>
<li>列表的缩进排版</li>
<li>复杂列表的排版</li>
</ul>
<h1>在排版的过程中,应用一些图文混排技术,可以实现更好的效果。</h1>
</body>
</html>
效果如图:
把ul对象,li对象,h1对象都设置为内联属性,便形成一段落,再控制好左边距及内边距,就如图右部分所示。
下面我们继续对代码改进,设置其首行缩进:
首行缩进代码:
![程序代码](http://www.chaojibaby.com/blog/images/code.gif)
text-indent:32px;//可以用固定值,
text-indent:50%; //也可以用其它值如:50%,0.5em.还可以用负值。
text-indent:50%; //也可以用其它值如:50%,0.5em.还可以用负值。
小结:这一节主要认识了有序列表ol与无序列表ul,并且常用的属性参数。下一节我们将综合这方面内容实现较复杂的列表布局。