CSS DIV网页样式与布局案例教程_第1页
CSS DIV网页样式与布局案例教程_第2页
CSS DIV网页样式与布局案例教程_第3页
CSS DIV网页样式与布局案例教程_第4页
CSS DIV网页样式与布局案例教程_第5页
已阅读5页，还剩192页未读， 继续免费阅读

下载本文档

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

文档简介

项目一

网站制作入门任务一

了解网站开发流程任务二

创建Dreamweaver站点任务三

制作简单的HTML+CSS页面任务一

了解网站开发流程网站开发流程从整体上来说可以分成3大部分，分别是网站设计、网站制作和后期维护。在这3部分中，本书着重介绍的是网站制作部分，强调3个要点的讲解：设置站点、搭建网页主体结构层、搭建网页样式层。支撑知识点一、网页、网站和主页简单来说，网页就是我们上网时在浏览器中打开的一个个画面。网页中可以包含文字、图像、表格、超链接、声音、影像等，其中文字、图像、超链接是组成网页最基本的3个元素。网站就是一组相关网页的集合，是通过Internet向全世界发布信息的载体。主页就是打开某个网站时显示的第一个网页，又叫首页。主页文件基本名为index或default，如index.html、default.html、index.asp和index.aspx等。二、Internet、IP地址和域名Internet的全称是Internetwork，中文称为因特网，是集现代计算机技术和通信技术于一体，基于TCP/IP协议将全世界不同国家、不同地区、不同部门和不同类型的计算机、国家骨干网、广域网、局域网通过网络互连设备连接而成的、全球最大的开放式计算机网络。因特网上连接了不计其数的服务器和客户机，每一个主机在因特网上都有一个唯一的地址，我们称这个地址为IP地址（InternetProtocolAddress）。由于IP地址在使用过程中难于记忆和书写，人们又开发了一种与IP地址对应的字符用以表示地址，这就是域名。三、WWW、HTTP、URL和浏览器WWW是WorldWideWeb的缩写，中文称为“万维网”，也可简称为Web，它是互联网上的一个资料空间，在这个空间中，任何一个资源都由“统一资源标识符”（URL）标识，并利用超文本传输协议（HypertextTransferProtocol，HTTP）传送给使用者。任务二

创建Dreamweaver站点站点是一个网站中所有文件和资源的集合。用户可以使用Dreamweaver在计算机上创建站点和网页，并将站点上传到Web服务器，还可以在保存文件后随时上传更新的文件来对站点进行维护。使用Dreamweaver搭建站点的方法很简单，下面我们便来学习在本机上创建静态站点的方法。支撑知识点一、启动和退出Dreamweaver1．启动Dreamweaver安装好Dreamweaver后，就可以使用该软件了。启动该软件的方法主要有以下2种。方法一：通过双击操作系统桌面上的Dreamweaver快捷图标

启动。方法二：选择“开始”>“所有程序”>“AdobeDesignPremiumCS5”>AdobeDreamweaverCS5”菜单启动。2．退出Dreamweaver退出Dreamweaver的方法主要有以下3种。方法一：在Dreamweaver的菜单栏中选择“文件>“退出”菜单。方法二：按【Ctrl+Q】组合键退出。方法三：单击Dreamweaver操作界面右上角的“关闭”按钮

退出。二、Dreamweaver工作界面介绍启动Dreamweaver后，在其起始页中单击“新建”列中的任一项，将会创建一个相应格式的新文档，并进入DreamweaverCS5工作界面。此处我们单击“HTML”项，创建一个.html格式的文档并进入DreamweaverCS5工作界面。1．应用程序栏应用程序栏位于工作区顶部，左侧显示菜单栏，右侧包含工作区切换器、“CSLive”按钮和程序窗口控制按钮。菜单栏几乎集中了DreamweaverCS5的全部操作命令，利用这些命令可以编辑网页、管理站点以及设置操作界面等。要执行某项命令，可首先单击主菜单名打开其下拉菜单，然后用鼠标单击相应的菜单项。程序窗口控制按钮包括“最小化窗口”按钮

、“最大化窗口”按钮

和“关闭窗口”按钮

。2．文档标签栏文档标签栏位于应用程序栏下方，左侧显示当前打开的所有网页文档的名称及其关闭按钮；右侧显示当前文档在本地磁盘中的保存路径以及还原按钮

；下方显示当前文档中的包含文档（如CSS文档）以及链接文档。当用户打开多个网页时，通过单击文档标签可在各网页之间切换。另外，单击下方的包含文档或链接文档，可打开相应文档。3．文档工具栏利用文档工具栏中包含的按钮可以在文档的不同视图之间快速切换。工具栏中还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项。4．状态栏状态栏位于文档窗口底部，它提供了与当前文档相关的一些信息。其中，标签选择器的作用很大，它显示了当前光标所在位置或当前选定内容的标签层次结构（HTML网页文档就是由一个个标签组成的，我们将在后面讲解），单击某个标签可以选中网页中该标签所代表的内容，如单击<table>标签，可选中网页中与之对应的表格。5．属性检查器使用属性检查器可以检查和编辑当前选定网页元素（如文本和插入的对象）的最常用属性。属性检查器的内容会根据选定元素的变化而变化。例如，如果选择页面中的图像，则属性检查器将显示图像属性（如图像的文件路径、图像的宽度和高度、图像周围的边框等）；如果选择文本，则属性检查器又会显示文本的相关属性。6．“插入”面板“插入”面板包含用于创建和插入对象（例如表格、图像和链接）的按钮，这些按钮按几个类别进行组织，默认显示“常用”类别，您可以单击其右侧的下三角按钮，从弹出的列表中选择其他类别。7．“文件”和“CSS样式”面板“文件”面板用于管理站点中的所有文件和文件夹，包括素材文件和网页文件。使用“CSS样式”面板可以非常方便地新建、删除、编辑和应用样式，以及附加外部样式表等。8．工作环境参数设置利用“首选参数”对话框可以修改Dreamweaver的系统参数。选择菜单栏中的“编辑”>“首选参数”菜单或按快捷键【Ctrl+U】可打开该对话框。三、新建和保存网页文档在DreamweaverCS5中可以创建两种形式的网页文档，一种是直接创建空白网页文档，另一种是通过DreamweaverCS5内置模板创建具有一定内容和样式的网页文档。四、打开、预览和关闭网页文档若要对已有的网页文档进行编辑，就需要在Dreamweaver中打开该文档。另外，在Dreamweaver中打开文档并执行相应操作后，如果想查看它在浏览器中的效果，可执行预览操作。任务三

