网页设计与制作 课件 （向隅） 项目3-5 使用表格布局网页、使用CSS样式美化网页、使用div+CSS布局网页_第1页
网页设计与制作 课件 （向隅） 项目3-5 使用表格布局网页、使用CSS样式美化网页、使用div+CSS布局网页_第2页
网页设计与制作 课件 （向隅） 项目3-5 使用表格布局网页、使用CSS样式美化网页、使用div+CSS布局网页_第3页
网页设计与制作 课件 （向隅） 项目3-5 使用表格布局网页、使用CSS样式美化网页、使用div+CSS布局网页_第4页
网页设计与制作 课件 （向隅） 项目3-5 使用表格布局网页、使用CSS样式美化网页、使用div+CSS布局网页_第5页
已阅读5页，还剩57页未读， 继续免费阅读

下载本文档

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

文档简介

任务3-1认识表格

任务3-2设置表格和单元格的属性

任务3-1认识表格1.表格的基本构成表格是网页设计制作中不可缺少的元素，它可以将各类网页元素有序地显示在页面上。表格由3个基本部件构成：(1)行：水平空间。(2)列：垂直空间。(3)单元格：行列相交处的空间。整张表格的边缘成为边框，单元格中的内容和边框之间的距离称为单元格边距(CellPad)，单元格和单元格之间的距离称为单元格间距(CellSpace)，如图3-1所示。2.创建和选择表格1)创建表格插入表格的位置必须是从一个新行开始，且表格独占一行。Dw中创建表格的步骤如下：(1)将光标置于要插入表格的位置，选择“插入”菜单中的“表格”选项或在“插入”面板的“常用”选项卡中单击“表格”按钮，打开“表格”对话框，根据需求设置表格初始属性，如图3-2所示。(2)单击“确定”按钮即可将表格插入页面，可输入表格内容，文字、图片。表格建立好后就可以向表格内添加元素了，如图像、文字和表格等，方法如同在Word文档中操作一样，添加文本，表格会随着增多而自动增高。在单元格中添加图像时，如果单元格的尺寸小于图像的尺寸，单元格会自动增高或增宽。在单元格中插入表格时，单元格中的表格叫作内嵌式表格。内嵌式表格中的单元格可以再拆分成多行或多列，并且可以无限制地插入，不过内嵌的表格越多，浏览器下载时间越长，所以内嵌表格最好不要超过三层。2)选取表格对表格进行编辑前，需要先选择表格。选择整个表格的方法：将鼠标光标移动到表格的任意边框上，当光标变成双向箭头形状时，单击鼠标左键，即可选择整个表格，如图3-4所示。3)选取行或列在选择表格时，可以通过鼠标直接选择表格的某一行或某一列，也可以同时选择多行或多列。(1)选择表格的一行。移动光标到表格的某一行左边框处，当鼠标光标变成向右的黑箭头时，单击鼠标即可选择该行，如图3-5所示。(2)选择表格的一列。移动光标到表格的某一列上边框处，当鼠标光标变成向下的黑箭头时，单击鼠标即可选择该列，如图3-6所示。若要选择多行或多列，可以配合“Ctrl”键和“Shift”键使用。4)选取单元格在选取单元格时，可以选择单个单元格，也可以选择一个单元格、单元格区域或不相邻的多个单元格。当某个单元格被选时，该单元格周围会出现黑色边框。单击表格中的某个单元格，按住鼠标左键从当前单元格上方开始向要连续选择单元格的方向拖动鼠标选择单元格，释放鼠标后，完成某个区域的单元格选取，如图3-7所示。在选择单元格前按住“Ctrl”键，然后单击需要选择的单元格，最后释放“Ctrl”键可选择多个不相邻的单元格，如图3-8所示。任务3-2设置表格和单元格的属性创建表格后，需要对表格元素进行一系列的操作，最常用的就是设置它的属性。1.设置表格属性在网页中加入表格后，可以对表格的布局、样式等进行详细的设置，以使表格中的布局可以精确地达到要求。选定整个表格后，属性面板会变成表格属性面板，从选项中设置各个参数，如图3-9所示。2.设置单元格属性选定单元格后，属性面板会变成单元格属性面板，如图3-10所示。任务4-1认识CSS

任务4-2创建和使用CSS样式

任务4-3设置CSS样式属性

