第6章CSS样式应用

上传人：6*** IP属地：湖北上传时间：2023-02-04 格式：PPTX 页数：70 大小：1.98MB 积分：28 举报 版权申诉

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

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

文档简介

第6章css样式表2023/2/4《网页设计技术》2本章内容6.1CSS样式概述6.2CSS样式定义6.3CSS样式的使用6.4CSS属性6.5

在Dreamweaver中编辑CSS样式6.6CSS应用示例

上机内容小结2023/2/4《网页设计技术》36.1CSS样式概述CSS（CascadingStyleSheets）又称层叠样式表，它是一系列格式规则集合，它能够定义网页元素的样式，如层、文本、表格、链接等元素的属性，一种样式信息与网页内容分离的标记性语言。在CSS样式出现以前，HTML标签样式被广泛应用，HTML标签样式用于控制单个文档中一定范围内文本的格式。而CSS样式不同，它不仅可以控制单个文档中一定范围内网页元素的格式，而且可采用外部链接的方式，控制整个站点内所有网页的格式。这样既保证了站点风格的一致性，又提高了工作效率。CSS样式生成样式表文件扩展名为.CSS，当对CSS规则修改后，所有链接该规则的文档格式会自动改变，简化了格式化网页的工作。返回2023/2/4《网页设计技术》4CSS样式由三部分组成：选择器、属性和值。语法格式：选择器{属性1:值1;属性2:值2……}说明：选择器用来标识格式元素，可分为3种基本类型：标签（html）选择器、ID选择器、类（class）选择器。除了基本类型外，还可把基本类型的选择器组合使用。属性和属性值之间用冒号（:）隔开，定义多个属性时，属性之间用分号（;）隔开。如:body{color:black}

选择器body指页面主体部分，color颜色属性名，black颜色属性值，其效果是使页面中的文字为黑色。6.2CSS样式定义例6.1

在DW代码视图的编辑窗口输入以下代码，创建使用样式页面的文档css6_1.html。<html><head><title>在标记符中直接嵌套样式信息</title><style></style></head><body><h1>一代人</h1><p>黑夜给了我黑色的眼睛<br>我却用它寻找光明</p></body></html>提示：style元素是HTML中的一个标记元素，提供了一组对应于浏览器所支持CSS规则（如background、font-size等），可以使用这个标记元素访问CSS样式属性。2023/2/4《网页设计技术》61.HTML选择器HTML选择器是最典型的选择器类型，网页设计者可为某个或某些HTML标记元素应用样式定义。HTML选择器的定义方法：

tag{property:value}例如，设置表格中单元格内的文字大小为9pt，颜色为蓝色的CSS代码：td{font-size:9pt;color:blue}CSS可以在一条语句中定义多个选择器

例如，将段落文本和单元格内的文字设置为蓝色的CSS代码：

td,p{color:blue}组合选择器(逗号隔开)，其中所有标签都使用指定样式。关联选择器(空格隔开,p

em{background:yellow})

表示段落中<em></em>标签中背景为黄色，而其他地方出现的<em></em>不受影响（标记em用来表示强调，其默认样式为斜体）。6.2CSS样式定义72.class选择器（类选择器）

相关的类选择器。它只与一种HTML标记有关系，此类选择器仅为某个或某些标记符定义类。

语法格式：Tag.Classname{property:value}

例如：

h1.red{color:red}

应用：在网页中需要使用该类的“h1标记元素内”用class属性引用

<h1class="red">吉林省明日科技有限责任公司<h1>

独立class选择器。可被任何HTML标记元素所应用。

语法格式：.Classname{property:value}

例如：

.blueone{color:blue}

应用：需要引用该类的任意标记符内使用class属性

<h2class="blueone">有雨的日子</h2>

<pclass="blueone">

不知是无意还是天意，有你的日子总有雨！

</p>6.2CSS样式定义2023/2/4《网页设计技术》2023/2/4《网页设计技术》83.ID选择器其实与独立的class选择器的功能一样，区别在于语法和用法不同。语法格式：#IDname{property:value}用法:在HTML标记元素中应用ID属性引用CSS样式。例如：