制作简单的HTML+CSS页面学习本任务的主要目的，是让初学者在开始学习网页制作之前先了解一下网页的主要构成。符合Web标准的网页一般由3部分组成：结构、表现和行为（行为层不在该书的讲授范围），其中结构层由HTML代码构成，表现层由CSS层叠样式表构成，行为层由JavaScript脚本语言构成。支撑知识点一、HTML与CSS简介HTML是HyperTextMarkupLanguage（超文本标记语言）的英文缩写，是用于设计网页的主要语言。CSS（CascadingStyleSheets）中文名为“层叠样式表”，用于设置网页中各标签的样式。二、HTML基础语法HTML不是一种编程语言，而是一种标记语言，它使用标记标签（简称标签）来描述网页。也就是说，HTML文档中实质上只包含HTML标签和纯文本（如我们在Dreamweaver的代码视图中看到的内容）。浏览器的一个作用就是读取HTML文档，并解释其中的一个个标签，然后以我们熟悉的“网页”形式来显示。1．HTML标签概述HTML标签是由尖括号括起来的关键词，绝大多数HTML标签都是成对出现的，包含标记头<>和标记尾</>。标记头是开始标签，标记尾是结束标签，中间是元素内容，如段落标签<p></p>；但也存在少量的单标签，如换行标签<br/>。HTML文档源码中一行可以写多个不同的标签，也可将一对标签写在不同的行中，但每对标签必须嵌套使用，不能交叉使用。2．HTML标签格式在HTML中，每个标签都有名称、可选择的属性及标签内容，标签的属性都在起始标签内标明。下面列出了双标签和单标签的书写格式。格式1：<标签名>标签内容（文本或超文本）<／标签名>例如，定义一个标题的标签及格式：<h1>这是一号标题</h1>格式2：<标签名属性名1＝"属性值1"属性名2＝"属性值2">标签内容（文本或超文本）</标签名>三、网页的基本结构HTML文档默认被分成两部分：文档头<head>和文档体<body>，它们都包含在<html></html>标签对中。1．整个文档<html></html>网页中的所有代码内容都包含在<html></html>标签对中。起始标签<html>用于HTML文档的最前边，用来标识HTML文档的开始；而结束标签</html>恰恰相反，它放在HTML文档的最后面，用来标识HTML文档的结束，两个标签必须成对使用。2．文档头<head></head><head>标签是HTML文档所有头部元素的容器，它里面的元素用来描述HTML文档的相关信息，如指定网页标题、指示浏览器在何处找到CSS样式表等，不会在浏览器中显示。（1）<title></title>（2）<meta/>（3）<style></style>（4）<link></link>（5）<script></script>3．文档体<body></body><body>标签是HTML文档的主体部分，在此标签对之间可包含<p></p>、<h1></h1>、<div></div>、<a/>和<br/>等众多标签，它们定义的文本、图像等都会在浏览器中显示出来。4．文档类型<!DOCTYPE>DOCTYPE是英文“documenttype（文档类型）”的简写，是HTML与XHTML中的文档声明，简称为DTD声明，其作用是告知浏览器当前文档所使用的是哪种HTML或XHTML规范。DOCTYPE声明位于文档最前端，标签为<!DOCTYPE>，它不属于文档的结构部分。四、静态页面与动态页面从大的方面来讲，网页可分为动态网页（DHTML）和静态网页（HTML）。那么动态网页与静态网页有什么区别，它们各自又具有什么样的特征呢？静态网页完全采用HTML语言编写，后缀名一般为.htm、.html、.shtml和.xml等。动态网页使用的语言为HTML＋ASP、HTML＋PHP或HTML＋JSP等，后缀名一般为.asp、.php、.jsp等。无论是动态网页还是静态网页，都可以显示文字、图片和动画等信息，但动态网页可以实现与服务器的交互，如各种论坛、留言板和聊天室等都属于动态网页。五、网页的Web标准1．认识Web标准Web标准不是某一个标准，而是一系列标准的集合。网页主要由3部分组成：结构（Structure）、表现（Presentation）和行为（Behavior），对应的标准也分3方面：结构化标准语言主要包括HTML和XHTML。表现标准语言主要包括CSS。行为标准主要包括对象模型（如W3CDOM）、ECMAScript等。2．Div+CSS布局优势Web标准化设计是指采用Div（这是HTML中的一个标签）+CSS布局网页，放弃原来的table（表格）布局。该方式的优势有如下几个方面。完美地实现结构层同表现层分离。页面下载速度快。页面修改更简单方便。搜索引擎搜索更加优化。3．HTML与XHTML的区别HTML与XHTML可以被认为是一种语言的两种不同版本，HTML经历不断改进后得到了XHTML，可以将XHTML看作是HTML的“严谨版”或“升级版”。本书中所说的HTML代码也是采用严谨的XHTML规范。4．符合Web标准的XHTML代码规范XHTML元素一定要正确地嵌套使用。XHTML一定要有正确的组织格式（都在<html>与</html>内，子元素放在父元素中）。双标签必须成对使用。单标签也必须使用“/”关闭，如<br/>。标签和属性的书写必须使用小写字母。属性值必须用英文双引号引起来。不可使用属性缩写。每个页面的首行添加DOCTYPE声明。id及class属性的属性值不允许以数字开头。0102030405新建班级新建作业成绩统计布置作业学生扫码做小提示：生成的班级二维码，放在下一页ppt中即可。放入二维码后，记得取消“隐藏幻灯片”哦~扫码布置本课作业↑↑↑扫码布置作业wenjingketang课后作业请同学们扫一扫进入班级做作业引用配套微课，学生线上看，系统自动记成绩；大作业一键收发，在线判分扫码申请免费开通→线上建课wenjingketang扫码填写问卷定制更实用的教学资源对课件有修改、优化建议平台使用遇到问题想免费使用平台、免费建课扫码加小旌好友为您提供专属服务哦项目二HTML标签与CSS样式基础任务一

制作鲜花导购网页的结构——HTML标签任务二

修饰鲜花导购网页——CSS样式基础任务一

