人机交互与界面设计-第4章

上传人：6*** IP属地：湖北上传时间：2023-01-14 格式：PPT 页数：57 大小：1.36MB 积分：28 举报 版权申诉

已阅读5页，还剩52页未读，继续免费阅读

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第4章层叠样式表CSS2023/1/1414

页面设计

4.1页面设计概述4.2DHTML简介

4.3层叠样式表CSS2023/1/1424.1页面设计概述

Web网站开发的全过程大致分为5个阶段：策划与定义、设计、开发、测试和发布。首先要根据建站目的和定位进行策划与定义，确定网站风格、栏目、布局方式等，然后进行页面设计和后台程序开发。页面设计包括静态页面设计和动态页面设计。静态页面设计主要采用HTML来完成。HTML语言已先后推出了HTML2.0、HTML3.0、HTML3.2、HTML4.0、XHTML及HTML5等多个版本。HTML4.0将HTML语言推向一个新高度，该版本倡导两个理念：一是将文档结构和显示样式分离，二是更广泛的文档兼容性。2023/1/1434.2DHTML简介客户端页面的动态特性主要是通过层叠样式表（CSS）、脚本程序和HTML4.0来实现的，这三者构成了动态HTML（DynamicHTML，DHTML）。“动态”的含义不仅指页面中加入了动画、影像或声音，更重要的是指页面应具有交互性，可以控制页面内容的变化。DHTML是一种通过各种技术的综合而得以实现的概念。DHTML基于HTML语言，利用CSS扩展样式进行编排，借助浏览器对象模型概念，用脚本程序对网页进行动态控制。2023/1/1444.2DHTML简介2023/1/145HTML4.0

HTML4.0对以前版本的标记进行了扩充，它将页面中的文字及图像等都作为对象来处理，并可通过脚本语言程序对其特性和变化予以控制。这样页面的内容可以根据用户的动作而变化，大大丰富了“动态”的含义。

4.2DHTML简介2023/1/146层叠样式表（CSS）

CSS（CascadingStyleSheets）是W3C协会为弥补HTML在显示属性设定上的不足而制定的一套扩展样式标准。通过使用CSS，可将页面的内容与表现形式分离，使网页设计趋于明了、简洁。样式的定义只要改动一次，就会影响到使用该样式的每一个元素，样式提供了一种更新文档格式以及在多个文档之间保持一致的简便形式。CSS是一套开放性标准，不仅可用于HTML语言，也可用于其他网页设计语言，如XML语言。

目前CSS的版本包括CSS1、CSS2和CSS3。4.2DHTML简介2023/1/147脚本语言

脚本语言是DHTML最重要的部分，因为页面中对象要“动”起来，就必须通过脚本程序进行控制。IE和Netscape浏览器在4.0版本及以后都支持对象概念，即定义浏览器是由各种对象（如Window、Document等）组成的。文件对象模型DOM（DocumentObjectModel）的核心是将网页内容，包括文字、图像、表格和表单等都作为对象。有了浏览器的对象模型，只要为HTML中的标记设定一个标识符（ID），就可将所标识的内容作为对象在脚本程序中使用。4.2DHTML简介2023/1/148【例2-14】一个DHTML简例。<html><head><title>DHTML简例</title></head><body><spanid="s1"onMouseOver="s1.style.color='red'"onMouseOut="s1.style.color='black'">这是使用了DHTML的一个简例。</span></body></html>

4.3层叠样式表CSS2023/1/149样式是对网页中的元素（字体、段落、图像、列表等）属性的整体概括，即描述所有网页对象的显示形式，如设置文字大小、颜色，图片大小、边框等。层叠是指样式之间可以堆叠或相互覆盖。当存在多个样式定义时，将依据层次的先后来处理样式的继承关系。4.3层叠样式表CSS4.3.1样式表的定义和引用样式表的作用是通知浏览器如何呈现文档，样式表的定义是CSS的基础。