任务4-4认识CSS选择器任务4-1认识CSSCSS非常灵活，既可以嵌入在HTML文档中，也可以是一个单独的外部文件，如果是独立的文件，则必须以.css为后缀名。1. CSS的优势(1)内容和样式分离，使网页设计更加明了、简洁。(2)弥补HTML对标签属性控制的不足。(3)可精确控制网页布局。(4)可提高网页效率，增强易用性和扩展性。(5)增强网页特效，提升用户体验。2. CSS的核心基础1) CSS样式规则使用CSS对网页进行修饰，首先要了解CSS样式规则。CSS样式语法格式如下：选择器{属性1:属性值1;属性2:属性值2;…;属性n:属性值n}其中，选择器可以是标签选择器、id选择器、类选择器和伪类选择器。选择器严格区分大小写，属性和属性值不区分大小写。属性和属性值以键值对的形式出现。2)引入CSS样式表使用CSS修饰网页，需要在HTML文档中引入CSS样式表，CSS提供了4种引入方式，分别是行内式、内嵌式、外链式和导入式。(1)行内式。行内式也被称为内嵌样式，是通过标签的style属性来设置标签的样式，其基本语法格式如下：<标签名style="属性1:属性值1;属性2:属性值2;...;属性n:属性值n">内容</标签名>上述语法中，style是标签的属性，实际上任何HTML标签都拥有style属性，用来设置行内式。(2)内嵌式。内嵌样式是将CSS代码集中写在HTML文档的<head>头部标记中，并且用<style>标签定义。其基本语法格式如下：在上述语法中，<style>标签一般位于<head>标签中的<title>标签之后。(3)外链式。外链式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过<link/>标签将外部样式文件链接到HTML文档中。其语法格式如下：其中：① href：定义所链接外部样式表文件URL。② type：定义所链接文档的类型。③ rel：定义当前文档与被链接文档之间的关系。(4)导入式。导入式与外链式相同，都是针对外部样式表文件的，但它使用的是@import语句。其基本语法格式如下：该语法中，style样式标签内还可以存放其他的内嵌样式，但@import语句需要位于其他内嵌样式的上面。大多数网站都是采用外链式引入外部样式表，主要原因是它们的加载方式不同。当一个页面被加载时，外链式的样式会被同时加载，而导入式的样式需要等到页面全部下载完后才被加载，这样会造成不好的用户体验。3) CSS基础选择器要想将CSS样式应用于特定的HTML标签，首先需要找到该目标元素。在CSS中，执行这一任务的样式规则被称为选择器。CSS中的基础选择器有标签选择器、类选择器、id选择器和通配符选择器。(1)标签选择器。标签选择器是指HTML标签名称作为选择器，其基本的语法规则如下：标签名{属性1:属性值1;属性2:属性值2;…;属性n:属性值n}所有的HTML标签名都可以作为标签选择器。标签选择器的最大优点是能快速为页面中同类型的标签统一样式，其缺点是不能设计差异化的样式。(2)类选择器。类选择器使用“.”(英文点号)进行标识，后面紧跟类名，而类名是与标签名不同的一串字符。其基本语法格式如下：.类名{属性1:属性值1;属性2:属性值2;…;属性n:属性值n}在HTML中，类名为class的属性值，大多数HTML元素都可以定义class属性。类选择器的优点是可以为元素对象定义单独的样式。注意：①类名的第一个字符不能使用数字，且严格区分大小写。②一般类名采用小写英文字符。(3) id选择器。id选择器使用“#”进行标识，后面紧跟id名，其id名不能为标签字符串。id选择器的语法格式如下：#id标签{属性1:属性值1;属性2:属性值2;…;属性n:属性值n}在HTML中，id名即为id的属性值，大多数HTML元素都可以定义id属性，元素的id名是唯一的，只能对应于文档中某一个具体的元素。(4)通配符选择器。通配符选择器用“*”号表示，它是所有选择器中使用范围最广的，能匹配页面中所有的元素，其基本语法格式如下：*{属性1:属性值1;属性2:属性值2;…;属性n:属性值n}任务4-2创建和使用CSS样式1.“CSS设计器”面板在DreamweaverCC中，可以通过“CSS设计器”面板来创建样式。CSS设计器是一个集成面板，支持可视化创建CSS文件、规则、集合属性以及媒体查询，如图4-3所示。1)源“源”组中列出了所有与文档有关的CSS样式表。在这个组中，可以创建CSS样式并将其附加到文档中，如图4-4所示。2) @媒体“@媒体”组用于列出“源”组中选中的规则的全部媒体查询，媒体查询可以向不同设备提供不同的样式。3)选择器“选择器”组用于列出“源”组中选择的规则的全部选择器，如果没有选择CSS样式或媒体查询，则此组将显示文档中的所有选择器，如图4-5所示。4)属性“属性”组可为指定的选择器设置属性，主要有布局、文本、边框、背景及其他属性，如图4-6所示。2.创建CSS样式选择器CSS样式选择器中包括标签选择器、类选择器和id选择器。1)标签选择器标签选择器是现有的HTML标签(或称标记)。用CSS控制这些标签，会改变标签的默认样式。其语法格式如下：标签名称{属性:属性值1;属性:属性值2;…}创建标签选择器的具体操作方法如下：(1)完成网页的内容架构。(2)单击“CSS设计器”面板中“源”组右侧的“+”按钮，在弹出的菜单中选择“创建新的CSS文件”，弹出“创建新的CSS文件”对话框。(3)在弹出的对话框中，在“文件/URL(F):”文本框中输入想要使用的CSS文件名，并可通过