制作鲜花导购网页的结构——HTML标签现在的网页主要由结构、表现和行为3部分组成，其中结构是指网页的内容部分，它主要通过HTML语言实现，我们可以直接编写HTML代码或在Dreamweaver中进行可视化设计，来制作网页的结构部分。HTML语言的核心是标签。也就是说，我们在浏览网页时看到的文字、图像、动画等在HTML语言中都是用标签来描述的。在本任务中，我们将通过制作鲜花导购网页的结构页面，来学习插入网页元素的方法及各HTML标签的使用。支撑知识点一、HTML标题、水平线、段落和换行1．HTML标题标题的作用是让用户快速了解文档的结构与大致信息，它是通过<h1>~<h6>等标签对进行定义的。<h1>标签对定义最大的一号标题；<h6>标签对定义最小的六号标题。当为文字添加标题标签后，其会独立成一行显示。2．HTML水平线水平线主要是用来分隔网页中的内容。水平线标签<hr/>是一个单标签，作用是在HTML页面中创建水平线。3．HTML段落HTML段落是通过<p></p>标签对进行定义的。4．HTML换行要在不产生一个新段落的情况下进行换行，需使用<br/>标签。二、HTML列表列表是制作网页时经常使用的HTML元素，它可以使文本内容显得工整、直观。在HTML中，列表分为无序列表<ul>、有序列表<ol>和定义列表<dl>3类。1．无序列表无序列表就是列表结构中的列表项没有先后顺序的列表形式。大部分网页中的列表均采用无序列表，其使用<ul></ul>标签对定义，包含的列表项使用<li></li>标签对定义。列表项的默认符号为小圆点●，要改变符号类型或去除符号，可使用CSS属性进行控制。2．有序列表有序列表在列表项前都有编号，因此，浏览者可以清晰地了解每项的顺序。其中<ol></ol>标签对用来定义有序列表，包含的列表项由<li></li>标签对定义，默认序号为1、2、3。3．定义列表定义列表是项目及其注释的组合。其中<dl></dl>标签对表示定义列表；<dt><dt/>标签对表示每个定义的名称（项目名）；<dd></dd>标签对表示每个定义名称的详细内容（注释）。三、HTML图像1．认识网页中的图像图像可以使网页更加生动、美观，常见的网页图像格式有.gif及.jpg两种：.gif格式最多只能包含256种颜色，因而适合表现色调不连续或具有大面积单一颜色的图像，如卡通画、按钮、图标和徽标等。.jpg格式适于表现色彩丰富，具有连续色调的图像，如各种照片。2．HTML图像标签HTML图像分为两类，插入图像和背景图像。插入图像作为HTML实体标签存在；而背景图像则是CSS的修饰内容。背景图像将放在CSS中讲解。HTML插入图像是通过<img/>标签进行定义的。它是一个单标签。由图像标签<img/>和其属性构成。其中src属性用来表示图片的源地址，是必不可少的。3．图像路径（1）绝对路径绝对路径是书写完整的路径，系统按照整个路径查找文件。绝对路径中的盘符后面用:\或:/分隔，各目录名之间以及目录名与文件名之间用\或/分隔。绝对路径可分为如下两类：文件在电脑中的物理路径。文件为发布在Internet上的文件时，需要该文件的网络路径，即网址。（2）相对路径相对路径是以当前文档所在的路径和子目录为起始目录，进行相对于文档的查找。制作网页时通常采用相对路径，这样可以避免站点中的文件整体移动后，产生找不到图片或其他文件等的现象。四、HTML超链接超链接由源端点和目标端点两部分组成，其中设置了链接的一端称为源端点，跳转到的页面或对象称为目标端点，源端点可以是文字或图像等。HTML超链接主要由标签对<a></a>和属性href构成。要实现链接的跳转，必须要使用属性href。1．超链接的基本格式<ahref="跳转文件的地址"target="窗口打开方式">源端点（如链接文字）</a>href="跳转文件的地址"表示超链接的目标文件的路径。超链接的相对路径写法与图像的相对路径相似。target属性是链接目标的打开方式。2．超链接的分类超链接分为文字超链接、图片超链接、锚点超链接和邮件超链接几种类型。1）文字超链接<ahref="跳转文件的地址">链接文字</a>2）图片超链接<ahref="跳转文件的地址"><imgsrc="1.jpg"></a>3）锚点超链接（同一页面跳转）4）邮件超链接<aherf="mailto:邮箱名">给我发邮件吧</a>任务二

修饰鲜花导购网页——CSS样式基础在上一任务中，我们完成了鲜花导购网的主体结构——HTML标签的制作。在本任务中我们将学习如何使用层叠样式表CSS来修饰该页面，即制作该网页的表现部分。支撑知识点一、在HTML页面中引入CSS样式表的方法HTML与CSS是两个作用不同的语言，要让它们同时对一个网页产生作用，必须确定在HTML中引入CSS的方法，主要有以下几种。将CSS样式表放置在HTML文件头部：内部样式表。将CSS样式表放置在HTML文件主体：行内样式表。将CSS样式表放置在HTML文件外部：链接样式表与导入样式表。1．内部样式表内部样式表也称嵌入式样式表，是指把对页面各元素的样式设置集中写在<head></head>标签对中，并且用<style></style>标签对进行声明。2．行内样式表行内样式表是直接对HTML的标签使用style属性，然后将CSS代码作为属性值写在其中，其格式如下。<body><HTML标签style="样式属性:取值;样式属性:取值;…"><HTML标签></body>3．链接样式表这种方式是将一个独立的样式表文件引入到HTML文件中，样式表文件就是我们常说的CSS文件，扩展名为.css。CSS文件要和HTML文件一起发布到服务器上，这样在用浏览器打开网页时，浏览器会按照HTML网页所链接的外部样式表来显示其风格。要在HTML中链接外部样式表文件，需要在<head></head>标签对之间添加<link></link>标签对，具体格式如下。<head><linkrel="stylesheet"type="text/css"href="样式表文件的地址"></head>4．导入样式表导入样式表与链接样式表的功能基本相同，只是引入和运作方式上有些区别。采用导入方式引入的样式表，在HTML文件初始化时，会被全部导入到HTML文件内，作为文件的一部分，类似嵌入式的效果；而链接式样式表则是在HTML的标签需要格式时才以链接的方式引入。<head><styletype=”text/css”>@importurl(外部样式表文件地址);</style></head>二、选择器的类型CSS的选择器常用的有3种类型，分别是标签选择器、id选择器和类选择器。上述任务实施中便用到了这3种选择器，其中body{}和h1{}属于标签选择器，#link{}和#bg{}属于id选择器，.p1{}属于类选择器。1．标签选择器一个HTML文件由很多不同的标签组成，利用标签选择器可以统一设置使用某类标签定义的元素的外观。h1{text-align:center;font-size:42px;color:#FF6600;}2．类选择器和id选择器（1）类选择器使用类（class）选择器可以为相同或不同的标签分类设置不同的样式。使用该选择器时，需要在HTML中为希望设置同一样式的标签定义相同的类名，即设置标签的class属性，然后在CSS中定义类选择器。定义类选择器时，需要在类名称的前面加一个点“.”，语法如下。.类名{样式属性:取值;样式属性:取值;…}（2）id选择器id选择器用来对单个元素设置单独的样式，在同一HTML文件中，id名不能重复。id选择器的使用方法与类选择器相似，先在HTML中为希望单独设置样式的标签定义id名（使用标签的id属性），然后在CSS中定义id选择器。定义id选择器时，需要在id名称的前面加一个#号，语法如下。#id名{样式属性:取值;样式属性:取值;…}3．伪类选择器伪类选择器不属于选择器，它是让元素呈现动态效果的特殊属性。之所以称为“伪”，是因为它指定的对象在文档中并不存在，它指定的是元素的某种状态。三、选择器的集体声明、嵌套与层叠1．选择器集体声明如果多个选择器声明的样式风格完全相同，这时可以将声明相同的选择器归类为一组（各选择器之间用英文逗号“,”分开）以进行集体声明，从而提高代码的效率和速度，同时也可以降低代码的冗余。h1,h2,h3,h4,h5{text-align:center;font-size:42px;color:#FF6600;}#one,.text,p{text-align:center;backgroud-color:red;}2．选择器的嵌套在CSS选择器中，还可以通过嵌套的方式，对特殊位置的HTML标签进行声明。例如，当<p></p>标签对中包含<span></span>标签时，就可以使用嵌套选择器来进行相应的控制（父子选择器之间加一个空格）。pspan{color:red;} /*设置p标签里包含的span标签的样式*/3．通用选择器通用选择器是一种特殊类型的选择器，它由星号*来表示选择器的名称，可以定义所有的网页元素显示格式。通用选择器因为涉及范围较大，一般常用于清除页面中元素的边距。*{margin:0;padding:0;}4．选择器的层叠选择器的层叠是指当有多个选择器作用于同一HTML文档的同一元素时，即多个选择器的作用范围发生了重叠时，CSS的处理方式。CSS处理的原则如下：若各选择器设置的属性不一样，则元素将应用所有选择器定义的样式；若多个选择器定义的样式发生了冲突，则CSS让元素应用优先级高的选择器所定义的样式。CSS规定选择器的优先级从高到低为：行内样式>id选择器>类选择器>标签选择器。四、选择器的继承CSS的继承与HTML文档的组织结构有很大关系。通过前面的学习我们知道，HTML的各个标签就像是一个个容器，在容器中还可以包含容器，形成父子关系。CSS的继承是指某个标签的子孙后代会继承该标签的样式风格。如果不希望子标签继承父标签的某些样式风格，则为该子标签创建相应的样式即可。子标签的样式不会影响父标签。0102030405新建班级新建作业成绩统计布置作业学生扫码做小提示：生成的班级二维码，放在下一页ppt中即可。放入二维码后，记得取消“隐藏幻灯片”哦~扫码布置本课作业↑↑↑扫码布置作业wenjingketang扫码填写问卷定制更实用的教学资源对课件有修改、优化建议平台使用遇到问题想免费使用平台、免费建课扫码加小旌好友为您提供专属服务哦项目三