【例2-15】一个使用CSS对文字显示特性进行控制的HTML文件。<html><head><title>CSS示例</title><metahttp-equiv="content-type"content="text/html;charset=gb2312"><styletype="text/css">h1{font-family:"隶书","宋体";color:#ff8800}.text{font-family:"宋体";font-size:14pt;color:red}</style></head><bodytopmargin="4"><h1>这是一个CSS示例！</h1><spanclass="text">这行文字应是红色的。</span></body></html>

2023/1/14104.3层叠样式表CSS2023/1/14114.3.1样式表的定义和引用样式表定义

CSS样式表定义的基本语法为：选择符{规则表}

选择符是指引用样式的对象。选择符可以是一个或多个HTML标记（各个标记之间以逗号分开），也可以是类选择符、ID选择符或上下文选择符。规则表是由一个或多个样式属性组成的样式规则，各个样式属性间由分号隔开，每个样式属性的定义格式为：样式名:值样式定义中可以加入注解，格式为：/*字符串*/4.3.1样式表的定义和引用样式表定义

样式定义表的例子：①p{font-family:"宋体";color:darkblue;background-color:yellow;font-size:9pt;/*字体大小*/}②h1,h2{font-family:"隶书","宋体";color:#ff8800;text-align:center;}例①定义了一个样式表供HTML文件的<p>标记使用。例②定义了一个样式表供HTML文件的<h1>和<h2>标记使用。在例②中，选择符由两个HTML标记组成，表示两种对象均遵循该样式定义。

2023/1/14124.3层叠样式表CSS4.3.1样式表的定义和引用样式引用

样式引用的方式主要有以下4种：（1）链接到外部样式表（2）引入外部样式表（3）嵌入样式表（4）内联样式2023/1/14134.3层叠样式表CSS4.3.1样式表的定义和引用样式引用

（1）链接到外部样式表（简称链接方式）如果多个HTML文件要共享样式表（这些页面的显示特性相同或十分接近），则可将样式表定义为一个独立的CSS样式文件，使用该样式表的HTML文件在头部用<link>标记链接到这个CSS样式文件即可。

链接到外部样式表的方法最具伸缩性，只要修改一个外部样式表，就能影响大量文档，在使用时应作为首选方法。这种方式定义的样式在整个页面范围内有效。2023/1/14144.3层叠样式表CSS4.3.1样式表的定义和引用样式引用

【例2-16】链接到外部样式表示例。将样式定义存放于文件style.css，文件内容为：h1{font-family:"隶书","宋体";color:#ff8800;}.text{font-family:"宋体";font-size:14pt;color:red;}p{background-color:yellow;color:#000000;}在HTML文件中引用样式表style.css，html文档内容为：<head><linkrel="stylesheet"type="text/css"href="style.css"media="screen"></head><bodytopmargin="4"><h1>这是一个链接外部CSS文件的示例！<h1><spanclass="text">这行文字应是红色的。</span><p>这一段的底色应是黄色。</p></body></html>

2023/1/14154.3层叠样式表CSS4.3.1样式表的定义和引用样式引用

（2）引入外部样式表（简称引入方式）这种方式在HTML文件的头部<style>、</style>标记之间，利用CSS的@import声明引入外部样式表。这种方式定义的样式在整个页面范围内有效。格式为：<style>@importurl("外部样式文件名");......</style>2023/1/14164.3层叠样式表CSS4.3.1样式表的定义和引用样式引用

【例2-17】引入外部样式表示例。<styletype="text/css"></style>注释符的作用是使不支持CSS的浏览器忽略样式表定义。<style>标记的属性type，指明样式的类别。

2023/1/14174.3层叠样式表CSS4.3.1样式表的定义和引用样式引用

引入外部样式表和链接外部样式表的区别：引入外部样式表在浏览器下载HTML文件时，将样式文件的全部内容复制到@import关键字所在的位置，以替换该关键字。

链接外部样式表在浏览器下载HTML文件时，并不进行替换，而仅在HTML文件体部引用CSS样式文件的某个样式时，浏览器才链接样式文件，读取需要的内容。

2023/1/14184.3层叠样式表CSS4.3.1样式表的定义和引用样式引用

（3）嵌入样式表利用<style>标记将样式表嵌入HTML文件的头部。【例2-18】嵌入样式表示例。<html>

<head><styletype="text/css">h1{font-family:"隶书","宋体";color:#ff8800}.text{font-family:"宋体";font-size:14pt;}</style></head>

<body>.....</body></html>2023/1/14194.3层叠样式表CSS4.3.1样式表的定义和引用样式引用

（4）内联样式这种方式是在HTML标记中引用样式定义，方法是将标记的style属性值赋为所定义的样式规则。样式是在标记内部使用的，称为“内联样式”。【例2-19】内联样式表示例。<h1style="font-family:‘隶书’,‘宋体’;color:#ff8800;">这是CSS示例！</h1><pstyle="color:red;background-color:yellow;">......</p><bodystyle="font-family:‘宋体’;font-size:12pt;background:white;">样式定义的作用范围仅限于此标记范围之内。

2023/1/14204.3层叠样式表CSS4.3.1样式表的定义和引用样式引用

（4）内联样式内联样式定义的作用范围仅限于使用内联样式的标记范围之内。内联样式主要应用于样式仅适用于单个页面元素的情况。由于这种方式将样式和内容混在一起，失去了样式表的优点，不推荐使用。2023/1/14214.3层叠样式表CSS4.3.1样式表的定义和引用【例2-20】设有两个样式表文件s1.css、s2.css和一个HTML文件example_css.htm。

文件s1.css：h2{font-family:"隶书";color:#ff8800;}p{color:black;background-color:yellow;font-size:12pt;}文件s2.css：h3{font-family:"宋体";color:blue;font-style:italic;}.text{font-family:"宋体";font-size:10pt;color:red;}文件example_css.htm：<html><head><title>CSS综合应用示例</title><linkrel="stylesheet"type="text/css"href="s1.css"><styletype="text/css">a:visited{color:blue;}a:link{font-family:"宋体";font-size:9pt;color:red;}a:hover{font-family:"宋体";font-size:12pt;color:green;}@importurl("s2.css");</style></head><bodytopmargin="4"><h2>这是一个CSS样式文件综合示例！</h2><spanclass="text">这行文字应是红色的。</span><p>这一段的底色应是黄色。</p><h3>这行文字由s2.css中的样式控制，应是斜体、蓝色。</h3><ahref="example_css.htm">超链接</a><br/><br/><divstyle="font-size:14pt;color:darkred;">CSS样式使用有四种方式：<br/>链接、引入、嵌入和内联样式</div></body></html>

2023/1/14224.3层叠样式表CSS4.3.2相关标记和属性

随着CSS的出现，有几个新的HTML标记和属性被增加到HTML语言中，以使样式表与HTML文件更容易地组合起来，它们是：类选择符和class属性id选择符和id属性上下文选择符伪类span标记div标记

2023/1/14234.3层叠样式表CSS4.3.2相关标记和属性

类选择符和class属性

类选择符（ClassSelector）有两种定义格式：①标记名.类名{规则1;规则2;…}用于为同一种标记定义不同的样式。②.类名

{规则1;规则2;…}用于为不同标记定义相同的样式。【例2-21】<head><styletype="text/css">

p{color:red;}

p.back{color:blue;}</style></head><body><p>本段文字用红色显示</p><pclass="back">本段文字的颜色为蓝色</p></body>2023/1/14244.3层叠样式表CSS4.3.2相关标记和属性

id选择符和id属性id选择符（IDSelector）定义一个元素独有的样式。id选择符的定义格式为：#id名{规则1;规则2;…}。id选择符在HTML文件中只能应用一次，而类选择符可以多次引用。【例2-22】<head><styletype="text/css">#colorid1{color:green;}</style></head><body><h2id="colorid1">本行使用了id选择符定义的样式</h2><h2>本行使用默认样式</h2></body>2023/1/14254.3层叠样式表CSS4.3.2相关标记和属性

上下文选择符上下文选择符（ContextualSelector）定义嵌套标记的样式。【例2-23】<head><styletype="text/css">p{color:green;}pspan{color:red;}</style></head><body><p>本行使用段落标记p的样式<br><span>本行使用嵌套标记定义的样式</span></p></body>2023/1/14264.3层叠样式表CSS4.3.2相关标记和属性

伪类

伪类是特殊的类，可区别标记的不同状态。伪类定义格式为：选择符:伪类{属性:值}伪类的一个最常见的应用是指定超链接（<a>）以不同的方式显示，如未访问的链接（a:link）、已访问的链接（a:visited）、活动链接（a:active）和鼠标经过的链接（a:hover）。【例2-24】a:visited{color:darkred;font-size:15pt;}a:link{font-family:"宋体";font-size:9pt;color:red;}a:hover{font-family:"宋体";font-size:10pt;color:green;}a:active{font-family:"宋体";font-size:20pt;color:blue;}注意：在使用时，要注意定义的先后顺序，否则定义的样式可能被覆盖而无法起作用。2023/1/14274.3层叠样式表CSS4.3.2相关标记和属性

span标记

<span>标记的目的是允许给出样式而不必将样式附加在一个HTML的原有标记（称为结构元素）上。它的存在纯粹是为了应用样式，所以当样式表失效时它就没有任何作用了。<span>标记可以带有class、id、style等与CSS样式有关的属性。

【例2-25】<head><styletype="text/css">span{color:red;}</style></head><body><span>本行使用span标记定义的样式</span></body>2023/1/14284.3层叠样式表CSS4.3.2相关标记和属性

div标记

<div>是HTML3.2版就有的标记，是一个块级元素。<div>和</div>之间可以包含段落、标题、表格等其他块级元素。<div>将其中包含的内容形成一个独立段落。<div>在HTML4.0增加了class、id、style属性。<div>与<span>的功能基本相同，区别在于<div>是块级元素，而<span>是行元素；<div>可包含<span>，反之则不行。

2023/1/14294.3层叠样式表CSS4.3.2相关标记和属性

样式的继承

将包含其他标记的标记称为父标记，则被包含的标记就是子标记，子标记将继承父标记的样式。

【例2-26】<html><head><title>样式继承</title><styletype="text/css"></style></head><body><h2><u>DIV</u>标记的作用</h2><u>DIV</u>标记的作用</body></html>2023/1/14304.3层叠样式表CSS4.3.3样式的继承和作用顺序

样式的继承

相对值继承方式，即以百分比继承。【例2-27】：<head><style>p.class1{font-size:12pt;}p.class2{font-size:200%}p.class3{font-size:100%}</style></head><body>

<pclass="class1">第一段</p><pclass="class2">第二段</p><pclass="class3">第三段</p>

</body>2023/1/14314.3层叠样式表CSS4.3.3样式的继承和作用顺序

样式的作用顺序

样式的作用域：指对一个标记究竟哪个样式起作用。

样式表的作用优先顺序遵循以下4条原则：①内联样式中所定义的样式优先级最高。②其他样式表按其在HTML文件中出现或被引用的顺序，越在后出现，优先级越高。③选择符的作用顺序由低到高为：上下文选择符、类选择符、id选择符。④未在任何文件中定义的样式，将遵循浏览器的默认样式。

2023/1/14324.3层叠样式表CSS4.3.3样式的继承和作用顺序

样式的作用顺序

【例2-28-1】：<html><head><title>样式的作用顺序</title><styletype="text/css">p{color:red;font-size:22pt;}p.c1{color:green;font-size:12pt;}p{font-size:16pt;text-align:center;}</style></head><body><pstyle="color:#ffaa66">第一段</p><pclass="c1">第二段</p><p>第三段</p></body></html>

2023/1/14334.3层叠样式表CSS4.3.3样式的继承和作用顺序

样式的作用顺序

【例2-28-2】：<html><head><title>样式的作用顺序</title><styletype="text/css">span.hei1{color:red;}#ind{color:green;}pspan{color:blue;}</style></head>

2023/1/14344.3层叠样式表CSS<body><p><span>按照上下文定义的颜色是蓝色</span><br/><spanclass="hei1">类选择符优先级高于上下文选择符</span><br/><spanclass="hei1"id="ind">id选择符优先级高于类选择符</span></p></body></html>

4.3.3样式的继承和作用顺序

样式的作用顺序

【例2-28-3】：<html><head><title>样式的作用顺序</title><styletype="text/css">span.hei1{color:red;}#ind{color:green;}pspan{color:blue!important;}</style></head>

2023/1/14354.3层叠样式表CSS<body><p><span>按照上下文定义的颜色是蓝色</span><br/><spanclass="hei1">类选择符优先级高于上下文选择符</span><br/><spanclass="hei1"id="ind">id选择符优先级高于类选择符</span></p></body></html>

important属性用于防止定义的样式被其它相同样式覆盖4.3.4CSS属性

CSS属性可分为：字体属性颜色及背景属性文本属性方框属性分类属性定位属性2023/1/14364.3层叠样式表CSS4.3.4CSS属性

字体属性

字体属性包括以下主要内容：字体（font-family）：指定在文档上使用的一个或多个字体。当有多个字体时，浏览器优先选择排在前面的字体。字号（font-size）：设置字体的大小。可以使用绝对值，如font-size:13pt；也可以使用相对值表示相对于当前字体的大小调整字体大小，如font-size:200%。字体风格（font-style）：控制文本的斜体样式。字体加粗（font-weight）：控制文本的粗体样式。字体变化（font-variant）：控制字体是否以小型大写的方式显示。字体综合设置（font）：对上述属性同时进行设置。2023/1/14374.3层叠样式表CSS4.3.4CSS属性

【例2-29】CSS字体属性用法示例。

<head><styletype="text/css">body{font-family:"宋体","隶书";}p{font-size:16pt;}p.weight_1{font-weight:100;}p.weight_9{font-weight:900;}p.font_i{font-style:italic;}span{font-size:14pt;}span.font_n{font-variant:normal;}span.font_v{font-variant:small-caps;}span.font_all{font:bolditalic30px;}</style></head><body><pclass="weight_1">第一段</p><pclass="weight_9">第二段（加粗字体）</p><pclass="font_i">第三段（斜体）</p><spanclass="font_n">ABC是正常显示，后面的英文字母会变为较小的大写字母。比较：ABC</span><spanclass="font_v">abc.</span><br/><br/><spanclass="font_all">这一行是字体综合设置：斜体、加粗，还可指定字体大小。</span></body>2023/1/14384.3层叠样式表CSS4.3.4CSS属性

颜色和背景属性

颜色属性允许设计者指定页面元素的颜色，背景属性指定页面的背景颜色或背景图像的属性。颜色和背景类属性包括（前景）颜色（color）、背景颜色（background-color）、背景图像（background-image）、背景重复（background-repeat）、背景附属方式（background-attachment）、背景图像位置（background-position）以及背景属性（background）。2023/1/14394.3层叠样式表CSS属性名可取值含义举例color英文单词#RRGGBB#RGB指定页面元素的前景色h1{color:red}h2{color:#008800}h3{color:#080}background-color

英文单词#RRGGBB#RGBtransparent指定页面元素的背景色body{background-color:white}h1{background-color:#0000f0}p{background-color:transparent}

background-imag

统一资源定位器URLsnone

指定页面元素的背景图像body{background-image:url(bg.gif)}p{background-image:url(/bg.jpg)}

background-repeat

repeatrepeat-xrepeat-yno-repeat

决定一个被指定的背景图像被重复的方式。默认值为repeatbody{background-repeat:no-repeat}p{background-repeat:repeat-x}

background-attachment

scrollfixed指定背景图像是否跟随页面内容滚动。默认值为scrollbody{background-attachment:fixed}background-position

数值表示法关键词表示法

指定背景图像的位置body{background-position:30%70%}p{background-position:bottomleft}

background背景颜色、背景图像、背景重复、背景位置背景属性综合设定body{background:url(bg1.gif)greenrepeat-yfixed30%20pt}

颜色和背景属性表

2023/1/14404.3.4CSS属性

颜色和背景属性

background-position值的表示有两种方式：数值表示法和关键词表示法。数值表示法用坐标值表示位置，坐标原点是背景图像位置属性所属元素的左上角。数值表示法又分为百分比表示和长度值表示两种。百分比表示的格式为：X%Y%；长度值表示的格式为：XptYpt。关键词表示法使用英文单词表示位置，横向关键词有left、center、right，纵向关键词有top、center、bottom。

百分比和长度值表示法可以混用，但不能和关键词表示法混用。若数值表示法只指定了一个值，则该值作为横向值，垂直值默认为50%。背景图像位置（background-position）属性可以确定背景图像的绝对位置。该属性只能应用于块级元素（包括div、p、ol、dl、ul等）和替换元素（包括img、input、textarea、select、object）。2023/1/14414.3层叠样式表CSStopleft=lefttop=0%0%top=topcenter=centertop=50%0%topright=righttop=100%0%left=leftcenter=centerleft=0%50%center=centercenter=50%50%right=rightcenter=centerright=100%50%bottomleft=leftbottom=0%100%bottom=bottomcenter=centerbottom=50%100%bottomright=rightbottom=100%100%【例2-30】CSS颜色和背景属性的用法示例。

<head><style>body{background-image:url(bg1.gif);background-repeat:repeat-y;}p{color:green;background:aquaurl(bg2.gif)no-repeat40%40pt}</style></head><body><p>这是一段文字<br/>本段有一不同于body的背景图<br/>它从40%40pt处开始显示<br/>并且不重复<br/><br/><br/></p><br/><br/>背景属性也可以用在style属性中，例如：<br/>

<tablewidth="90%"border="2"cellpadding="50"cellspacing="2"><tr><tdstyle="color:darkred;text-align:right;background:no-repeaturl(bg.jpg)bottomleft"><span>本格背景图在[0%100%]处</span></td><tdstyle="color:red;background:no-repeaturl(bg3.jpg)topright"><span>本格背景图在[100%0%]处</span></td></tr></table></body></html>2023/1/14424.3层叠样式表CSS4.3.4CSS属性

文本属性文本属性设置文字之间的显示特性，包括：字符间隔（letter-spacing）、文本修饰（text-decoration）、大小写转换（text-transform）、文本横向排列（text-align）、文本纵向排列（vertical-align）、文本缩排（text-indent）、行高（line-height）。

2023/1/14434.3层叠样式表CSS属性名可取值含义举例letter-spacing

长度值|normal

设定字符之间的间距

h1{letter-spacing:8pt}p{letter-spacing:14pt}

text-decoration

none|underline|overline|line-through|blink

设定文本的修饰效果，line-through是删除线，blink是闪烁效果。默认值为none

a:link,a:visited,a:active{text-decoration:none}

text-align

left|right|center|justify（将文字均分展开对齐）

设置文本横向排列对齐方式

p{text-align:center}h1{text-align:right}

vertical-align

设定元素纵向对齐方式。默认值为baseline

img.mid{vertical-align:50%}span.sup{vertical-align:super}span.sub{vertical-align:sub}

text-indent

长度值|百分比

设定块级元素第一行的缩进量

p{text-indent:30pt}h1{text-indent:10%}

line-height

normal|长度值|数字|百分比

设定相邻两行的间距。默认值normal

p{line-height:200%}p{line-height:30pt}

文本属性表

2023/1/1444【例2-31】CSS文本属性的用法示例。<html><head><title>文本属性用法</title><styletype="text/css">h2.space{letter-spacing:10pt;}p.ind{text-indent:20pt;color:darkred;background-color:#ffaaaa}h3.dec{text-decoration:line-through}p.hei1{line-height:16pt}p.hei2{line-height:32pt}span.super{vertical-align:super;}</style></head>

<body><h2class="space">本行字符间距是10pt</h2><pclass="ind">本段文字起始缩进20pt，<br/>然后可以跟正文。</p><h3class="dec">本行文字带有删除线。</h3><pclass="hei1">本行与下一行间距为16pt，<br/>本行与上一行间距为16pt。</p><pclass="hei2">本行与下一行间距为32pt，<br/>本行与上一行间距为32pt。</p>本行的X和Y带有上标：X<spanclass="super">3</span>+Y<spanclass="super">3</span></body></html>

2023/1/14454.3层叠样式表CSS4.3.4CSS属性

方框属性方框属性用于设置元素的边界、边框等属性值，可应用这些属性的元素大多是块元素。包括body、p、div、td、table、hx（x=1,2,...,6）等。方框属性包括边界（margin）、边界填充（padding）、边框（border）等的设置。

2023/1/14464.3层叠样式表CSS【例2-32】CSS方框属性用法示例。<html><head><title>方框属性用法例子</title><styletype="text/css">div{background-color:#ddeeff;margin:10pt30pt;border-width:20pt;border-style:groove;border-color:blue;padding:20pt;width:600pt;}</style></head>

<body><div>这是本段的开始文字！本行距段边框20pt。<br/><br/><imgsrc="bg.jpg">这是一幅郁金香的图片。

<imgsrc="bg.jpg">这是一幅郁金香的图片。<br/><br/><imgsrc="bg.jpg">这是一幅郁金香的图片。

</div></body></html>2023/1/14473.3层叠样式表CSS【例2-32-1】CSS方框属性用法示例。<html><head><title>方框属性用法例子</title><styletype="text/css">img{float:left;}.a{clear:both;} </style></head>

<body><imgsrc="bg.jpg"/><imgclass="a"src="bg.jpg"/></body></html>2023/1/14484.3层叠样式表CSSFloat属性使元素从正常的位置浮动到指定的边界。如果元素浮动到边界上，那么其他元素会在元素的另一边环绕。clear属性让元素离开浮动的元素。浮动属性CSS浮动属性允许网页制作者将文本浮动在一个元素的周围。float属性，将元素的内容浮动到页面的左边缘或右边缘。取值为left、right、none，默认值为none。clear属性，指定一个元素是否允许有元素漂浮在它的旁边。取值为none、left、right、both，默认值none。49<style>span{font-family:楷体_gb2312;font-size:20pt;float:left}.ss{clear:left}</style><span>漂浮属性</span><p>允许网页制作者将文本环绕在一个元素的周围。清除属性指定一个元素是否允许有元素漂浮在它的旁边。</p><span>漂浮属性</span><pclass="ss">允许网页制作者将文本环绕在一个元素的周围。清除属性指定一个元素是否允许有元素漂浮在它的旁边。</p>4.3层叠样式表CSS4.3.4CSS属性

列表属性

列表属性用于设置列表标记（ol和ul）的显示特性；包括list-style-type、list-style-image、list-style-position、list-style等属性。2023/1/14504.3层叠样式表CSS属性名可取值含义list-style-type无序列表值：disc|circle|square有序列表值：decimal|lower-roman|upper-roman|lower-alpha|upper-alpha共用值：none表项的项目符号。disc—实心圆点；circle—空心圆；square—实心方形；decimal—阿拉伯数字；lower-roman—小写罗马数字；upper-roman—大写罗马数字；lower-alpha—小写英文字母；upper-alpha—大写英文字母；none—不设定list-style-imageurl（URL）使用图像作为项目符号list-style-positionoutside|inside设置项目符号是否在文字里，与文字对齐list-style项目符号，位置综合设置项目属性列表属性表

2023/1/1451【例2-33】CSS列表属性用法示例。<html><head><title>列表属性用法</title><styletype="text/css">ul.ul1{list-style:squareinside;}ul.ul2{list-style-image:url("check.gif");list-style-position:outside;}ol.ol1{list-style-type:upper-roman;list-style-position:inside;}ol.ol2{list-style:decimaloutside;}</style></head>

<li>计算机及应用99（1）班</li>

<li>计算机及应用99（2）班</li></ul><ulclass="ul2">

<li>计算机及应用99（3）班</li>

<li>计算机及应用98（1）班</li></ul><h3>电子系</h3><olclass="ol1">

<li>电子信息工程99（1）班</li>

<li>电子信息工程99（2）班</li></ol><olclass="ol2">

<li>电子信息工程98（1）班</li>

<li>电子信息工程98（2）班</li></ol></body></html>

2023/1/14524.3层叠样式表CSS4.3.4CSS属性

定位属性CSS提供用于二维和三维空间定位的属性，它们是top、left、position。利用它们可以将元素定位于相对其他元素的相对位置或绝对位置。（1）top、left、position属性

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

人机交互与界面设计-第4章

文档简介

温馨提示

最新文档

评论

人机交互与界面设计-第4章

文档简介

温馨提示

最新文档

评论

相关文档