按钮选择样式文件保存位置。此时会在“文档”窗口添加名为“style.css”选项卡，在“源代码”中添加链接<linkhref="CSS/style.css"rel="stylesheet"type="text/css">，如图4-8所示。(4)选择新建的“style.css”，在“选择器”组中单击右侧的“+”按钮添加选择器，选择器会自动添加当前光标所在位置的HTML标签，如图4-9所示。用户也可以自行修改需要使用的HTML标签。(5)在“属性”组中单击“Text(文本)”栏，为网页的正文添加所需要的样式，如图4-10所示，对h2标签选择器添加了“font-family”“text-decoration”等属性，分别设置了文字的字体、样式。对p标签选择器添加了“font-family”“font-size”和“text-indent”等属性，分别设置了文字的字体、字体大小和样式，如图4-11所示。(6)单击“文档”窗口的“style.css”选项卡，可以看到h2标签和p标签的CSS样式代码，如图4-12所示。(7)保存网页HTML文件和CSS样式文件，在浏览器中预览页面，即可查看整个网页的字体类型等发生改变。2)类选择器当希望某一个或某几个元素的外观与网页上的其他相关标签有所不同时，设计者就可以使用类选择器。类选择器可以应用到网页中任意的元素上，还能更精确地控制网页中的某一元素。很多时候在CSS中看到名称前以“.”开头，这个英文句点开关就表示CSS的类样式，类是可以被多次调用的。创建类选择器的具体操作方法如下：(1)与创建标签选择器相同，在创建类选择器之前，需要先设计网页内容，并在“CSS选择器”面板中创建或选择“源”组中对应的CSS文件。(2)在“选择器”组中单击“+”按钮添加选择器，在显示的文本框中输入“.one”文本，如图4-14所示。(3)在“属性”组中单击“文本”栏，为网页的正文添加所需要的样式，如图4-15所示，添加了“color”“font-weight”和“font-size”，设置了文字的颜色、字体粗细和字体大小。(4)在“文档”窗口选中想要应用该类的网页内容，右击鼠标，从弹出的菜单中选择“CSS样式”“one”菜单命令。(5)保存网页HTML文件和CSS样式文件，在浏览器中预览页面，即可查看整个网页的字体类型等发生改变。3) id选择器创建id选择器的具体操作方法如下：(1)与创建标签选择器、类选择器相同，在创建id选择器之前，需要先设计网页内容，并在“CSS选择器”面板中创建或选择“源”组中对应的CSS文件。(2)在“选择器”组中单击“+”按钮添加选择器，在显示的文本框中输入“#two”文本，如图4-17所示。(3)在“属性”组中单击“布局”栏和“文本”栏，为网页的正文添加所需要的样式，如图4-18所示，添加了“color”和“float”，设置了文字的颜色和文字的位置。(4)在“文档”窗口选中想要应用该类的网页内容，右击鼠标，从弹出的菜单中选择“CSS样式”“.one”菜单命令。(5)保存网页HTML文件和CSS样式文件，在浏览器中预览页面，即可查看整个网页的字体类型等发生改变。任务4-3设置CSS样式属性创建CSS样式表的过程，就是对各种CSS属性的设置过程，因此了解和掌握属性设置非常重要。在DreamweaverCC中，为了方便初学者学习CSS样式属性，提供了可视化操作，那就是“CSS设计器”面板上的属性组，该组中可以设置“布局”“文本”“边框”“背景”“其他”5种类型的属性。DreamweaverCC实现CSS属性设置功能是完全可视化的，无须编写代码。1.设置布局样式在“属性”组的“布局”栏中，可以设置页面元素在页面上的放置位置。在应用填充与边距设置时，将设置应用于元素的各条边上，同时可以应用定位来确定元素在页面上的相关位置，如图4-19为CSS面板的“布局”栏。定义样式设置可以控制页面上的元素布局。常用的属性如下：(1)“width”(宽度)和“height”(高度)：设置元素的尺寸大小，默认值为auto，可以使用px、cm等单位确定具体的宽度和高度。(2)“margin”(边界)：设置对象的外边距。(3)“padding”(填充)：设置对象的内容距四边的距离，即内边距，定义元素内容和边框之间的空间大小。(4)“float”(浮动)：移动元素并将其放置在页面边缘的左侧或右侧，其他环绕移动的元素则保持正常。该属性是实现div+CSS布局的关键。(5)“clear”(清除)：定义元素的哪一边不允许有层。如果层出现在被清除的那一边，则(设置了清除属性的)元素将移动到层的下面。“margin”和“padding”很重要，它们与盒模型有关系。2.设置文本样式在网页设计过程中，文本的CSS样式是使用最频繁的。在“属性”组的“文本”栏中，可以通过定义CSS样式来对文本样式进行设置，如图4-20所示。3.设置边框样式在“属性”组的“边框”栏中，能够设置网页标签4个边框的各种属性。“边框”分为样式(style)、宽度(width)、颜色(color)等，图4-21为CSS面板的“边框”栏。4.设置背景样式合理使用“背景”样式设置网页背景可以使网页更加美观。一般来说，背景颜色或背景图像颜色深时，文字颜色应该偏浅；背景颜色或背景图像颜色浅时，文字颜色应该偏深。这样设置的目的是容易阅读，如图4-22所示。常用的背景样式属性如下：1)背景图(1)“background-color”(背景颜色)：默认值为transparent，表示背景颜色为透明，也可以用RGB颜色值、十六进制颜色值和颜色名称作为属性值。(2)“background-image”(背景图)：设置要用的背景图像，需要指定背景图的路径。(3)“background-position”(背景位置)：设置背景图像的位置。(4)“background-repeat”(重复方式)：设置背景图像是否平铺，其值有repeat(默认值，表示纵向和横向平铺)、no-repeat(不平铺)、repeat-x(仅横向平铺)、repeat-y(仅纵向平铺)。(5)“background-attachment”(滚动方式)：设置背景图像是否固定或随着页面的其余部分滚动，取值scroll(默认值，随内容滚动)和fixed(固定不滚动)。2)相框阴影(1)“box-shadow”(相框阴影)：为相框添加一个或多个阴影。(2)“h-shadow”(水平阴影)：设置水平阴影。(3)“v-shadow”(垂直阴影)：设置垂直阴影。(4)“blur”(模糊)：设置模糊的距离。(5)“spread”(扩展)：改变阴影的尺寸。(6)“color”(阴影的颜色)：设置阴影的颜色。(7)“inset”(向内)：将外部阴影改为内部阴影。5.设置其他样式“属性”组的“其他”栏，主要是对列表样式表进行设置，它可以设置出非常丰富的列表样式，如图4-23所示。任务4-4认识CSS选择器1.关系选择器关系选择器可以更精确地控制元素样式。CSS中的关系选择器主要包括子元素选择器和兄弟选择器，其中子元素选择器由符号“>”连接，兄弟选择器由符号“+”和“~”连接。1)子元素选择器子元素选择器主要用来选择某个元素的第一级子元素，即只能选择作为某元素子元素的元素。其格式如下：标签>标签1{}标签1为标签的子元素，标签包含标签1。2)兄弟选择器兄弟选择器是用来选择与某元素位于同一个父元素之中，且位于该元素之后的兄弟元素。兄弟元素选择器分为相邻兄弟选择器和普通兄弟选择器两种。(1)相邻兄弟选择器。相邻近兄弟选择器使用“+”来连接前后两个选择器。选择器中的两个元素有同一个父元素，且第2个元素必须紧跟第1个元素。(2)普通兄弟选择器。普通兄弟选择器使用“~”来连接前后两个选择器。选择器中的两个元素有同一个父亲且第2个元素不必紧跟第1个元素。2.结构化伪类选择器结构化伪类选择器允许开发者根据文档结构来指定元素的样式。CSS3中增加了许多新的结构化伪类选择器，方便网页设计者精准地控制元素样式。常用的结构化伪类选择器有以下6类。1) :root选择器:root选择器用于匹配文档根标签，在HTML中，根标签始终是html标签，即使用“:root选择器”定义的样式，对所有页面标签有效。对于不需要该样式的标签，可以单独设置样式进行覆盖。2) :not选择器如果对某个结构标签使用样式，而又想排除这个结构标签下面的子结构标签，让它不使用这个样式，则可以使用:not选择器。3) :only-child选择器:only-child选择器用于匹配属于某父标签的唯一子标签的标签，也就是说，如果某个父标签仅有一个子标签，则使用“:only-child选择器”可以选择这个子标签。4) :first-child选择器和:last-child选择器:first-child选择器和:last-child选择器分别用于为父标签中的第一个或者最后一个子标签设置样式。5) :nth-child(n)和:nth-last-child(n)选择器使用:first-child选择器和:last-child选择器可以选择某个父元素中第一个或最后一个子元素，但是如果用户想要选择第2个或倒数第2个子元素，这两个选择器就不起作用了。为此，CSS3引入了:nth-child(n)和:nth-last-child(n)选择器，它们是:first-child选择器和:last-child选择器的扩展。6) :nth-of-type(n)和:nth-last-of-type(n)选择器:nth-of-type(n)和:nth-last-of-type(n)选择器用于匹配属于父元素的特定类型的第n个子元素和倒数第n个子元素。3.伪元素选择器所谓伪元素选择器，是针对CSS中已经定义好的伪元素使用的选择器。CSS中常用的伪元素选择器有  :before选择器和 :after选择器。1) :before选择器:before选择器用于在被选元素的内容前面插入内容，必须配合content属性来指定要插入的具体内容。其格式为：2) :after选择器:after选择器用于在某个元素之后插入一些内容，使用方法与:before选择器相同。任务5-1布局概述