使用CSS设置文字效果任务一

制作个人博客首页——设置文字样式任务二

制作个人博客子页——设置段落和其他文字样式任务三

制作个人博客排行榜——设置列表样式任务一

制作个人博客首页——设置文字样式众所周知，文字是网页中最为重要的设计元素，因此在网页中对文字的修饰也是不可或缺的。在项目二中，我们已经学会了如何在网页中插入文字、段落和标题等，在本任务中，我们将通过制作个人博客首页，学习如何运用CSS对文字进行美化和修饰，包括设置文字的字体、字号、颜色和加粗效果等。支撑知识点在上面的实例中，我们运用了CSS属性对网页文字进行修饰操作，CSS文字属性包括文字字体、文字大小、文字加粗及文字颜色等，这些属性主要是以font为前缀。下面我们开始CSS各个文字样式属性的具体学习。一、CSS文字样式常用属性设置字体：font-family设置字号：font-size设置斜体：font-style设置加粗：font-weight设置颜色：color设置变体：font-variant组合设置字体属性：font1．设置文字字体属性为font-family，基本语法：font-family:字体1,字体2,字体3;。例如：p{font-family:宋体，楷体，隶书;}以上语句声明了页面中使用<p>标签的字体，并且同时声明了3个字体名称，分别是宋体、楷体和隶书。整句代码告诉浏览器首先在浏览者的计算机中寻找宋体，如果该用户的计算机中没有安装宋体，则接着寻找楷体，以此类推。2．设置文字大小属性为font-size，基本语法：font-size:尺寸|百分比|关键字;。其属性值可以是关键字、尺寸或百分比，意义如下。尺寸：使用尺寸设置文字的大小，一般使用的单位为px（像素）。百分比：以父元素中的字体大小为参考值，如果没有设置父元素的字体大小，则是相对于浏览器默认字体大小的百分比。关键字：使用关键字设置文字大小，从小到大包括xx-samll（极小）、x-small（较小）、small（小）、medium（标准大）、large（大）、x-large（较大）和xx-large（极大）7个关键字。3．设置斜体属性为font-style，基本语法：font-style:normal|italic|oblique;。其各属性值的意义如下表所示。4．设置文字粗细属性为font-weight，基本语法：font-weight:normal|bold|bolder|lighter|number;。例如：p{font-weight:600;}。其各属性值的意义如下表所示。5．设置文字颜色属性为color，基本语法：color:颜色的名称|RGB值|十六进制数;。其属性值可以是颜色的英文名称，如red、blue；也可以是颜色的RGB值，如rgb(255,0,0)；还可以是颜色的十六进制值，如#ff0000。我们将在后面介绍颜色的选择方法。6．设置变体属性为font-variant，作用是将所有小写字母转换为小型大写字母，基本语法：font-variant:normal|small-caps;。其各属性值的意义如下表所示。小型大写字母与其余文本相比，其字体尺寸更小。7．组合设置文字属性可以用font来组合设置文字的属性。例如：p{font:italicboldsmall-caps15pt宋体;}表示该段落文字为斜体加粗体的宋体文字，大小为15像素，其中英文采取大写字母显示。二、网页中元素的长度单位1．绝对长度单位绝对长度单位所定义的元素大小一般都比较固定，大小显示不受其他因素影响，一般在网页制作中使用较少。2．相对长度单位相对长度单位是指网页元素的大小相对于某个参照物来确定，如使用屏幕分辨率、父元素或浏览器作为参照物等。相对长度单位在网页设计中较常用，如下表所示。三、为网页元素设置颜色的技巧在HTML页面中，颜色统一使用RGB颜色模式，该模式下，颜色由红、绿、蓝三原色按一定的比例混和而成。这三种原色的取值范围均为0~255，共可混合出一千多万种颜色。例如，当将这三种原色的值都设为255时，颜色为白色；都设为0时，颜色为黑色。RGB颜色也可以使用十六进制表示，如#ff0000，其中前两位为红色分量，中间两位为绿色分量，最后两位是蓝色分量。任务二

制作个人博客子页