<style>

#redone{color:red}

</style>应用：<pid="redone">红色热情</p>提示：使用.classname和使用#IDname这两种方式在效果上并没有区别，但最好只使用其中之一，以免造成混淆。6.2CSS样式定义综合举例6.2：在DW代码视图的编辑窗口输入以下代码，创建综合几种选择器类型的页面css6_2.html：<html><head><title>选择器举例</title><styletype="text/css"><!--h1{font-size:36px;font-family:"隶书";font-weight:bold;color:#993366;}/*html选择器*/h2b{color:#0000FF}/*关联选择器*/.water{font-family:

"隶书";font-size:24px;text-align:right}/*独立类选择器*/h3.hello{font-family:

"隶书";text-align:center;font-size:36px}/*相关类选择器*/#danger{color:#990000;font-family:"华文彩云";font-size:24px}/*ID选择器*/--></style></head><body><h1>标题1的使用</h1><b>测试关联选择器（没有关联）</b><br><h2><b>测试关联选择器组合（具有关联关系）</b></h2><pclass="water">这是黄河的水</p><h3class="hello">这句话才使用了类“hello”的效果。</h3><pid="danger">这里危险</p></body></html>css6_2.html2023/2/4《网页设计技术》10返回2023/2/4《网页设计技术》11一般情况下，CSS样式使用有四种方式。

1.内联式样式表在现有HTML元素的基础上，用style属性把特殊的样式直接加入到那些标记元素中。

例如：

<pstyle="color:#ff0000">内联式样式表</p>

说明：使用内联样式，必须在该文件的头部对整个网页文档进行单独的样式表语言声明：<metahttp-equiv="Content-Type"content="text/css">这种样式表只对使用它的元素起作用，而不会影响其它元素，通常用在需要特殊格式的某个网页对象。这种样式表将样式和要展示的内容混在一起，失去了样式表的优点，一般不采用。6.3CSS样式使用2023/2/4《网页设计技术》122.嵌入式样式表又称内部样式表，包含在HTML文件头部HEAD的style标签内的一系列CSS规则。书写格式：<styletype="text/css"></style>6.3CSS样式使用说明：在此格式中，style的type属性值须设为"text/css"，表示定义的是一个CSS。当不支持CSS的浏览器读到这个属性时，自动忽略这个样式表。<style>标记内定义的前后加上注释符，其作用是使不支持CSS的浏览器忽略样式表的定义。注意：在定义嵌入式样式表时，<style>一定要放在<head>和</head>标记之间。嵌入样式表的作用范围是在本HTML文档内。2023/2/4《网页设计技术》133.链接外部样式文件先将样式表写在一个扩展名为.CSS文件中，样式在样式表文件中的定义和嵌入式样式表的定义是一样的，此时只是不需要style元素。在HEAD标记符内使用link标记元素，通过指定相应属性链接到外部样式表文件。代码格式：<linkrel="stylesheet"

href="css/master.css"type="text/css"

>说明：<link>标签定义了当前文档与其他文档的链接信息rel：表示其它文档将以何种方式与HTML文档结合

href：目标文档的URL6.3CSS样式使用144.导入外部样式文件这种方式是在HTML文件的头部<style></style>标记之间，用CSS样式表的＠import声明引入外部样式表文件。其格式：<style>

@importURL("外部样式文件名");

…