任务5-2布局常用属性

任务5-3布局类型任务5-1布局概述网页布局是指网页上的各种元素，如文字、图片、视频、按钮等的展示和组织方式。网页布局的目的是使页面的内容更易于理解和浏览，同时增强网站的视觉吸引力。div + CSS是Web的一种标准，也是一种网页的布局方法。div + CSS布局是采用<div>标签配合CSS实现对网页标签定位的一种布局方法。此种定位方式不同于传统的表格(table)布局定位方式，它可真正实现网页内容与表现相分离的效果。这里div为division的缩写，意思为划分，也可以称为层或区块。通过合理的网页布局设计，可以让页面内容更加有序、整洁，并且使用户更容易找到自己需要的信息。div + CSS布局的主要优点如下：(1)网页和表现内容分离，便于站点重构页面。(2)结构清晰，对搜索引擎更加友好。(3)便于Web项目开发分工协作。1. div标签<div>标签常用于对块进行标记，以便通过样式表来对<div>标签标记块进行格式化。<div>标签可以把文档分割为独立的、不同的部分。如果用id或class来标记<div>标签，那么该标签的作用会变得更加明显。1) <div>标签的基本语法<div>标签的基本语法格式如下： <div

id="id选择符">文字或图像</div>或 <divclass="类选择符">文字或图像</div>2) <div>标签的常用属性<div>标签的常用属性如下：(1) position属性：表示层的定位方式。(2) left和top属性：定义层的位置，与之并列的还有right和bottom属性，这4个属性用来设置层的位置。(3) width和height属性：定义层的宽度和高度。(4) float属性：定义层的浮动方式。(5) clear属性：定义清除属性，表示层是否允许在某个元素的周围有浮动元素，即是否去掉某个位置的浮动元素。(6) z-index属性：设置区域的上下层关系，相当于三维空间的z坐标，z-index属性值越大，其位置就越高。表5-1为<div>标签的属性及说明。2. span标签<span>标签与<div>标签一样也是一个容器元素，被广泛运用在网页制作中。<span>标签用来组合文档中的行内元素。<span>元素是一个内联元素，它包围的元素不会自动换行。<span>标签没有固定的格式表现，当对它应用样式时，它才会产生视觉上的变化。<span>标签的基本语法如下：<span

