寂寞部屋
- 关注互联网,关注生活
关注互联网,关注生活
2019年五月
« 4月    
 12345
6789101112
13141516171819
20212223242526
2728293031  
  • 日志总数:553 篇
  • 浏览总量:2,434,969 次
  • 运行天数:618 天
  • 建站时间:2017-9-14
  • 最后更新:2019-4-2

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

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

XML/HTML代码
  1. <ul>
  2. <li>布局概述</li>
  3. <li>页面元素入门</li>
  4. <li>高级技巧</li>
  5. <li>高级技巧</li>
  6. </ul>
  7. <ol>
  8. <li>布局概述</li>
  9. <li>页面元素入门</li>
  10. <li>高级技巧</li>
  11. <li>高级技巧</li>
  12. </ol>

以上对比效果见图左:

image

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

CSS代码
  1. ul{list-style-type:none} /*不显示项目符号*/
  2. ul{list-style-type:disc} /*实心圆点,默认的*/
  3. ul{list-style-type:ncircle} /*空心圆点*/
  4. ul{list-style-type:square} /*实心方块*/

针对ol的项目列表符号有以下几种:none(没有);decimal(实心圆点,默认的);circle(空心圆点),square(小方块);

CSS代码
  1. ol{list-style-type:none} /*不显示项目符号*/
  2. ol{list-style-type:decimal} /*阿拉伯数字*/
  3. ol{list-style-type:lower-roman} /*小写罗马数字*/
  4. ol{list-style-type:upper-roman} /*大写罗马数字*/
  5. ol{list-style-type:lower-alpha} /*小写英文字母*/
  6. ol{list-style-type:upper-alpha} /*大写英文字母*/

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

CSS代码
  1. ul{list-style-image:url(arrow.gif);border:1px #33ccff solid;list-style-position:inside;}

其中:list-style-position:inside;的意义是设置列表项位置位于内部,inside与outside是这一句的属性值,对比效果如上图右侧。
其实用过这种方法的朋友会发现,使用这种方法固然简单,但定位起来比较麻烦,而且在效果上也有很大的局限性,下面我们采用背景图片的方法来实现项目列表样式:
css代码如下:

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

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

CSS代码
  1. display:block;//将对象显示为块状或叫做盒状,后一个对象换行显示。
  2. display:none;//隐藏,不显示对象;
  3. display:inline;//行间内联样式,对象排列在一行中,后一个对象继续连接此对象显示;
  4. display:inlineblock;//对象显示为块状,但能呈现内联样式。
  5. display:list-item;//将对象作为列表项显示;

以下做一对比

XML/HTML代码
  1. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
  2. <html xmlns=“http://www.w3.org/1999/xhtml”>
  3. <head>
  4. <meta http-equiv=“Content-Type” content=“text/html; charset=gb2312” />
  5. <title>步步为营,实战div+css系列教程</title>
  6. </head>
  7. <style tpye=“text/css”>
  8. <!–
  9. ul{list-style-type:none;display:inline;padding:0px;margin-left:0px;}/*去掉项目符号*/
  10. li{display:inline}
  11. h1{display:inline;font-size:16px;font-weight:normal}
  12. >
  13. </style>
  14. <body>
  15. <h1>这一节我们重点讲解列表元素的应用:</h1>
  16. <ul>
  17. <li>改变列表项目符号</li>
  18. <li>使列表变为段落</li>
  19. <li>列表的缩进排版</li>
  20. <li>复杂列表的排版</li>
  21. </ul>
  22. <h1>在排版的过程中,应用一些图文混排技术,可以实现更好的效果。</h1>
  23. </body>
  24. </html>

效果如图:

image

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

CSS代码
  1. text-indent:32px;//可以用固定值,
  2. text-indent:50%; //也可以用其它值如:50%,0.5em.还可以用负值。

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

原文地址:http://www.chaojibaby.com/blog/article.asp?id=120

本站原创文章,请勿复制转载
版权声明:除特别注明外,本站所有文章均为原创,未经许可请勿复制、转载
2007-11-21
3,069 views
标签: , ,
暂无评论

发表评论

注意: 评论者允许使用'@user空格'的方式将自己的评论通知另外评论者。例如, ABC是本文的评论者之一,则使用'@ABC '(不包括单引号)将会自动将您的评论发送给ABC。使用'@all ',将会将评论发送给之前所有其它评论者。请务必注意user必须和评论者名相匹配(大小写一致)。