</style>引入外部样式表的使用与链接到外部样式表很相似，都是将样式定义保存为单独文件。区别：导入方式在浏览器下载HTML文件时将样式文件的全部内容拷贝到＠import关键字位置，以替换该关键字；而链接外部样式文件仅在HTML文件需要引用CSS样式文件中的某个样式时，浏览器才链接样式文件，读取需要的内容并不进行替换。6.3CSS样式使用2023/2/4《网页设计技术》15例6.3CSS样式文件应用在DW的代码视图编辑窗口输入以下代码，创建外部样式表文件sheet1.css、sheet2.css和页面文件css6_3.html。sheet1.css代码/*CSSDocument*/h1{font-size:36px;font-family:"隶书";font-weight:bold;color:#993366;}h2b{color:blue}.water{font-family:"隶书";font-size:24px;text-align:right}h3.hello{font-family:"隶书";text-align:center;font-size:36px}6.3CSS样式使用2023/2/4《网页设计技术》2023/2/4《网页设计技术》16sheet2.css代码/*CSSDocument*/#danger{color:#990000;font-family:"华文彩云";font-size:24px}a:link{color:red;text-decoration:none;}/*未访问的链接*/a:visited{color:blue;text-decoration:none;}/*已访问的链接*/a:active{color:yellow;text-decoration:none;}/*活动链接*/a:hover{color:#990000;text-decoration:underline}/*鼠标指针移到上面链接的颜色*/h2b{color:green}6.3CSS样式使用2023/2/4《网页设计技术》17css6_3.html代码<html><head><title>导入链接外部样式表</title>

<styletype="text/css"></style>

<linkrel="stylesheet"href="sheet2.css"type="text/css"></head><body><h1>标题1的使用。</h1><h2><b>测试上下选择器（具有上下文）</b></h2><pclass="water">这是黄河的水</p><h3class="hello">这句话才使用了类“hello”的效果。</h3><pid="danger">这里危险。</p><ahref="css2.htm">测试链接的颜色</a></body></html>6.3CSS样式使用2023/2/4《网页设计技术》186.3CSS样式使用2023/2/4《网页设计技术》195.样式表的优先级同时使用多层样式表，很可能的情况是在一个网页中既定义了内联式样式表和嵌入式样式表又链接了外部样式表，这时网页会变得怎么样？三种样式表具有不同的优先级:内联式样式表>嵌入式样式表>外部式样式表所以某个元素在挑选多层样式表时，会首先选择优先级最高的样式，即就近原则。6.3CSS样式使用返回2023/2/4《网页设计技术》20字体属性文本属性颜色和背景属性容器属性列表属性鼠标属性定位和显示CSS滤镜6.4CSS属性2023/2/4《网页设计技术》216.4CSS属性2023/2/4《网页设计技术》226.4CSS属性返回2023/2/4《网页设计技术》231.创建CSS样式单击“CSS样式”面板右下角的“新建CSS规则”按钮6.5在Dreamweaver中编辑CSS样式（1）定义的位置仅对该文档：此时CSS样式的代码会嵌套在网页<head>和</head>标签中。新建样式表文件：则弹出“保存样式表文件为”对话框，选择样式文件的存储路径和文件名，将CSS样式代码单独存放在一个CSS文件中。已有的某CSS文件：将新建的CSS样式规则写入已有的CSS文件中。其代码会嵌套在网页<head>和</head>标签中。2023/2/4《网页设计技术》24（2）选择器的类型类自定义CSS规则，可应用于网页任何标签。在应用时，它会在HTML标签内加入一个类（class）来规定标签中的格式。比如,将类的样式mystyle定义于某个标题，代码：

<h1class=“mystyle”>标题1应用自定义样式<h1>标签重新定义特定标签的外观，如创建或更改h1标签的CSS样式，所有应用h1标签的文本都会立即更新。高级在CSS选择器中，它的功能最为强大，可定义链接的特效，定义特定元素组合的格式设置（如body,table,td,用逗号隔开），定义嵌套的样式（tdimg空格隔开），定义包含特定id属性的标签的格式设置。6.5在Dreamweaver中编辑CSS样式2023/2/4《网页设计技术》25a:link

链接文本普通状态的外观a:active

当前活动的超级链接文本的外观a:hover

鼠标悬停状态下超级链接文本的外观a:visited

已经访问的超级链接文本的外观

CSS超级链接样式6.5在Dreamweaver中编辑CSS样式2.“CSS”样式面板正在模式：只显示当前文档中页面元素CSS规则全部模式：显示整个网页文件所涉及的全部CSS规则“显示类别视图”按钮

按类别显示DW所支持的所有CSS属性“显示列表视图”按钮

按字母顺序显示DW所支持的所有属性“设置属性视图”按钮

仅显示已设置的属性，默认视图“附加样式表”铵钮

选择要链接或导入到当前文档中的外

部样式表“新建CSS规则”铵钮“编辑样式”按钮“删除CSS规则”按钮6.5在Dreamweaver中编辑CSS样式2023/2/4《网页设计技术》27

3.CSS样式定义对话框（CSS属性）创建了新样式后，即可在“CSS样式定义”对话框中进行设置，CSS样式属性的8大类型。6.5在Dreamweaver中编辑CSS样式2023/2/4《网页设计技术》28CSS属性8大类型说明：类型格式：此类属性用于定义网页中文本的字体、大小、颜色、文本链接的修饰线等格式。背景格式：为整段文字或其它页面元素加入背景格式，如背景色或图像。区块格式：控制文本的间距、缩进或对齐方式等。方框格式：控制网页中的块元素，方框共分为4个部分：边界、边框、填充、方框内容。边框格式：为任何网页元素加上边框（如宽度、颜色和样式），且边框的样式多样（粗细、凹下等）。如宽度、颜色。列表格式：可以设置项目符号的样式（如项目符号大小和类型），还可以用图片来代替项目符号。6.5在Dreamweaver中编辑CSS样式2023/2/4《网页设计技术》29定位格式：

提供网页元素的相对位置或绝对位置的设置，甚至可以将两个元素重叠在一起。这对于一些固定元素（如表格）来说，是一种功能的扩展，而对于浮动元素来说，却是有效的、用于精确控制其位置的方法。扩展格式：

设置页面打印的分页效果和网页视觉效果，其属性包含两部分：分页为打印的页面设置分页符；视觉效果为网页元素施加特殊效果。【光标】：可指定在某个元素上要使用的光标形状，共有15种选择方式，分别代表鼠标指针的各种形状。【滤镜】：特殊效果有阴影、模糊、透明、光晕等。这些效果在DW的设计视图中是显现不出来的，只有在浏览器中浏览时才能看到。6.5在Dreamweaver中编辑CSS样式2023/2/4《网页设计技术》30(1)导出样式表文件在当前文档中设置的样式只在该文档中有效。要使当前文档中的样式应用到其他文档，则可以考虑将其中的样式导出为样式表文件，这样，DW就可以通过样式表链接，使整个站点具有相同的样式设置。单击“文件”的“导出”命令，选择“CSS”样式或在CSS样式面板中，执行“右键”菜单的“导出”命令。在对话框中设置好保存的文件名及路径。4.CSS样式导入与导出6.5在Dreamweaver中编辑CSS样式2023/2/4《网页设计技术》31(2)链接或导入外部样式表文件样式表文件是一个仅包含样式规则的文本文件。通过“附加样式表”命令可将其他页面中的样式应用到当前页面中，具体操作：在“CSS样式”面板中，单击“附加样式表”按钮，打开“链接外部样式表”对话框。在“选择样式表文件”对话框中，指定样式表的路径及名称，则创建的外部链接样式表显示在“CSS样式”面板中。注意：编辑外部样式表将影响到所有链接引用它的文档。用户可以将CSS样式表文件复制到自己的站点内编辑。6.5在Dreamweaver中编辑CSS样式返回6.6CSS应用示例

例6.4

设置文字样式

2023/2/4《网页设计技术》32<html><head><title>设置文字效果</title><styletype="text/css">p{font-family:黑体; /*文字字体*/font-size:35px; /*文字大小*/color:#0033CC; /*颜色*/font-weight:bold;/*粗体*/font-style:italic; /*斜体*/text-decoration:line-through;/*删除线*/}</style></head><body><p>CSS设置文字效果</p></body></html>2023/2/4《网页设计技术》336.6CSS应用示例

段落是由一个个文字组合而成的，同样是网页中最重要的组成部分之一，因此前面提到的文字属性，对于段落同样适用。但CSS针对段落也提供了很多样式属性。在使用Word编辑文档时，可以很轻松的设置行间距，在CSS中通过“line-height”属性同样可以轻松地实现行距的设置。在CSS中“line-height”的值表示的是两行文字之间基线的距离。如果给文字加上下划线，那么下划线的位置就是文字的基线。“line-height”的值跟CSS中所有设定具体数值的属性一样，可以设定为相对数值，也可以设定为绝对数值。在静态页面中，文字大小固定时常常使用绝对数值，达到统一的效果。而对于论坛、博客这些可以由用户自定义字体大小的页面，通常设定为相对数值，可以随着用户自定义的字体大小而改变相应的行距。CSS文字段落例6.5设置文字段落

<html><head><title>行间距line-height</title><styletype="text/css"></style></head><body><pclass="one">冬至，是我国农历中一个非常重要的节气，也是一个传统节日，至今仍有不少地方有过冬至节的习俗。冬至俗称“冬节”、“长至节”、“亚岁”等。早在二千五百多年前的春秋时代，我国已经用土圭观测太阳测定出冬至来了，它是二十四节气中最早制订出的一个。时间在每年的阳历12月22日或者23日之间。</p><pclass="second">冬至是北半球全年中白天最短、黑夜最长的一天，过了冬至，白天就会一天天变长。古人对冬至的说法是：阴极之至，阳气始生，日南至，日短之至，日影长之至，故曰“冬至”。冬至过后，各地气候都进入一个最寒冷的阶段，也就是人们常说的“进九”，我国民间有“冷在三九，热在三伏”的说法。</p><pclass="third">在我国古代对冬至很重视，冬至被当作一个较大节日，曾有“冬至大如年”的说法，而且有庆贺冬至的习俗。《汉书》中说：“冬至阳气起，君道长，故贺。”人们认为：过了冬至，白昼一天比一天长，阳气回升，是一个节气循环的开始，也是一个吉日，应该庆贺。《晋书》上记载有“魏晋冬至日受万国及百僚称贺……其仪亚于正旦。”说明古代对冬至日的重视。</p></body></html>2023/2/4《网页设计技术》35行间距示例例6.6

制作首字下沉效果许多报刊、杂志的文章第一个字都很大，并且向下浮动，这种首字放大的效果，同样可以方便地应用在网页中。在CSS中首字下沉的效果是通过对第一个字进行单独设置样式风格来实现的。<html><head><title>首字放大</title><styletype="text/css"><!--body{background-color:#564700;/*背景色*/}p{font-size:15px; /*文字大小*/color:#FFFFFF; /*文字颜色*/}pspan{font-size:60px; /*首字大小*/

float:left;

/*首字下沉*/ padding-right:5px;/*与右边的间隔*/ font-weight:bold; /*粗体字*/ font-family:黑体; /*黑体字*/ color:yellow; /*字体颜色*/}--></style></head><body><p><span>端</span>午节是古老的传统节日，始于中国的春秋战国时期，至今已有2000多年历史。据《史记》“屈原贾生列传”记载，屈原，是春秋时期楚怀王的大臣。他倡导举贤授能，富国强兵，力主联齐抗秦，遭到贵族子兰等人的强烈反对，屈原遭馋去职，被赶出都城，流放到沅、湘流域。他在流放中，写下了忧国忧民的《离骚》、《天问》、《九歌》等不朽诗篇，独具风貌，影响深远（因而，端午节也称诗人节）。公元前278年，秦军攻破楚国京都。屈原眼看自己的祖国被侵略，心如刀割，但是始终不忍舍弃自己的祖国，于五月五日，在写下了绝笔作《怀沙》之后，抱石投汨罗江身死，以自己的生命谱写了一曲壮丽的爱国主义乐章。</p><p>传说屈原死后，楚国百姓哀痛异常，纷纷涌到汨罗江边去凭吊屈原。渔夫们划起船只，在江上来回打捞他的真身。有位渔夫拿出为屈原准备的饭团、鸡蛋等食物，“扑通、扑通”地丢进江里，说是让鱼龙虾蟹吃饱了，就不会去咬屈大夫的身体了。人们见后纷纷仿效。一位老医师则拿来一坛雄黄酒倒进江里，说是要药晕蛟龙水兽，以免伤害屈大夫。后来为怕饭团为蛟龙所食，人们想出用楝树叶包饭，外缠彩丝，发展成棕子。</p></body></html>说明：

<span>在CSS定义中属于一个行内元素,在行内定义一个区域，也就是一行内可以被<span>划分成好几个区域，从而实现某种特定效果。<span>本身没有任何属性。

在pspan的css规则定义：分类—方框-浮动-左对齐

<div>在CSS定义中属于一个块级元素。<div>可以包含段落、标题、表格甚至其它部分。这使DIV便于建立不同集成的类，如章节、摘要或备注。在页面效果上，使用<div>会自动换行，使用<span>就会保持同行。例6.7CSS设置图片效果<html><head><title>边框</title><styletype="text/css"><!--img.test1{

border-style:dotted; /*点画线*/

border-color:#FF9900; /*边框颜色*/

border-width:6px; /*边框粗细*/}img.test2{

border-style:dashed; /*虚线*/

border-color:#000088; /*边框颜色*/

border-width:2px; /*边框粗细*/}--></style></head><body> <imgsrc="images/cartoon1.jpg"class="test1"> <imgsrc="images/cartoon1.jpg"class="test2"></body></html>39例6.8

制作图文混排网页<html><head><title>图文混排</title><styletype="text/css"></style></head><body><imgsrc="images/hop.jpg"border="0"><p><span>河</span>马，偶蹄目、河马科，英文名hoppopotamus。原来遍布非洲所有深水的河流与溪流中，现在范围已缩小，主要居住在非洲热带的河流间。它们喜欢栖息在河流附近沼泽地和有芦苇的地方。生活中的觅食、交配、产仔、哺乳也均在水中进行。</p><p>河马的特点是吻宽嘴大，四肢短粗、躯体象个粗圆桶。胃3室不反刍。鼻孔在吻端上面，与上方的眼睛和耳朵呈一条直线。这样它全体潜伏水中只须将头顶露出水面就能嗅、视、听兼呼吸了。体长3.75-4.6米，尾长约56厘米，肩高约1.5米，体重3-4.6吨，下犬齿长约60厘米，可重达3公斤。河马皮肤排出的液体含红色色素，经皮肤反射显得象是红色的，引起了河马出“血汗”的说法。</p><p>河马极善游泳，在受惊时，一般避入水中。每天大部分时间在水中，潜伏水下时一般每3、5分钟把头露出水面呼吸一次，但可潜伏约半小时不出水面来换气。它们的皮肤长时间离水会干裂。河马成对或结成小群活动，老年雄性常单独活动。夜行性：它们几乎整个白天都在河水中或是河流附近睡觉或休息，晚上出来吃食，有时会顺水游出30多公里觅食。主要以水生植物为食；偶食陆地作物，以草为主，有时到田地去吃庄稼，食物短缺时，它们也吃肉，据称，河马是路地上最大的食肉动物(杂食)。河马无定居：不在一个地方长期停留，每隔数日便迁到新地方去。</p><p>河马繁殖期不固定,全年均繁殖,每产一仔,孕期227-240天，仔兽出生时体重27-45公斤。在人为饲养下约3岁性成熟，在野外5、6岁成熟。寿命40-50年。河马的皮下脂肪约5厘米厚。人们常猎杀它取其脂肪、肉和厚皮。脂肪可得90公斤。当地人非常珍视它的肉，肉味略同于野猪肉。牙齿质量也很好,是珍贵的雕刻材料，可作为象牙替代品。</p></body></html>例6.9

设置背景颜色。在CSS中页面的背景颜色就是简单的通过设置“body”标签的“background-color”属性来实现的，几乎所有HTML元素的背景色都可以通过它来设定。因此很多网页都通过设定不同HTML元素的各种背景色来实现分块的目的。<html><head><title>利用背景颜色分块</title><style></style></head>

<body><tablecellpadding="0"cellspacing="1"width="100%"border="0"><tr><tdcolspan="2"class="topbanner"><imgsrc="images/banner1.jpg"border="0"></td></tr><tr> <tdclass="leftbanner"> <br><br>首页<br><br>分类讨论

<br><br>谈天说地<br><br>精华区

<br><br>我的信箱<br><br>休闲娱乐

<br><br>立即注册<br><br>离开本站

</td> <tdclass="mainpart">正文内容...</td></tr></table></body></html>例6.10设置背景图片。<html><head><title>背景图片</title><style></style></head><body></body></html>背景图案竖直方向上重复例6.11

设置按钮效果的超级链接。普通的超链接按钮式超链接html><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"><title>按钮超链接</title><style></style></head><body><ahref="#">首页</a><ahref="#">一起走到</a><ahref="#">从明天起</a><ahref="#">纸飞机</a><ahref="#">下一站</a><ahref="#">其它</a></body></html>例6.12

CSS制作实用菜单作为一个成功的网站，导航菜单是永远不可缺少的。导航菜单的样式风格往往也决定了整个网站的样式风格，因此很多设计者都会投入很多时间和精力来制作各式各样的导航条，从而体现网站的整体构架。本例围绕菜单的制作，介绍相关的项目列表、菜单变换、导航栏等内容。

当项目列表的项目符号可以通过”list-style-type”设置为“none”时，制作各式各样的菜单、导航条成了项目列表的最大用处之一，通过各种CSS属性变换可以达到很多意想不到的导航效果。（1）建立HTML相关结构，将菜单的各个项目用项目列表<ul>表示，同时设置页面的背景颜色。body{ background-color:#ffdee0;}<body><divid="navigation"> <ul> <li><ahref="#">Home</a></li> <li><ahref="#">MyBlog</a></li> <li><ahref="#">Friends</a></li> <li><ahref="#">NextStation</a></li> <li><ahref="#">ContactMe</a></li> </ul></div></body>（2）设置整个”<div>”块的宽度为固定像素，并设置文字的字体；设置项目列表<ul>的属性，将项目符号设置为不显示。#navigation{ width:200px; font-family:Arial;}#navigationul{ list-style-type:none; /*不显示项目符号*/ margin:0px; padding:0px;}（3）为<li>标签添加下划线，以分割各个超链接，并且对超链接<a>标签进行整体设计。#navigationli{ border-bottom:1pxsolid#ED9F9F; /*添加下划线*/}#navigationlia{ display:block; /*区块显示*/ padding:5px5px5px0.5em; text-decoration:none; border-left:12pxsolid#711515; /*左边的粗红边*/ border-right:1pxsolid#711515; /*右侧阴影*/}说明：通过“display:block”语句，超链接被设置成了块元素，当鼠标进入该块的任何部分时都会被激活，而不是仅仅在文字上方时才被激活。（4）设置超链接的3个伪属性，以实现动态菜单的效果。#navigationlia:link,#navigationlia:visited{ background-color:#c11136; color:#FFFFFF;}#navigationlia:hover{ /*鼠标经过时*/ background-color:#990020; /*改变背景色*/ color:#ffff00; /*改变文字颜色*/}说明：用IE6.0查看时，必须将鼠标移动到文字的上面才能激活菜单项，这是IE6.0存在的错误导致的，在IE7中修正了这个错误。为了避免这个错误，可以将下面的代码：#navigationlia{ display:block; /*区块显示*/ padding:5px5px5px0.5em; text-decoration:none; border-left:12pxsolid#711515; /*左边的粗红边*/ border-right:1pxsolid#711515; /*右侧阴影*/}#navigationlia{ display:block; /*区块显示*/ padding:5px5px5px0.5em;

width:200px; text-decoration:none; border-left:12pxsolid#711515; /*左边的粗红边*/ border-right:1pxsolid#711515; /*右侧阴影*/}修改为：<html><head><title>无需表格的菜单</title><style></style></head><body><divid="navigation"> <ul> <li><ahref="#">Home</a></li> <li><ahref="#">MyBlog</a></li> <li><ahref="#">Friends</a></li> <li><ahref="#">NextStation</a></li> <li><ahref="#">ContactMe</a></li> </ul></div></body></html>例6.13

用DIV容器和CSS样式表实现结构与表现的分离。当今的网页制作讲究结构与表现的分离。所有的网页元素都用一个一个的<div>容器包装起来，并给每个<div>

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

温馨提示

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

第6章CSS样式应用

文档简介

温馨提示

最新文档

评论

第6章CSS样式应用

文档简介

温馨提示

最新文档

评论

相关文档