id="指定样式名称">文本</span>3.使用div+CSS布局的流程为了提高网页制作的效率，布局时通常要遵循一定的布局流程，使用div+CSS布局的具体流程如下：(1)确定页面的版心宽度。版心是指浏览器内显示内容的有效面积，显示内容在浏览器窗口中一般是居中显示的。浏览器显示内容的最大面积是由显示器的分辨率决定的。目前显示器的分辨率大多在1024 × 768px(像素)以上，可设置版心宽度1000px。在设计网站时应尽量适配主流的屏幕分辨率。常见网页的宽度值为960px、980px、1000px和1200px等。(2)分析页面中的模块。在运用CSS布局之前，首先要对页面有一个整体的规划，用笔画出页面的草图，页面中包括的模块及模块间的关系。(3)控制网页的各个模块。当分析完页面的布局后，就可以运用盒子模型的原理，通过div + CSS布局来控制网页的各个模块了。初学者在制作网页时，一定要养成分析页面布局的习惯，这样可以提高网页制作的效率。任务5-2布局常用属性div + CSS布局通常有3种方式，分别是静态布局、浮动布局和定位布局。1.静态布局静态布局，其特点是将网页中各种布局标签按照其在HTML代码中的顺序从上而下依次显示。块级元素生成的是一个矩形框，它按照在文档中出现的位置正常定位显示，没有偏移量。在静态布局的网页中，用户无须设置网页各种布局标签的边距属性。例如，一个典型的HTML文档，其<body>标签中的内容通常由头部(header)、导航栏(nav)、内容(content)和页尾(footer)4个部分组成，使用<div>标签建立这4个部分所在的层，代码如下：<divclass="header1">网页的头部标签，通常包括网页的Logo、Banner和搜索框等</div><divclass="nav1">网页的导航条标签，完成站点导航的超链接。</div><divclass="content1">网页的内容标签，主要包括网站的各种版块栏目</div><divclass="footer1">网页的页尾标签，主要包含网页的版权信息及友好链接等内容</div>4个部分及<body>的样式代码如下：静态布局的显示效果如图5-6所示。静态布局的优点是结构简单，与各浏览器兼容性好，缺点是无法实现左右分栏的样式效果。2.浮动布局浮动布局的作用是，定义网页布局标签脱离网页的流动布局结构后显示的方向。在网页设计中，浮动布局可应用于多个方面，如实现文本环绕图像或实现浮动的块状标签布局。它是目前最主要的布局方法。为元素设置浮动，可以使页面元素变得整齐有序。1)认识浮动浮动是指设置了浮动属性的元素会脱离标准文档流的控制，移动到其父元素中指定位置的过程。定义浮动的基本语法格式如下：选择器{float:属性值;}float常用的属性值有3个，如表5-2所示。2)清除浮动运用clear属性清除浮动。其基本语法格式为：选择器{clear:属性值;}clear的常用属性值有3个，如表5-3所示。运用clear属性只能清除元素左右两侧浮动的影响。然而在制作网页时，经常会遇到一些特殊的浮动影响。3.定位布局在CSS中，使用定位属性可以实现网页中元素的精确定位。元素的定位属性主要包括定位模式和边偏移两部分。1)定位模式position属性用于定义元素的定位模式，其基本语法格式如下：选择器{position:属性值；}position的常用属性值如表5-4所示。2)边偏移通过边偏移属性top、bottom、left或right来精确定义定位元素的位置，其取值为不同单位的数值或百分比，如表5-5所示。任务5-3布局类型使用div+CSS可以进行多种类型的布局，常见的布局类型有单列布局、双列布局、三列布局3种类型。本任务将对这3种布局进行详细讲解。1.单列布局单列布局是网页布局的基础，所有复杂的布局都是在此基础上演变而来的。如图5-9是一个单列布局页面的结构示意图。从图5-9中可以看出，单列

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

温馨提示

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

最新文档

评论

0/150

提交评论