标签归档：list
制作旅游网站有效的使用列表标签属性
我们在制作旅游网站时可以用任何元素使用HTML列表标签属性，但有些html标签是直接继承父元素的属性。比如无序列表<ul>和有序列表<ol>。 由于这些属性是从父元素继承的，为<ul>和<ol>标签修改列表属性也将为那个列表包含的所有<li>标签修改这个属性。这让我们为列表定义一个特殊的外观显得非常容易。 例如，需要创建一个使用小写罗马数字的列表样式。一种方法是定义一个<li>标签类，li.sys1{list-style-type: lower-roman} 在列表中，需要用那个类来指定每个列表元素： <ol> <li class=”sys1″>旅游网站建设</li> <li class=”sys1″>旅游网站制作</li> <li class=”sys1″>旅游网站模板</li> </ol> 这样不停的重复是很繁琐的，也很容易出错。更好的解决方法是直接定义他的父元素<ol>标签： 如：ol {list-style-type: lower-roman} 当定义了ol标签后，这个列表中的任何<li>标签都将继承这属性，使用小写罗马数字： <ol> <li>旅游网站建设</li> <li>旅游网站制作</li> <li>旅游网站模板</li> </ol> 这样我们就更容易理解和管理。如果以后某个时间需要改变编号样式，只需要改变<ol>标签属性，而不用查找和修改列表中<li>标签的每个实例。 也可以更大范围地使用这些属性。对<body>标签设置一个列表属性将改变文档中所有列表的外观；对<div>标签设置这个属性将改变这个部分中的所有列表。我们会在后期的旅游网站建设实例中给大家详细讲解我们是怎么用的。
list-style属性(简写)
list-style属性是所有其他列表类型属性的缩略形式，可以按照任何顺序接受用于list-style-type,list-style-position和list-style-image属性的属性值。以下是有效的list-style属性： li{list-style:disc} li{list-style:lower-roman inside} li{list-style:url(http://www.jiecool.net/img/旅游网站建设列表图标.gif)disc outside;} 第一个段CSS创建了用圆盘做项目符号的列表项。第二段CSS使编号列表项使用小写罗马数字，显示在列表项块的里面。在最后一个CSS表示如果被引用的图像不可用，将用一个方块作为项目符号。 实例如： <html> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> <title>无标题文档</title> <style type=”text/css”> li { list-style-type: disc; list-style-position: inside; list-style-image: url(旅游网站建设列表图标.jpg); } </style> </head> <body> <ul> <li>ddddd</li> <li>ddddd</li> <li>ddddd</li> <li>ddddd</li> <li>ddddd</li> <li>ddddd</li> <li>ddddd</li> </ul> </body> … 继续阅读 →
列表list属性list-style-type
list-style-type属性是设定有序列表和无序列表的项目样式,在旅游网站建设中较少应用到，因为此属性基本上被我们前面讲到的列表list属性list-style-image 属性所替代。 list-style-type的属性值较多，相关属性如下： none 无标记。 disc 默认。标记是实心圆。 circle 标记是空心圆。 square 标记是实心方块。 decimal 标记是数字。 decimal-leading-zero 0开头的数字标记。(01, 02, 03, 等。) lower-roman 小写罗马数字(i, ii, iii, iv, v, 等。) upper-roman 大写罗马数字(I, II, III, IV, V, 等。) lower-alpha 小写英文字母The marker is lower-alpha (a, b, c, … 继续阅读 →
列表list属性list-style-position
列表list-style-position属性在旅游网站建设中也很少使用。他的作用也是用来定位与一个列表项有关的记号，区别在于它可控制与项目有关的块外面或里面。因为列表默认是在项目外显示，所以很少使用到这一属性。 除非特殊需求因旅游网站制作格式布局的关系需要在项目内部显示，那么我们可以使用到这一属性来达到我们想要的目的。 list-style-position属性有以下两个值分别为：inside(内部)或outside(外部)。默认值是outside，表示这个项目记号将悬挂于这一项的左侧。 相关示例用法如： li { list-style-image: url(旅游网站建设列表图标.gif); list-style-position: inside; } 或 <style type=”text/css”> li { list-style-image: url(旅游网站建设列表图标.gif); list-style-position: outside; } </style>
列表list属性list-style-image
以前我们在css上下文选择符的书写方式 上举例讲到了用ol和 li列表的书写方式，今天我们对如何控制列表元素的外观做一个详细讲解。 在旅游网站建设中我们经常用到有序和无序列表，有序和无序列表的用处也十分广泛。比如导航、旅游线路列表、旅游景点列表等等。有序列表浏览器会像格式化任何其他块项目一样格式化列表项，为这块的内容前面添加一些排序记号。 对有序列表来说，这个记号是某种分类记号；这些记号可以是数字或阿拉伯字母或符号。无序列表内容前面者没有相关记号。说简单点就是有序列表会给你加上项目符号，无序列表不会。但我们都可以控制有序列表是否添加符号以及相关记号的外观和位置。在旅游网站建设中无序列表ul li是用的最多的。 下面我们来讲讲控制列表的相关CSS属性： 列表list-style-image属性定义了浏览器用来标记一个列表项的图像。这个属性值是一个图像文件的URL或者关键字none。默认值是none。图像是较受欢迎的列表记号。如果使用这一属性，浏览器将显示这个图像来替代任何其他定义的记号。如果不使用图像属性或者禁用图像属性那么浏览器会自动使用list-style-type属性定义的记号。 也就是说list-style-image属性优先于list-style-type属性如果同时使用那么将优先显示list-style-image属性。 我们在旅游网站建设中可以使用list-style-image属性来给无序列表制作项目符号。当用图像做为列表的符号时，我们建议使用较小的GIF或JPEG图像来做列表符号。例如在旅游网站中的线路列表里我们经常会用一个GIF的三角箭头来做提示。 示例： <style type=”text/css”> li { list-style-image: url(jiecool.gif); list-style-type: square; } </style> 在这个示例中，如果浏览器能够成功地下载jiecool.gif,那么将使用这个图像。否则，浏览器将使用一个常规的方块形项目符号。