——设置段落和其他文字样式在CSS中除了可以对文字本身设置样式外，还可以对多个文字的集合，即段落设置样式。下面，我们通过制作个人博客子页，来学习设置段落样式和其他文字样式的方法，包括设置段落的对齐方式、缩进、行间距和段间距，以及英文字母大小写，文字的上划线、下划线效果等。支撑知识点一、CSS段落和其他文字样式属性修饰文字：text-decoration转换英文字母大小写：text-transform设置中文字符间距：letter-spacing设置英文单词间距：word-spacing设置段落的水平对齐方式：text-align设置段落缩进：text-indent设置行间距（行高）：line-height1．修饰文字修饰文字是指为文字添加下划线、删除线和上划线等，属性为text-decoration，基本语法：text-decoration:underline|overline|line-through|blink|none;。其各属性值的意义如下表所示。2．转换英文字母大小写属性为text-transform，基本语法：text-transform:capitalize|uppercase|lowercase;。其各属性值的意义如下表所示。3．设置中文字符间距属性为letter-spacing，用来调整中文字符或英文字母之间的间距，基础语法：letter-spacing:normal|长度;。其中，“长度”有两种表示方法，一种是使用绝对数值，一种是使用字体高（即字体大小）的倍数。4．调整英文单词间距属性为word-spacing，用来调整英文单词之间的间距，属性值和使用方法与letter-spacing属性相同。5．设置段落的水平对齐方式属性为text-align，可以设置段落的左、中、右和两端对齐。该属性可应用于HTML中的任何块级标签，如<p>、<h1>~<h6>、<div>等。基础语法：text-align:left|right|center|justify;，其各属性值的意义如下表所示。6．设置段落首行缩进属性为text-indent，基础语法：text-indent:长度|百分比;。一般我们使用text-indent:2em;，表示首行缩进2个字符。7．调整行高指调整行与行之间的距离，属性为line-height，还可以利用该属性让文字纵向居中。基础语法：line-height:normal|数字|长度|百分比;。其中，“数字”表示使用绝对数值，如8px；“长度”表示设置为当前字高的倍数，如2em；百分比在设置行高时很少用。二、HTML常用符号在Dreamweaver的设计视图中输入一些符号时，由于它们与HTML代码的关键字有冲突，因此不能直接在代码视图中显示，而是转化成了相应的HTML代码。我们可以在设计视图中利用键盘或“插入”>“HTML”>“特殊字符”菜单来输入这些符号，也可以直接在代码视图中输入这些符号的HTML代码（注意大小写）。任务三

制作个人博客排行榜

——设置列表样式列表能够将文字按一定的方式排列整齐，从而使内容井然有序。通过对列表设置CSS样式，可以制作出较好的版式效果。本任务通过制作博客排行榜页面，来学习为列表设置CSS样式的方法。支撑知识点一、CSS列表样式常用属性关于列表的相关知识，读者可参考项目二任务一中的相关内容。无论是有序列表还是无序列表，在CSS中都可以使用相同的属性值，而且效果完全相同。以下是CSS列表样式的常用属性。设置列表符号：list-style-type使用图片符号：list-style-image调整列表位置：list-style-position1．设置列表符号属性为list-style-type，用来设置列表项的符号类型，基本语法：list-style-type:属性值;。其常用的属性值及意义如下表所示。2．使用图片符号属性为list-style-image，用来将图片作为列表的符号，从而丰富和美化列表符号，其基本语法为：list-style-image:url;。输入图像的路径时，可以参考项目二中介绍的方法。此外，在Dreamweaver的代码界面中输入CSS代码会出现代码提示，添加列表图像也同样会出现对应的代码提示。单击“浏览”按钮，然后在打开的对话框中选择需要的列表图像。3．调整列表位置属性为list-style-position，用来设置列表符号的缩进，即列表项的位置，其基本语法为：list-style-position:outside|inside;各属性值的意义如下表所示。二、清除列表的默认边距列表在HTML页面中默认是有空白距离的，当我们用CSS对其进行操作时，需要将默认的距离消除，以方便使用CSS对其精确控制。在实际操作时，可以使用以下CSS选择器来消除列表的默认内边距及外边距。ul、ol{padding:0;margin:0;}三、<div>与<span>标签补充讲解使用HTML和CSS设计网页时，<div>与<span>是两个常用的标签。利用这两个标签，加上CSS对其样式的控制，可以很方便地实现各种效果以及对网页进行布局。<div>标签对相当于一个容器，在它里面（<div>与</div>之间）可以容纳各种HTML元素，如段落<p>、图片<img>、标题<h>、表格<table>，以及其他<div>标签等。我们可以把<div>标签及其包含的内容视为一个独立的对象，用CSS进行控制。例如，设置<div>标签的高度、宽度、背景、位置、边框，以及其包含的内容的样式等。四、块级元素与行内元素补充讲解HTML中的元素分为两大类型，块级元素和行内元素（或称内联元素）。二者的区别是块级元素有自身的结构，默认会独占一行；而行内元素需要超过其父元素的宽度才换行。块状元素一般作为容器，可以把其他元素放在块元素中。行内元素还有以下几个特点：（1）设置宽度width无效。（2）设置高度height无效，可以通过line-height来设置行高。（3）设置margin只有左右有效，上下无效。（4）设置padding只有左右有效，上下则无效。0102030405新建班级新建作业成绩统计布置作业学生扫码做小提示：生成的班级二维码，放在下一页ppt中即可。放入二维码后，记得取消“隐藏幻灯片”哦~扫码布置本课作业↑↑↑扫码布置作业wenjingketang扫码填写问卷定制更实用的教学资源对课件有修改、优化建议平台使用遇到问题想免费使用平台、免费建课扫码加小旌好友为您提供专属服务哦项目四

使用CSS设置图片效果与网页背景任务一

制作休闲文章页面——设置图片效果任务二

制作童话故事页面——设置网页元素背景任务一

制作休闲文章页面

——设置图片效果图片在网页制作中可分为两大类，一类是插入图片，它是作为HTML结构存在的；另一类是背景图片，它是作为CSS样式表而存在的。在本任务的实例中将讲解到这两类图片的设置方法，大家在学习的过程中需要注意。支撑知识点一、设置图片和其他元素大小在CSS中，可以利用height（高度）和width（宽度）这两个属性来设置图片及块元素之类的对象大小。这两个属性的使用很简单，其语法格式为：height:高度值;或width:宽度值;。与项目三中学习的设置文字大小一样，在设置height和width的属性值时可以使用多种单位，常用的有%（百分比）和px（像素）。二、设置图片和其他元素边框在CSS中，设置图片和其他元素的边框主要分成3个属性：边框样式、边框宽度和边框颜色。这3个属性是统一的，一般情况下都需要设置。设计边框样式的属性：border-style调整边框宽度的属性：border-width设置边框颜色的属性：border-color三、设置图片的对齐方式1．水平对齐图片的水平对齐与项目三介绍的文字水平对齐的方式基本相同，分为左、中、右3种。图片的水平对齐不能直接通过设置图片的text-align属性实现，而是通过设置其父元素的text-align属性来实现的。2．垂直对齐在CSS中可以使用vertical-align属性来控制图片的垂直对齐方式，它主要应用在图片与文字搭配的情况下。其各属性值的意义如下表所示。四、设置图文混排在网页中经常会出现图文混排的情况，这种效果是使用CSS为图片设置左浮动或右浮动属性来实现的。图片居于文字右边：float:right;图片居于文字左边：float:left;另外，我们可以使用margin属性设置图片同文字之间的距离。任务二

