【案例引入】

现代科学揭示，人类对色彩的感觉是一个复杂而微妙的心理、生理、化学和物理过程，所有颜色都能通过一系列波的振动，在人体内引起生物微电波的抑制和共鸣，从而影响人的情绪及精神状态。

心理学家发现红色可以刺激神经兴奋；绿色则可以提高人的听觉感受性，松弛神经，提高工作效率，消除疲劳，还会使人减慢呼吸，降低血压；橙色能诱发食欲和正常情绪；黄色可以活跃思维，也可以造成情绪不稳定；蓝色使血压降低，使体内代谢平衡；紫色对运动神经、淋巴和心脉系统有压抑作用，使人安静、温和。

【案例分析】

本案例讲述了人对不同颜色的心理反应，制作网页要掌握这些常识，什么颜色能引起人的什么心理反应，哪些模块想要达到什么效果，比如激励人的意志、鼓励人们消费、想给人留下深刻的印象或让人的心态平和等不同效果都要应用不同的颜色。

我们在利用对象列表标记符美化网页元素时，要结合实际的网页内容，使用不同的颜色，引导好用户，给予他人关怀与帮助，与人为善。

【主要知识点】

9.3.1　列表标记符类型

1）无序列表

列表项标记符采用特殊图形（如小黑点、小方框等）。

2）有序列表

列表项的标记符有数字、字母或另外某种计数体系中的一个符号，使用CSS，可以列出进一步的样式，并可用图像作列表项标记符。

9.3.2　列表标记属性值

属性值有以下：

微课9.3　CSS3列表设置

9.3.3　列表标记的位置（list-style-position）

①inside列表项目标记位置在文本以内，且环绕文本根据标记对齐；

②outside默认值，保持标记位于文本的内侧，列表项目标记放置在文本以外，且环绕文本不根据标记对齐；

③inherit规定应该从父元素继承list-style-position属性的值。

案例【9.3.1】无序列表标记符的应用

效果如图9.3.1所示。

案例【9.3.2】有序列表标记符的应用

图9.3.1　无序列表的应用(www.daowen.com)

效果如图9.3.2所示。

图9.3.2　有序列表的应用

9.3.4　设置图像列表标记符

语法：list-style-image：none url（url）

none：不指定图像。

url（url）：使用绝对或者相对地址指定背景图像。

可以使用图像作为列表的标记，JPG和GIF格式都可以。

①url：图像的路径；

②none：默认，无图形被显示；

③inher：规定从父元素继承list-style-image属性的值。

ul li{list-style-image:url(xxx.gif)}

案例【9.3.3】无序列表图像列表的应用

效果如图9.3.3所示。

图9.3.3　无序列表图像列表的应用

【课程育人】

案例引入与网页列表样式的融合学习，总结如下：

1.在掌握用列表样式美化网页元素的同时，要培养与人为善、乐于助人的优良品质；

2.在实际网页元素美化应用中，要善于从学习中发现美、在制作时要考虑给予他人关怀与帮助，激励人们热爱生活、热爱生命、热爱祖国。

【课堂互动】

1.不属于列表标记符属性的是（　）。

A.disc　B.circle　C.square　D.dot

2.不属于列表标记的位置属性是（　）。

A.null　B.inherit　C.outside　D.inside

3.不属于图像列表标记的位置属性是（　）。

A.url　B.inher　C.img　D.none