第10章设置列表样式.pptx

第10章设置列表样式
列表让设计者能够对相关的元素进行分组,并由此给他们制定结构。大多数网站都包含某种形式的列表,比如新闻列表、标题列表等等。将这些条目标识为列表并加上标记会在HTML文档中增加结构。本章主要讲解如何通过CSS样式对网页中的列表进行控制,并且通过两个影视音乐网站的实例,详细讲解了页面中对列表样式的应用。
列表控制概述
在网页中列表元素是非常重要的应用形式。通过CSS样式控制列表,可以轻松的实现整齐直观的显示效果。
列表控制原则
列表形式在网站设计中占有很大比重,在信息的显示时非常整齐直观便于用户理解与点击,从出现网页开始到现在,列表元素一直是页面中非常重要的应用形式。
列表标签的使用
无序列表<ul>
所谓无序列表,是指列表中的各个元素在逻辑上没有先后顺序的列表形式。如果列表中不需要描述一条信息的序号,则可以使用ul元素。大部分页面中的作息均可以用ul来描述。ul与li标签配合使用,其中的每一个标签均为一条列表,所有li标签将被包含在ul标签中。
序列表<ol>
有序列表则与上面讲的无序列表相反,表示列表的每一个元素都会有序列区分,从上至下可以为数字、字母等多种不同形式。使用ol的有序列表目前在网上出现得并不是很多,原因就在于很少有人使用ol标签来制作列表。多数人使用表格来制作有序列表,这样将会造成代码过于复杂。
列表样式控制
与控制背景一样,列表元素也提供了与图像、定位类似的标准的属性,虽然看似不多,但对页面设计却带来了意想不到的改观。使用CSS布局之后,最大的改变就是对相同的设计在不同的技术环境下拥有的新的思路与做法,列表元素也是如此。
ul无序列表
ol有序列表
定义列表
更改列表项目样式
使用列表制作菜单
当项目列表的项目符号可以通过设置list-style-type属性值为none时,制作各式各样的菜单和导航条成了项目列表的最大用处之一,通过CSS属性控制可以达到意想不到的效果,本节将向读者介绍如何使用列表标签制作实用的风页导航菜单。
无需表格的菜单
菜单的横竖转换
导航菜单
在浏览器中预览导航菜单效果
CSS
,分别是***@media、***@font-face、columns和speech,下面就分别对这4种新增的控制其他模块的属性进行简单的介绍。
***@media
***@font-face
columns
speech

课堂练****br/>本实例制作一个游戏类网站页面,在页面中多处应用了列表,所以列表的排版是否合理,直接会影响到页面的整体整体性和美观性,同时也会直接影响到浏览者对网站的第一印象。本节将通过实例的制作来讲解如何创建列表。
设计分析
制作步骤
源文件位置:光盘/视频/第8章/10-5-
视频位置:光盘/素材/第8章/10-5-
课堂讨论
通过本章的学****我们掌握了设置列