制作童话故事页面

——设置网页元素背景在HTML中背景图片是通过重复平铺实现的，在CSS中处理更加灵活，可以通过CSS样式控制背景图片，并放到任意位置。本任务通过制作童话故事页面，重点学习使用CSS设置背景颜色及控制背景图片的方法。支撑知识点一、设置背景颜色设置背景颜色是指使用CSS设置整个页面（通过设置<body>标签）或指定的HTML元素（如<div>块）内的背景颜色，属性为background-color。我们在前面的任务实施中也多次用到该属性，其具体颜色值的设置方法与文字颜色的设置方法一样，可以采用十六进制，RGB各颜色的分量和颜色的英文单词等。二、设置背景图片设置背景图片是指使用CSS为整个页面或指定的HTML元素设置背景图片，在使用CSS插入背景图片后，还可以使用CSS的其他属性控制背景图，如设置背景图的位置，以及是否重复和固定等。在CSS中设置背景图片的属性如下。插入背景图片：background-image设置背景图片的重复方式：background-repeat设置背景图片的位置：background-position固定背景图片：background-attachment１．插入背景图片利用CSS插入背景图片的语法格式为：background-image:ulr(背景图片的路径和名称);。背景图片的路径可以为绝对路径也可以为相对路径，具体可参考项目二任务一支撑知识点中的讲解；图片的格式一般以GIF、JPG和PNG为主。2．设置背景图片的重复方式使用background-repeat属性可以设置背景图片的重复方式，包括水平重复、竖直重复和不重复等，其语法格式为：background-repeat:属性值;，各属性值的意义如下表所示。默认情况下，背景图片将从其所在元素的左上角开始重复。3．设置背景图片的位置当背景图像不重复铺满其所在元素的区域时，可使用background-position属性设置背景图片位置，其语法格式为：background-position:属性值;，各属性值的意义如下表所示。4．固定背景图片如果页面比较长，那么当网页向下滚动时，背景图像也会随之滚动，当网页滚动到超过图像的位置时，图像就会消失。为此，可利用background-attachment属性允许或防止这种滚动，其语法格式为：background-attachment:属性值;，各属性值的意义如下表所示。5．背景样式综合设置与border属性一样，也可以使用background属性将关于背景的各种属性值集成到一个语句中，中间用空格隔开，从而使CSS代码显得更简洁。如下：background:redurl(bg6.jpg)no-repeatfixed5px10px;0102030405新建班级新建作业成绩统计布置作业学生扫码做小提示：生成的班级二维码，放在下一页ppt中即可。放入二维码后，记得取消“隐藏幻灯片”哦~扫码布置本课作业↑↑↑扫码布置作业wenjingketang扫码填写问卷定制更实用的教学资源对课件有修改、优化建议平台使用遇到问题想免费使用平台、免费建课扫码加小旌好友为您提供专属服务哦项目五

使用CSS设置导航栏任务一

制作简单纵向导航栏任务二

制作简单横向导航栏任务三

制作带图片效果的横向导航栏任务四

制作带下拉菜单的横向导航栏任务一

制作简单纵向导航栏导航栏包括纵向导航栏、横向导航栏、带下拉菜单的导航栏等。在制作导航栏的过程中，一般会应用CSS样式表来对导航栏进行设置和美化。本任务中，我们从最基础的纵向导航栏开始学习。支撑知识点——使用CSS的一些小技巧1．合理利用display:block属性display属性规定元素的显示类型，其具有多个不同的属性值，其中display:block表示将元素转换为块级元素。2．利用margin-bottom设置间隔效果在制作纵向导航栏或者列表一类的纵向HTML结构时，如果设计要求导航栏的每一项之间有一定间隔的时候，可以使用margin-bottom属性来实现这个效果。对于单个的元素来讲，margin-bottom属性是设置此元素和它下面的元素的间隔，当此属性被设置在纵向菜单或者列表结构里面时，就可以产生均匀的间隔效果。3．利用border设置特殊边框特殊边框的设置并不困难，在项目四中，我们已经知道border可以对4个方向的边框分别进行设置。那么在设置边框的时候，可以单独设置一个方向的边框，也可以对多个方向的边框分别进行不同的样式设置。任务二

制作简单横向导航栏在本任务中，我们将通过制作简单横向导航栏，来继续学习制作导航栏的方法及一些CSS样式的使用。本任务将会使用到前一个任务中的一些步骤，同时会涉及到浮动、块元素等知识。任务三

制作带图片效果的横向导航栏通过前面2个任务的练习，大家已经对导航栏有了初步的了解，现在我们需要在前面2个例子的基础上，对导航栏进行更深入的学习，制作一个带有背景图片变换效果的横向导航栏，当将鼠标指针移动到导航栏的菜单项时背景会发生变化。任务四

制作带下拉菜单的横向导航栏本任务将要制作带下拉菜单的横向导航栏。该导航栏的制作比前面3个任务制作都要复杂一些。要在不使用javascript的情况下制作带下拉菜单的导航栏，需要合理利用CSS的display属性，通过设置display属性的值来完成菜单的显示和隐藏。支撑知识点

——使用CSS的一些小技巧1．用*号设置全局样式对网页进行样式设置时，有时会遇到需要设置全局样式的情况，也就是设置页面上所有标签、类、id都使用的共有样式。CSS为我们提供了一种解决方法，就是使用*{}选择器。由该选择器定义的样式，浏览器会视作页面上所有的内容都采用这个样式。2．对特定标签下的子标签设置样式一个网页中，通常会在不同的地方有相同的标签，比如2个不同class的<div>下面都可能会有超链接标签、列表标签等。要给这些不同位置的标签添加样式，一种方法是为这些不同位置的标签设置对应的class或id，但这样会使页面上有大量的class或id，不利于样式的处理；另外一种方法就是使用父标签加子标签的形式，也就是利用在项目二学习的嵌套选择器。其语法格式为：父标签子标签孙标签曾孙标签…{}0102030405新建班级新建作业成绩统计布置作业学生扫码做小提示：生成的班级二维码，放在下一页ppt中即可。放入二维码后，记得取消“隐藏幻灯片”哦~扫码布置本课作业↑↑↑扫码布置作业wenjingketang扫码填写问卷定制更实用的教学资源对课件有修改、优化建议平台使用遇到问题想免费使用平台、免费建课扫码加小旌好友为您提供专属服务哦项目六

制作表格并使用CSS美化任务一

制作2012年世界杯分组表——构建和美化表格任务二

制作日历单元格——使用CSS控制表格进阶任务一

制作2012年世界杯分组表

——构建和美化表格在网页设计中，表格占有很重要的地位。在以前，我们主要使用表格来对网页进行布局和分类显示数据。现在，表格在网页制作中主要用来显示后台数据。将后台数据显示在一个表格中，不但可以使数据结构看起来容易阅读，也可以让整个页面美观合理。本任务中，我们通过制作2012年世界杯分组表，来学习与表格相关的HTML标签，掌握构建表格的结构，以及使用CSS美化表格的操作（如设置单元格高度、宽度、颜色和边框等）。支撑知识点一、表格的HTML标签与其他HTML元素一样，表格也是由标签组成的。下面介绍表格各组成标签的意义。1．表格主体标签<table><table></table>标签对为表格的主体标签，表格的其他组成元素，如行标签、单元格标签等都包含在<table></table>标签对之间。width="70%"border="0"cellspacing="0"cellpadding="0"为<table>标签的相关属性和属性值，表示该表格的宽度为其父元素的70%，其边框粗细、单元格边距以及单元格间距均为0。2．行标签<tr><tr></tr>标签对为表格的行标签，表格有多少行，就有多少个<tr></tr>标签对。在每行中可以包含多个单元格。3．单元格标签<td><td></td>标签对为表格的单元格标签，其包含在<tr></tr>标签对中。单元格用于存放表格要显示的内容，可以是任意的HTML内容，这些内容位于<td></td>标签对之间。在表格的一行中可以包含多个单元格。4．表头标签<th><th></th>标签对为表格特有的表示表头单元格的标签，在Dreamweaver的设计界面中创建表格时可以选择表头所在的位置。在上面的代码中，scope为<th>标签的属性，表示定义表头，"col"为属性值，表示将当前列的所有单元格和表头单元格联系起来。5．标题标签<caption><caption></caption>标签对为table表格特有的表示标题的标签，同<th>标签不同的是，<caption>标签不需要合并，它本身就只有一列，同时<caption>标签的位置是默认居中的。二、合并和拆分单元格要合并单元格，可先选中要合并的多个单元格，然后单击属性检查器中的“合并单元格”按钮；要拆分单元格，可将插入点置于要拆分的单元格中，然后单击“属性”面板中的“拆分单元格”按钮

，在弹出对话框中选择需要拆分为的单元格类型，并输入要拆分为的行数和列数，然后单击“确定”按钮即可。三、使用CSS设置表格或单元格颜色使用CSS设置单元格内文字的颜色，以及表格或单元格的背景的方法与我们在项目三和项目四中学习的设置文字颜色和网页元素背景相同。例如，可以使用color属性设置单元格内文字颜色；使用background-color属性设置单元格、行或表格背景颜色；使用background-image属性设置表格、行或单元格背景图片。四、使用CSS设置表格或单元格大小和边框同样，使用CSS设置表格或单元格大小和边框等的操作与我们在项目四中学习的设置图片和其他块元素相同。例如，可以使用width属性设置整个表格或单元格宽度；使用height属性设置整个表格或行的高度；使用border属性设置表格或单元格的边框。如代码table{border:1pxsolidred;}，表示设置整个表格的边框粗细为1像素，实线，红色。任务二

制作日历单元格

——使用CSS控制表格进阶通过前面的学习，大家已大致了解了一个表格应该有什么样的表现形式。下面，我们再通过制作一个表格形式的月历（以2012年9月为例），此月历的基本结构如下图所示，显示效果为：8月及10月的部分日期颜色为灰色，而9月的日期颜色为黑色；当将鼠标指针移动到单元格上时单元格的颜色会发生变化。支撑知识点一、使用CSS设置网页元素的内边距和外边距在前面的学习中，我们已经多次接触到了CSS的margin和padding属性。其中，margin属性用来设置元素的外边距，即元素与其他相邻元素之间的间距；padding属性用来设置元素的内边距（也称填充），即元素内容与元素边框之间的空间。二、使用CSS合并表格边框使用CSS设置单元格边框时，假设为每个单元格都设置边框宽度为1px，那么当两个单元格都相邻的时候，相邻边的边框宽度实际上是1px+1px=2px。为了避免此情况发生，或为了避免单元格之间出现空隙，可使用border-collapse属性将表格相邻的边框合并。border-collapse属性的基本语法为：border-collapse:separate|collapse|inherit;0102030405新建班级新建作业成绩统计布置作业学生扫码做小提示：生成的班级二维码，放在下一页ppt中即可。放入二维码后，记得取消“隐藏幻灯片”哦~扫码布置本课作业↑↑↑扫码布置作业wenjingketang扫码填写问卷定制更实用的教学资源对课件有修改、优化建议平台使用遇到问题想免费使用平台、免费建课扫码加小旌好友为您提供专属服务哦项目七

制作表单并使用CSS美化任务一

制作注册页面——表单的HTML结构任务二

美化注册页面——使用CSS控制表单任务一

制作注册页面

——表单的HTML结构本任务将要制作仿淘宝注册页面。该页面中包含了表单中的几个主要元素：文本框、密码框、单选按钮、复选框等。通过制作该页面，可以让大家掌握在网页中插入表单标签，以及使用<div>标签对表单元素进行布局的方法，并了解表单标签在页面中的默认显示效果。另外，本任务主要使用表单标签来进行注册页面的制作，暂不涉及到CSS，使用CSS修饰表单的内容放到任务二中讲解。支撑知识点

——常用的表单HTML标签1．表单标签表单是一个包含表单元素的区域，它由<form></form>标签对定义。我们可以将文本框、单选按钮、复选框、下拉列表框、按钮和文本域等表单元素放置在<form></form>标签对中。2．输入标签多数情况下用到的表单元素是由输入标签</input>定义的，这是一个单标签，用来在网页中搜集用户的信息，其常用的属性如下。<inputtype="表单元素类型"value="表单元素的值"name="表单元素名称"class="类别名"/>其中，通过设置</input>标签的type属性可以得到不同类型的表单元素，如按钮、复选框、文本框和图片框等。3．下拉列表标签HTML网页中的下拉列表通常由<select></select>和<option></option>标签定义。其中<select></select>标签对用来定义下拉列表；<option></option>标签对用来定义下拉列表中的选项，下拉列表中有多少个选项，就需要添加多少个<option></option>标签对。例如：<select><optionvalue="值1">选项1</option><optionvalue="值2">选项2</option><optionvalue="值3">选项3</option></select>4．文本域标签<textarea></textarea>标签为文本域标签，它相当于一个多行的文本框，可以让用户输入大量数据。它有2个属性cols和rows，分别代表一行多少字以及文本域有多少行。任务二

美化注册页面

——使用CSS控制表单在上个任务中，我们完成了注册页面的主体结构——HTML标签的制作，但界面不够精致，还需要美化。在本任务中，我们将学习使用CSS来美化此页面的操作，效果如下图所示，并掌握使用CSS修饰表单元素的方法。支撑知识点——使用CSS定义表单样式我们可以用CSS来改变表单的文字、背景、一些输入框的样式等，但是诸如checkbox和radio这样的表单元素无法使用纯粹的CSS来改变样式，必须结合一定的javascript代码才可以，所以本书不做checkbox和radio样式的讲解。CSS对表单标签的修饰大致分为以下几类。修饰表单标签边框样式。修饰表单标签背景。改变表单标签的活动状态样式。1．修饰表单标签边框样式这里还是使用大家很熟悉的一个样式属性：border。border样式属性可以用在几乎所有的表单标签上，我们可以使用它来控制表单标签的4条边的大小、线形、颜色。2．修饰表单标签背景使用background样式属性可以控制表单标签的背景颜色、背景图片、背景图片的重复方式及位置，使用方法与前面学过的方法相同。例如，为一个文本框添加背景样式。#txt{ background-color:#0FF; /*设置背景色*/}3．改变表单标签的活动状态样式伪类的用法这里不再重复介绍，和任何普通标签一样，我们可以为表单标签设置2种状态的样式：一种是普通状态时，一种是将鼠标指针移动到标签上方时（即hover状态）。0102030405新建班级新建作业成绩统计布置作业学生扫码做小提示：生成的班级二维码，放在下一页ppt中即可。放入二维码后，记得取消“隐藏幻灯片”哦~扫码布置本课作业↑↑↑扫码布置作业wenjingketang扫码填写问卷定制更实用的教学资源对课件有修改、优化建议平台使用遇到问题想免费使用平台、免费建课扫码加小旌好友为您提供专属服务哦项目八CSS与浏览器兼容问题任务一

无序列表的兼容性任务二

浮动在IE下产生的双倍距离任务三

在IE6中图片下方有空隙产生任务四3像素问题任务五

浏览器不能自适应高度任务六margin值加倍问题任务一

无序列表的兼容性对于无序列表，我们在前面几个项目的案例中也使用过，该列表的特点是每一个列表项的前面不是以数字或者字母作为顺序标示，而是以黑色圆点（默认设置）作为标示。默认状态下，IE和火狐浏览器对于列表的显示也稍有区别。任务二

浮动在IE下产生的双倍距离浮动（float）这个属性在网页布局的时候经常使用，一般用在将<div>元素或者列表元素横向平铺的时候，这个元素使用后的显示效果在IE6和火狐下有些不同。任务三

在IE6中图片下方有空隙产生在日常的网页制作中，时常会遇到插入图片的问题，一般来说图片所在的<div>的高度如果与图片高度相同，那么在浏览器中预览时，图片下方应该是没有空隙的，然而在IE6中却是有空隙的。Dreamweaver中的效果火狐下效果IE6中的效果任务四3像素问题在制作网页的过程中，经常会用到下图所示的布局方式，如果使用浮动布局的话，在IE6中图像所在<div>与右侧的文字所在<div>之间会产生3px的间隙。解决方法：为两个<div>分别加上float:left;属性，并取消右侧<div>中的margin-left属性，这样后面的<div>也会跟着向左浮动。但这样需要为后面不需要向左浮动的<div>添加clear:left;属性，以清除其向左浮动属性。任务五

浏览器不能自适应高度我们知道，当将元素的height值设置为auto时，它会根据自身内容的高度而自动适应高度。但我们看看下面的情况。我们常常会将2个并列的模块放在一个父层里，由于里面2个栏目的高度不明确，所以父层的高度只能设为自动。任务六margin值加倍问题CSS样式中设置的margin值在IE6中显示时会加倍，这样有可能导致子层的宽度超过父层，让显示错位。对于以上问题，我们可以非常容易地解决。为第一个浮动元素的样式增加属性display:inline;（行内显示）即可。支撑知识点或许现在有些读者已经开始抱怨由于IE6和火狐，以及其他浏览器的不同，而要为它们分别设置CSS。其实在对CSS的标准支持方面，IE6并没有我们想象的那么可恶，关键在于IE和火狐的默认值不一样。掌握了这个技巧，你就会发现其实写出兼容火狐和IE浏览器的CSS并不是那么难。下面我们再来简单介绍一下与浏览器兼容性相关的知识。一、浏览器兼容性介绍1．基本概念浏览器兼容性问题又被称为网页兼容性或网站兼容性问题，指同一个网页在各种浏览器中的显示效果不一致而产生的浏览器和网页间的兼容问题，最常见的问题就是网页元素位置混乱、错位。2．产生原因出现浏览器兼容性问题的原因有多种，最常见的是不同浏览器所用内核及所支持的HTML等网页语言标准不同，还有一种可能是用户客户端环境不同，如分辨率不同。3．解决方案目前暂没有统一的能解决浏览器兼容性问题的方法。但很多专业设计师经过长时间的摸索，研究出了很多解决浏览器兼容性问题的方法，这些方法称之为“Hack补丁”。所谓Hack，就是利用各种过滤方法专门为特定浏览器定义样式，即称之为过滤器（Filter），从而实现在不同类型的浏览器中呈现相同的显示效果。二、解决浏览器兼容性问题的小技巧很多网页元素在不同浏览器中的显示效果不同，其根本原因在于它们在不同浏览器中的默认显示不一样。常见的有下面几种情况和解决方案。（1）默认情况下，IE有margin-left值，约为40px；火狐默认有padding-left值，也约为40px。通常我们使用通用选择器*来将网页中所有元素的外边界、边框和间隙重新定义为0。（2）关于网页居中的问题，IE默认使用text-align属性，值为center；火狐默认使用margin属性，左右边界值为auto。（3）在定义列表项或行文本的高度时，尽量避免使用height，而是用line-height属性间接定义。（4）不出现显示错误的大前提是一定要注意标签正确且完整嵌套。比如<dl><dt></dt><dd></dd></dl>中的<dt>不能单独存在，它必须依附在<dl>里面。（5）为每个标签完善属性。正是由于浏览器有默认值，为标签写属性的同时，相当于重新定义了默认值，所以可避免一些兼容性问题。0102030405新建班级新建作业成绩统计布置作业学生扫码做小提示：生成的班级二维码，放在下一页ppt中即可。放入二维码后，记得取消“隐藏幻灯片”哦~扫码布置本课作业↑↑↑扫码布置作业wenjingketang扫码填写问卷定制更实用的教学资源对课件有修改、优化建议平台使用遇到问题想免费使用平台、免费建课扫码加小旌好友为您提供专属服务哦项目九CSS标准流布局

——制作企业网站的新闻显示页面任务一

对页面进行整体布局——盒子模型任务二

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

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

最新文档

评论

0/150

提交评论