Web前端设计基础教程高职PPT完整全套教学课件_第1页
Web前端设计基础教程高职PPT完整全套教学课件_第2页
Web前端设计基础教程高职PPT完整全套教学课件_第3页
Web前端设计基础教程高职PPT完整全套教学课件_第4页
Web前端设计基础教程高职PPT完整全套教学课件_第5页
已阅读5页，还剩468页未读， 继续免费阅读

下载本文档

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

文档简介

Web前端设计基础教程

01HTML基础CSS基础JavaScript基础目录页

ContentsPage综合实例020304模块一HTML基础模块一HTML基础HTML是创建网页的标准标记语言,是描述网页的一种语言规范。网页中的文字、标题、段落、列表、图片、超链接、音视频和交互表单等内容是通过HTML相应标记标签来描述的,浏览器也是根据HTML标签来诠释网页内容的。因此,掌握HTML是进行网页设计的前提。1.1网站开发综述1.1.1网站的基本概念1.WWWWWW是WorldWideWeb的缩写,又称为万维网、Web或3W,它是由互相链接的超文本组成的系统,通过互联网访问。在这个系统中,每个有用的事物称为资源,并由一个全局统一资源标识符进行标识;这些资源在互联网上通过超文本传输协议传送给客户端,而后者通过单击超链接或在Web浏览器地址栏中输入统一资源定位器或网址来获得资源、浏览信息,也可以提交数据。1.1网站开发综述1.1.1网站的基本概念2.网站网站也称为站点,它是指存放在网络服务器上的完整信息的集合体,包含一个或多个网页,这些网页以超链接方式链接在一起,构成一个整体,描述一组完整的信息。1.1网站开发综述1.1.1网站的基本概念3.网页网页(Webpage)是存放在Web服务器上供客户端浏览的文件,可在Internet上传输。网页是按照网页文档规范编写的一个或多个文件,这种格式的文件可由超文本标记语言创建,能将文字、图片、声音和音(视)频等各种多媒体文件组合在一起,并保存在Web服务器中。1.1.2静态网页与动态网页1.静态网页静态网页是指客户端发出URL请求给WWW服务器后,服务器不加处理而直接发送到客户端的网页,其处理机制如图1-1-1所示。静态网页通常由HTML/CSS语言编写。1.1网站开发综述图1-1-1静态网页处理机制1.1.2静态网页与动态网页2.动态网页动态网页是网页内容随不同用户、不同的访问需求而发生变化,网页中不仅包含HTML代码,还包含在Web服务器端执行的脚本程序代码。客户端发出所浏览的动态网页URL请求后,服务器加载所请求的页面并运行此服务器端的脚本代码,然后将运行后的动态结果转换为静态代码后与页面中的原静态内容一同发送到客户端浏览器中,再由浏览器渲染呈现,其处理机制如图1-1-2所示。1.1网站开发综述1.1.2静态网页与动态网页1.1网站开发综述图1-1-2动态网页处理机制1.1.3Web前端与后台1.1网站开发综述1.Web前端前端通常指Web前端,是Web应用中用户通过浏览器可以浏览或操作的Web页面。所涉及的内容包含Web页面的结构、外观视觉和Web层面的交互。Web前端开发也是主要针对Web的结构、表现和行为进行的,与之对应的语言开发工具包括HTML、CSS和JavaScript等。1.1.3Web前端与后台1.1网站开发综述2.Web后台Web后台是指运行在Web服务器端的脚本代码,主要实现数据库操作、Web应用程序的业务逻辑等功能。常用Web前端与后台技术如图1-1-3所示。图1-1-3常用Web前端与后台技术1.1.4网站开发技术路线1.1网站开发综述1.网站规划与设计1)网站的定位

在网站规划中,要确定建站的目的、网站用户和网站内容,明确网站的定位,确定网站的主题类型。常用网站主题类型有新闻、购物商城、教育、生活、科技等。网站定位不能过于宽泛,更不能包罗万象,漫无边际,要紧紧围绕用户需求来确定,紧扣主题,并突出个性和特色。1.1.4网站开发技术路线1.1网站开发综述1.网站规划与设计2)网站的风格风格指的是网站的整体形象给浏览者的综合感受,包括版面布局、浏览方式、交互性和文字等诸多因素。网站风格要体现自己的特色,独树一帜。通过网站的某一点,如文字、色彩、技术等,能让浏览者明确分辨出此部分就是网站所独有的。1.1.4网站开发技术路线1.1网站开发综述1.网站规划与设计3)网站的CICI是指通过视觉来统一企业的形象。网站和实体公司一样,也需要整体的形象包装和设计。准确的、有创意的CI设计对网站的宣传推广有事半功倍的效果。当网站主题和名称定下来之后,就需要对网站的CI进行设计。1.1.4网站开发技术路线1.1网站开发综述1.网站规划与设计3)网站的CI网站的CI设计主要包括：(1)设计网站的标志(logo)(2)设计网站的标准色彩(3)设计网站的标准字体(4)设计网站宣传标语1.1.4网站开发技术路线1.1网站开发综述1.网站规划与设计4)网站的栏目网站栏目的实质是一个网站的大纲索引。网站栏目规划的主要任务就是对网站题材内容进行分类和筛选,并组织成合理的逻辑结构。设计网站栏目时要注意如下几点:(1)设计网站的栏目时要紧扣网站主题。(2)设计一个最近更新或站点指南栏目。(3)设定一个可以双向交流的栏目。1.1.4网站开发技术路线1.1网站开发综述1.网站规划与设计5)网站的目录结构在规划网站目录结构时,通常遵循以下规则:(1)按栏目内容分别建立文件夹。(2)资源按类存放在不同的文件夹中,文件夹层次不要太深,一般不要超过3层,以免系统维护时查找麻烦。(3)避免用中文命名文件或文件夹。(4)在每一个主目录下都建立独立的Images目录。(5)数据库文件单独放置。1.1.4网站开发技术路线1.1网站开发综述1.网站规划与设计6)网站的链接结构常用的网站链接结构有以下几种类型:(1)树状链接结构。树状链接结构类似于Windows文件目录结构,首页链接指向一级页面,一级页面链接指向二级页面。(2)网状链接结构。网状链接结构类似于网络服务器的链接,每个页面相互之间都建立有链接。这种链接结构的优点是浏览方便,随时可以到达自己喜欢的页面。缺点是链接太多,容易使浏览者迷路,搞不清自己在什么位置,看了多少内容。1.1.4网站开发技术路线1.1网站开发综述2.常用网页编辑工具(1)HBuilderX。HBuilderX中文版是一款由DCloud(数字天堂)全新推出的Web开发工具,简称HX。其主要特点如下:①轻巧②极速③Vue开发强化④小程序支持⑤markdown利器⑥清爽护眼⑦强大的语法提示⑧高效极客工具⑨扩展性1.1.4网站开发技术路线1.1网站开发综述2.常用网页编辑工具(2)VisualStudioCode(简称VSCode)。VSCode是微软开发的一款免费开源的现代化轻量级代码编辑器。VSCode的编辑器界面依然是微软经典的VS风格,支持几乎所有主流开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码对比等,支持插件扩展,并针对网页开发和云端应用开发做了优化。1.1.4网站开发技术路线1.1网站开发综述2.常用网页编辑工具(3)Dreamweaver。Dreamweaver是Adobe公司推出的所见即所得的网页编辑工具。Dreamweaver采用多种先进技术,能高效创建极具表现力和动感效果的网页,使网页创建过程变得快捷简单。1.1.4网站开发技术路线1.1网站开发综述2.常用网页编辑工具(4)SublimeText。SublimeText是一款跨平台代码编辑器,可同时支持Windows、Linux、MacOSX等操作系统。Sublime

Text具有漂亮的用户界面和强大的功能,如代码缩略图、Python插件、代码段等。1.1.5HTML简介1.1网站开发综述1.HTML的概念HTML即超文本标记语言,其英文全称为hypertextmarkuplanguage,是创建网页的标准标记语言,是描述网页的一种语言规范。简易性可扩展性平台无关性通用性010203041.1网站开发综述HTML的主要特点如下：1.1.5HTML简介2.HTML的特点1.1.5HTML简介1.1网站开发综述3.HTML标签HTML标记标签通常称为HTML标签(HTMLtag)。在网页中,HTML标签用来标记网页的不同部分,浏览器在执行网页时,会依据标签来处理其中的内容。HTML标签是由尖括号包围的关键词,如<html>。HTML标签通常是成对出现的,如<b>和</b>，标签对中的第一个标签是开始标签,第二个标签是结束标签,开始标签和结束标签也被称为开放标签和闭合标签。例如:<标签>内容</标签>。1.1.5HTML简介1.1网站开发综述随着HTML的广泛应用,HTML出现了许多版本,目前版本为HTML5,各版本如表1-1-1所示。表1-1-1

HTML各版本4.HTML版本1.2

常用标签HTML是一种规范、一种标准,它通过标记符号来标记要显示的网页中的各个部分。HTML文档通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容,如文字如何处理、画面如何安排、图片如何显示等。浏览器按顺序阅读网页文件,然后根据标记符解释和显示其标记的内容。HTML常用标签如表1-2-1所示。1.2常用标签表1-2-1HTML常用标签1.2.1文档标题1.2常用标签<title>称为标题标签,位于<head>与</head>标签中,用于在浏览器的标题栏中显示网页的主题,也用于搜索引擎显示搜索结果。当用户将网页加入书签或保存时,标题也作为该页面的标志或文件名。其格式如下:<title>标题名</title>1.2.2段落1.2常用标签段落标签<p>…</p>用于定义网页的一个段落。它会使后面文字换到下一行,并使两段之间多加一个空行,相当于两个<br/>标签(换行标签),其格式如下:<palign="left|center|right">文字</p>1.2.2段落1.2常用标签【例1-2-1】

列出包含<p>标签的多种对齐属性,代码如下,效果如图1-2-1所示。

图1-2-1段落标签示例1.2.3文本格式化1.2常用标签使用<strong>标签或<b>标签都可以实现文本的加粗效果。在网页中,<b>标签是一个实体标签,它所包围的字符将被设为bold(粗体),而<strong>标签是一个逻辑标签,它的作用是加强字符的语气,主要实现强调效果。1.粗体标签在HTML中,使用<em>、<i>标签可以实现文本的斜体效果。其中,i是英文italic(斜体)的缩写,em是英文emphasis(强调)的缩写。2.斜体标签1.2.3文本格式化1.2常用标签在HTML中,使用<del>标签或<s>标签可以实现文本的中划线效果。del是英文delete(删除)的缩写,s是英文strikethrough(删除线)的缩写。这两个标签的显示效果是相同的,但推荐使用<del>标签来实现对文本添加中划线。3.中划线标签使用<ins>标签或<u>标签可以实现文本的下划线效果。其中,ins是英文insert(插入)的缩写,u是英文underline(下划线)的缩写。4.下划线标签1.2.3文本格式化1.2常用标签使用<sup>标签可以实现文本的上标效果。5.上标标签使用<sub>标签可以实现文本的下标效果。6.下标标签内容标题(headin<h6>为最小的标题。g)是通过<h1>…<h6>标签进行定义的。<h1>为最大的标题,<h6>为最小的标题。7.标题标签1.2.3文本格式化1.2常用标签8.空格HTML提供了多种空格实体。(1)不换行空格(2)半角空格(3)全角空格1.2.3文本格式化1.2常用标签<span>标签用于对文档中的行内元素进行组合。当对它应用样式时,它才会产生视觉上的变化。如果不对<span>应用样式,那么<span>元素中的文本与其他文本不会有任何视觉上的差异。<span>标签提供了一种将文本的一部分或文档的一部分独立出来的方式。9.<span>标签1.2.3文本格式化1.2常用标签在HTML中,使用<big>标签可以实现字体的变大,使用<small>标签可以实现字体的变小。【例1-2-2】文本格式标签示例,代码如下,效果如图1-2-2所示。10.字号标签1.2.3文本格式化1.2常用标签10.字号标签图1-2-2文本格式标签示例1.2.4超链接1.2常用标签超链接是网页中使用频繁的HTML元素,网站的各页面、同一页面的不同部分都可由超链接串接而成。单击超链接可以实现页面之间、同一页面的不同内容之间的跳转。将鼠标指针移动到超链接时,鼠标指针会变成小手形状。默认情况下,超链接以以下形式出现在浏览器中:一个未访问过的超链接显示为蓝色字体并带下划线;访问过的超链接显示为紫色并带下划线;单击超链接时,超链接显示为红色并带下划线。根据所链接的目标,超链接可分为页面超链接、锚点超链接、电子邮件超链接等。1.2.4超链接1.2常用标签(1)href属性为超文本引用,它的值为一个URL,是目标资源的有效地址。页面文件目标地址又分为相对地址和绝对地址。(2)target属性值如下:①_blank。②_parent。③_self。④_top。1.2.4超链接1.2常用标签【例1-2-3】超链接示例,代码如下,效果如图1-2-3所示。图1-2-3超链接示例1.2.5图像1.2常用标签网页中的图像是不可缺少的元素,HTML使用图像标签可将图像加入网页中。图像标签的格式如下:1.2.5图像1.2常用标签【例1-2-4】图像标签示例,代码如下,效果如图1-2-4所示。图1-2-4图像标签示例1.2.6列表1.2常用标签1.无序列表无序列表前导符号无次序,是用黑点、圆圈、方框等一些特殊符号标识的。创建无序列表时,使用HTML的<ul>标签和<li>标签来标记。其中,<ul>标识一个无序列表的开始,<li>标识一个无序列表项。格式如下:1.2.6列表1.2常用标签1.无序列表【例1-2-5】无序列表示例,代码如下,效果如图1-2-5所示。图1-2-5无序列表示例1.2.6列表1.2常用标签2.有序列表有序列表为具有特定编号顺序的列表项的集合,使用<ol>标签建立有序列表,列表项用<li>标签定义。格式如下:1.2.6列表1.2常用标签2.有序列表type属性值如表1-2-2所示。表1-2-2type属性值1.2.6列表1.2常用标签2.有序列表【例1-2-6】有序列表示例,代码如下,效果如图1-2-6所示。图1-2-6有序列表示例1.2.6列表1.2常用标签3.自定义列表自定义列表是项目及其注释的组合。自定义列表是由<dl>标签、定义列表中的条目<dt>标签(definition

title,定义标题)和<dd>标签(definition

description,定义描述)创建的。格式如下:1.2.6列表1.2常用标签3.自定义列表【例1-2-7】自定义列表示例,代码如下,效果如图1-2-7所示。1.2.6列表1.2常用标签3.自定义列表【例1-2-7】图1-2-7自定义列表示例1.2.6列表1.2常用标签3.自定义列表【例1-2-8】自定义嵌套列表示例,代码如下,效果如图1-2-8所示。1.2.6列表1.2常用标签3.自定义列表【例1-2-8】图1-2-8自定义嵌套列表示例1.3.1表格元素1.3表格在HTML中,表格由<table>标签来定义,每个表格均有若干行(由<tr>标签定义),每行被分割为若干单元格(由<td>标签定义)。td指表格数据(tabledata),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等。1.3.1表格元素1.3表格表格基本格式如下:1.3.1表格元素1.3表格表格标签如表1-3-1所示。表1-3-1表格标签1.3.1表格元素1.3表格表格中各元素效果如图1-3-1所示。border属性为表格边框宽度,单位为像素,值默认为0。表格背景默认为白色,可通过设置bgcolor属性来设定表格背景颜色。图1-3-1表格元素1.3.1表格元素1.3表格【例1-3-1】表格示例一,设计效果如图1-3-2所示。图1-3-2表格示例一1.3.1表格元素1.3表格【例1-3-1】代码如下:1.3.1表格元素1.3表格【例1-3-2】表格示例二,设计效果如图1-3-3所示。图1-3-3表格示例二1.3.1表格元素1.3表格【例1-3-2】代码如下:具体的代码见P23-24.1.3.1表格元素1.3表格【例1-3-3】表格示例三,设计效果如图1-3-4所示。图1-3-4表格示例三具体的代码见P24-26.1.3.2表格项目1.3表格本项目主要完成一个在线计算器的布局,最终效果如图1-3-5所示。1.项目介绍图1-3-5在线计算1.3.2表格项目1.3表格由图1-3-5可以看出,计算器上的内容排列整齐,适合用表格来实现布局。根据线框图进行分析,该布局可以由两个表格来实现,上部的小按钮和结果显示框可以用一个表格,下面5行4列用另一个表格。任何页面都可以使用这种布局分析方法对其结构进行设计。代码如下:2.设计思路具体的代码见P27-28.1.4.1表单简介1.4表单表单是一个包含表单元素的区域。表单元素允许用户在表单中输入内容,如文本(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等。表单标签格式如下:1.4.1表单简介1.4表单表单属性如表1-4-1所示。表1-4-1表单属性1.4.2表单元素1.4表单表单元素是表单中输入信息和用户Web交互控制的元素。常用表单元素如图1-4-1所示。图1-4-1常用表单元素1.4.3表单项目1.4表单1.<input>标签<input>标签定义了用户输入数据的输入字段,根据其type属性,输入字段可以是文本字段、密码字段、单选按钮、复选框、按钮、电子邮件、日期时间、数字、文件等控件。<input>标签的基本格式如下:1.4.3表单项目1.4表单1.<input>标签【例1-4-1】应用表单元素实现用户登录中的用户名和密码输入,效果如图1-4-2所示。图1-4-2用户登录示例1.4.3表单项目1.4表单1.<input>标签【例1-4-1】主要代码如下:1.4.3表单项目1.4表单2.<select>标签<select>标签定义了下拉列表,列表项由<option>标签定义。、<select>格式如下:1.4.3表单项目1.4表单2.<select>标签【例1-4-2】选课下拉列表设计。执行效果如图1-4-3所示。主要代码如下:图1-4-3选课下拉列表1.4.3表单项目1.4表单3.<textarea>标签<textarea>标签定义多行文本框,格式如下:(1)rows属性:规定文本框的行数。(2)cols属性:规定文本框的列数。(3)wrap属性:规定在表单提交时文本区域中的文本是如何换行的,默认为soft。1.4.3表单项目1.4表单4.<fieldset>标签<fieldset>标签将表单内的相关元素分组,并在相关表单元素周围绘制边框。格式如下:1.4.3表单项目1.4表单【例1-4-3】用户在线注册功能的设计。最终效果如图1-4-4所示。图1-4-4用户注册界面1.4.3表单项目1.4表单1.设计思路为方便用户交互输入数据,输入数据的文本框可使用placeholder属性进行提示,两个性别单选按钮name属性设为相同,从而保证相互排斥选取。籍贯输入框通过设置list属性,其值关联datalist控件的id,这样既可输入,也可以选取,构成了一个组合框。出生日期、Email、照片、身高应用input元素,并将其type分别设置为date、email、file、number。注册留言采用多行文本框。1.4.3表单项目1.4表单2.代码实现1.4.3表单项目1.4表单2.代码实现1.5音视频元素在支持HTML5的浏览器中,可不需要安装任何插件就能播放音频和视频。HTML5规定了一种通过audio元素、video元素来包含音频和视频的标准方法。1.5.1audio元素1.5音视频元素<audio>元素支持mp3、wav和ogg三种音频格式文件。<audio>元素的基本格式如下:1.5.1audio元素1.5音视频元素<audio>元素的属性如表1-5-1所示。表1-5-1audio元素的属性1.5.1audio元素1.5音视频元素【例1-5-1】音频播放功能设计。效果如图1-5-1所示。主要代码如下:图1-5-1音频实例1.5.2video元素1.5音视频元素<video>元素支持mp4、WebM、ogg三种视频格式。1.5.2video元素1.5音视频元素1.基本格式<video>元素的基本格式如下:1.5.2video元素1.5音视频元素2.<video>元素的属性<video>元素的属性如表1-5-2所示。表1-5-2video元素的属性1.5.2video元素1.5音视频元素【例1-5-2】视频播放功能设计,效果如图1-5-2所示。图1-5-2视频实例1.5.2video元素1.5音视频元素主要代码如下:1.6语义元素

语义元素是指能够清楚地描述其意义给浏览器和开发者的元素,如语义元素实例<form>、<table>、<img>等。无语义元素是指不能清楚描述其内容的元素,如<div>和<span>。HTML5提供了一些页面布局的语义元素,如图1-6-1和表1-6-1所示。表1-6-1常用语义元素图1-6-1布局元素所对应的页面内容1.6语义元素

<header>元素定义了文档或文档一部分区域的页眉。<header>元素通常用来放置整个页面或页面内的一个内容区块的标题,也可以包含网站logo图片、搜索表单或其他相关内容。一个页面可以使用多个header元素,也可以为每一个内容块添加header元素。例如:1.6.1<header>元素1.6语义元素

<section>元素定义文档中的节(section、区段)。section包含了一组内容及其标题。例如:1.6.2<section>元素1.6语义元素

<article>元素定义独立的内容。<article>元素一般有内容、标题及脚注部分。例如:1.6.3<article>元素1.6语义元素

【例1-6-1】博客文章评论内容浏览设计,效果如图1-6-2所示。1.6.3<article>元素图1-6-2<article>元素实例效果1.6语义元素

<nav>元素定义导航链接的部分。例如:1.6.4<nav>元素<nav>元素实例效果如图1-6-3所示。图1-6-3<nav>元素实例效果1.6语义元素

<aside>元素定义页面主区域内容之外的内容(如侧边栏)。<aside>元素的内容应与主区域的内容相关。例如:<aside>元素实例效果如图1-6-4所示。1.6.5<aside>元素图1-6-4<aside>元素实例效果1.6语义元素

<footer>元素描述文档的底部区域。<footer>元素应该包含它自己的元素。一个页脚通常包含文档的作者、著作权信息、链接的使用条款和联系信息等。文档中可以使用多个<footer>元素。例如:1.6.6<footer>元素1.6语义元素

【例1-6-2】校园风光浏览设计,效果如图1-6-5所示。1.6.7<figure>元素和<figcaption>元素图1-6-5<figure>元素实例1.6语义元素

【例1-6-2】代码如下:1.6.7<figure>元素和<figcaption>元素1.6语义元素

【例1-6-3】应用语义元素实现页面布局功能,最终效果如图1-6-6所示。1.6.8布局项目图1-6-6布局项目实例1.6语义元素

1.设计思路1.6.8布局项目应用语义元素进行页面布局,将整个页面分为页眉、页面内容、页脚三个部分。页面内容左边20%为侧边栏,右边为商品图片显示部分。页眉应用<header>元素定义,页脚应用<footer>元素定义,中间部分左边应用<aside>元素定义,右边应用<section>元素定义。1.6语义元素

2.代码布局项目实例代码如下:1.6.8布局项目具体的代码见P42-45.1.7练习与实训1.简述HTML文档的基本结构及语法规范。2.制作图1-7-1所示的表格。3.制作图1-7-2所示的表单。图1-7-1表格习题图1-7-2表单习题1.7练习与实训4.制作图1-7-3所示的音频和视频。5.应用语义布局元素设计图1-7-4所示的页面。图1-7-3音频和视频习题图1-7-4布局元素习题模块二

CSS基础通过HTML基础知识的学习,我们掌握了如何运用各种标签和属性创建网页并设置显示样式。但是我们可以发现这样开发出来的页面有很多不足,内容和样式混合在一起,显得混乱,不利于修改和后期维护。而层叠样式表可以解决这些问题。同时在本模块中,还将学习如何使用CSS来实现元素的定位和页面布局。2.1CSS概述2.1.1CSS简介CSS是一种用于控制网页样式的标记性语言。所谓层叠是指对同一对象引入多个样式时,依据层次顺序叠加处理。CSS是用来控制网页外观的一门技术,解决了网页界面排版的问题,对网页的页面布局、背景、颜色等效果实现更加精确的控制,实现内容和样式的分离,有利于团队开发。万维网联盟(W3C)负责CSS标准的制定和推动。CSS经历了CSS1、CSS2、CSS2.1和CSS3等多个版本,目前使用的版本是CSS3,已经得到大多数浏览器的支持。2.1CSS概述2.1.2CSS的基本使用内部样式表是将所有的样式代码放置于页面头部,在<head>元素内部的<style>标签中存放样式表。【例2-1-1】将页面中一级标题文字的颜色修改为绿色,字体为黑体。示例代码如下:1.使用内部CSS样式表2.1CSS概述2.1.2CSS的基本使用内联样式表在HTML标签style属性中书写,所有HTML标签都支持,并且优先级最高。修改【例2-1-1】的代码,如下所示:2.使用内联样式表2.1CSS概述2.1.2CSS的基本使用如果将CSS样式表声明的代码单独放在一个扩展名为“.css”的文本文件中,可通过在<head>标签中添加link标签来引入该样式表文件。在网站根目录下的css文件夹中新建一个名为index.css的文件,将HTML页面中对应的代码复制过来,如图所示:3.引入外部样式表

2.1CSS概述2.1.2CSS的基本使用然后使用link元素将上述文件引入HTML页面中,href属性的值对应外部样式表的路径即可,代码如图:3.引入外部样式表

2.1CSS概述2.1.2CSS的基本使用4.CSS三种引入方式选择

(1)内联样式:特殊情况下使用,尽量不要使用。（2)内部样式:代码较少时使用。(3)外部样式:代码较多时使用。2.1CSS概述2.1.2CSS的基本使用5.基本语法

CSS的基本语法格式如下:CSS的基本语法格式示例如图2-1-1所示。图2-1-1CSS的基本语法格式示例2.1CSS概述2.1.2CSS的基本使用5.基本语法

CSS代码规范如下:(1)代码不区分大小写,不要使用大写字母。(2){}表示范围。(4)代码可以写在一行,也可以换行表示。(3)“;”表示一句结束。2.1CSS概述2.1.2CSS的基本使用6.CSS注释

在编写代码时添加必要的注释,可以使代码更清晰,更容易理解,方便团队的分工协作。和其他语言一样,CSS允许用户在代码中嵌入注释,注释的内会被浏览器忽略,不会影响页面的运行效果。CSS注释以“/*”开始,以“*/”结束。示例如下:2.1CSS概述2.1.2CSS的基本使用7.CSS命名规范

(1)命名不区分大小写,一律小写。(2)使用有意义的命名,尽量用英文。(3)使用多个单词命名时,使用“-”连接,如p-peom。2.1CSS概述2.1.3CSS选择器1.标签选择器

HTML页面中有不同的标签,标签选择器用来声明哪些标签采用何种CSS样式。标签选择器是最常见也是最基本的CSS选择器。基本语法如下:

在该语法中,所有的HTML标记名都可以作为标签选择器,如body、h1、p、div等。

前面提到的h1选择器就是用来声明页面中所有的<h1>标记的样式风格的。例如:2.1CSS概述2.1.3CSS选择器2.ID选择器

ID选择器使用“#”作为标识,后面紧跟id名,基本语法如下:

在HTML代码中,尽量一个id只赋予一个HTML标签,防止同一个页面中有多个相同id的标签元素。ID选择器与元素是一对一的关系。

2.1CSS概述2.1.3CSS选择器2.ID选择器

【例2-1-2】在网页中,为id属性为p2的HTML标签设定CSS样式规则(文字颜色为红色,字体大小为18px),示例代码码如下:页面效果如图2-1-2所示。图2-1-2ID选择器示例2.1CSS概述2.1.3CSS选择器3.类选择器

类选择器使用英文点号“.”进行标识,后面紧跟类名,基本语法如下:

类选择器与ID选择器的最大区别:在同一个页面中,可以针对多个元素设置相同的类(class)属性。如果说id属性好比每个人特有的身份证号码,class属性就如同不同的职业类别,如教师、学生、医生等,很多人可以拥有同一类别。因此,class选择器与元素之间是一对多的关系。2.1CSS概述2.1.3CSS选择器【例2-1-3】在网页中,对所有的段落标记<p>设置了样式:字体颜色红色,文字大小18px。对第1个和第3个段落标记<p>应用class="blue",并通过类选择器设置它们的文本颜色为蓝色,文字大小为24px,字体为黑体。示例代码如下:3.类选择器2.1CSS概述2.1.3CSS选择器

页面效果如图2-1-3所示。图2-1-3类选择器示例3.类选择器2.1CSS概述2.1.3CSS选择器伪类选择器是指通过元素的基本特征对元素进行分类,而不是通过元素的名字、属性进行分类。伪类选择器通过冒号“:”来定义,定义了元素的状态,如单击按下、单击完成等。常用的伪类选择器如表2-1-1所示。

表2-1-1常用的伪类选择器4.伪类选择器2.1CSS概述2.1.3CSS选择器【例2-1-4】伪类选择器演示。使用元素的first-child、last-child属性,设置列表第一行和最后一行的背景。对于表单,当光标移动到某个文本框内时,这个input标记就获得了焦点。因此,使用input:focus伪类选择器选中它,改变它的背景色,使它突出显示。

4.伪类选择器2.1CSS概述2.1.3CSS选择器

示例代码如下:4.伪类选择器页面效果如图2-1-4所示。图2-1-4伪类选择器示例2.1CSS概述2.1.3CSS选择器在CSS中,我们还可以根据元素的属性和属性值来选择元素,这种选择器称为属性选择器。属性选择器可以将样式与具有某种属性的元素绑定,实现各种复杂的选择,减少样式代码书写的工作量,从而使样式表简洁清晰。属性选择器可以使用^、$和*三个通配符,使用通配符的属性选择器如表2-1-2所示。

5.属性选择器表2-1-2使用通配符的属性选择器2.1CSS概述2.1.3CSS选择器【例2-1-5】属性选择器演示。把包含title属性的所有元素字体颜色变为红色,匹配id属性值以a开头的所有p元素,将其颜色设为紫色,文字大小为20px。示例代码如下:

5.属性选择器2.1CSS概述2.1.3CSS选择器

页面效果如图2-1-5所示。图2-1-5属性选择器示例5.属性选择器2.1CSS概述2.1.3CSS选择器

每个选择器都有它的作用范围。复合选择器就是两个或多个基本选择器通过不同方式组合而成的选择器,可以实现更方便的选择功能。下面列举几个常用的复合选择器,如表2-1-3所示。

6.复合选择器表2-1-3复合选择器2.1CSS概述2.1.3CSS选择器【例2-1-6】复合选择器演示。h1,div选择所有的h1标记和div标记,将其背景色改为粉色。divpspan选择了div的后代元素p的所有后代元素span,将其文字颜色改为蓝色。h2>span选择了h2元素的所有子元素span,第一个h2元素中的两个span为h2的子元素,而第二个h2中的两个span是h2元素的子元素em的子元素,所以未被选中,因而CSS样式只对第一个h2元素的两个span元素生效。

6.复合选择器2.1CSS概述2.1.3CSS选择器

示例代码如下:6.复合选择器2.1CSS概述2.1.3CSS选择器

6.复合选择器页面效果如图2-1-6所示。图2-1-6复合选择器示例2.1CSS概述2.1.3CSS选择器

7.选择器的选择(3)ID选择器:克制使用,局限于一个对象。(1)类选择器:尽可能使用,比较通用。(2)标签选择器:尽量不使用,太广泛。2.1CSS概述2.1.4案例:东坡居【例2-1-7】利用CSS样式修饰介绍苏东坡的网页。首先页面结构采用<h1>标签设置一级标题“东坡居”,采用<h3>标签设置三级标题“苏轼简介”,用两个段落进行作者介绍。下面两篇作品均采用<h3>标签设置三级标题和采用若干<p>标签设置段落包含作品内容展示。再用<h2>标签设置二级标题“苏轼诗目录”,用一个无序列表显示作品目录信息。

2.1CSS概述2.1.4案例:东坡居

页面效果如图2-1-7所示。图2-1-7东坡居效果具体的代码见P58-59.2.1CSS概述2.1.4案例:东坡居

下面添加CSS样式。设置页面整体的文字大小为16px,分别设置<h1>、<h2>、<h3>、<a>标签的样式,代码如下:2.1CSS概述2.1.4案例:东坡居

页面效果见图2-1-7,可以看到所有相应标签效果都修改成功。•为id属性值为titleBig的<h1>标签设置样式规则的文字大小为36px;•定义“春景”文字使用的“.title-addon”样式规则的文字颜色;•定义第二篇作品所在的段落<p>使用的“.p-peom”样式规则的文字颜色和背景颜色;•定义诗句段落<p>中的文字“多情却被无情恼”;•定义使用“.peom-strong”样式规则的文字颜色。2.1CSS概述2.1.4案例:东坡居

代码如下:页面效果如图2-1-8所示。图2-1-8

页面效果2.1CSS概述2.1.4案例:东坡居

下面修改诗目录列表里的文字链接颜色,采用后代选择器,这样限定了选择器后面定义的样式只对对应范围内的元素生效,代码如下:最终页面效果如图2-1-9所示。图2-1-9页面效果2.2CSS常用属性2.2.1文本属性

CSS文本属性可定义文本的外观。通过文本属性,可以实现修改文本的颜色、行高、对齐方式、字符间距、首行缩进等功能。常用文本属性如表2-2-1所示。

表2-2-1常用文本属性2.2CSS常用属性2.2.1文本属性【例2-2-1】设置第一段首行缩进和删除线效果,设置表格中文字的大小、居中对齐、行高、字符间距和阴影效果,示例代码如下:页面效果如图2-2-1所示。

图2-2-1文本属性具体的代码见P62-63.2.2CSS常用属性2.2.2字体属性CSS字体属性主要用于设置字体、大小、粗细、风格等样式。常用字体属性如表2-2-2所示。

表2-2-2常用字体属性2.2CSS常用属性2.2.2字体属性【例2-2-2】设置第一段文字特粗、大小16px、行高24px、字体黑体,设置第二段文字大小200%、斜体、加粗,设置第三段文字大小20px、常规格式显示。示例代码如下:

2.2CSS常用属性2.2.2字体属性

页面效果如图2-2-2所示。图2-2-2复合字体属性2.2CSS常用属性2.2.3颜色和背景属性CSS的颜色和背景属性主要用于设置对象的前景颜色和背景颜色,或者背景图片及背景图片的拉伸方向、位置等。常用颜色和背景属性如表2-2-3所示。

表2-2-3常用颜色和背景属性2.2CSS常用属性2.2.3颜色和背景属性【例2-2-3】设置标题文字颜色为蓝色,背景色为深灰色,设置div文字大小24px、背景色为粉色,设置背景图片横向重复,居中显示。示例代码如下:

具体的代码见P66-67.2.2CSS常用属性2.2.3颜色和背景属性

页面效果如图2-2-3所示。图2-2-3颜色和背景属性2.2CSS常用属性2.2.4超链接属性超链接默认情况下会有下划线且颜色不可更改。如果需要将超链接设置为不同的效果,可使用以下4个伪类,分别对应超链接的4种情况:

(1)a:link:打开页面时超链接默认的样式。(2)a:hover:当鼠标指针悬停到超链接上时设置的样式。(3)a:visited:当超链接被单击后设置的样式。(4)a:active:当鼠标单击超链接不释放时设置的样式。2.2CSS常用属性2.2.4超链接属性【例2-2-4】添加CSS样式前的页面效果如图2-2-4所示。

添加CSS样式后的页面效果如图2-2-5所示。示例代码如下:图2-2-4添加CSS样式前的页面效果图2-2-5添加CSS样式后的页面效果具体的代码见P68-69.2.2CSS常用属性2.2.5列表属性CSS列表属性主要用于设置列表项目类型以及列表项的放置位置,常用列表属性如表2-2-4所示。

表2-2-4常用列表属性2.2CSS常用属性2.2.5列表属性【例2-2-5】设置第一个列表的项目前导符为空心圆点,并将项目前导符放到列表项中。设置第二个列表前面无标记,作为导航条,需要将纵向排列的各个列表项变成横向排列,因此加了float:left属性。示例代码如下:页面效果如图2-2-6所示。

图2-2-6列表属性具体的代码见P70-71.2.2CSS常用属性2.2.6表格属性CSS表格属性主要用于设置表格边框是否会显示单一边框、单元格之间的间距以及表格标题位置等样式,常用表格属性如表2-2-5所示。

表2-2-5常用表格属性2.2CSS常用属性2.2.6表格属性【例2-2-6】设置页面中所有表格的td、tr元素均为黑色、实线、1px的边框。设置第一个表格的border-collapse属性值为collapse,可见边框合并为一个单一的边框。设置第二个表格的宽度和高度,设置单元格中文本水平对齐方式为居中对齐,垂直对齐方式为底部对齐。示例代码如下:具体的代码见P72-74.2.2CSS常用属性2.2.6表格属性

页面效果如图2-2-7所示。图2-2-7

表格属性2.2CSS常用属性2.2.6表格属性【例2-2-7】美化表格布局的计算器页面。首先定义HTML结构,设置一个表格,整体是7行4列的结构。第1行的4个单元格合并,插入<span>标签包裹的3个●符号,分别定义使用组合类,将第2行4个单元格合并,不放入任何内容。第3行至第7行使用相同的类tr-number,每个单元格分别输入计算器对应的按键数字和符号。代码如下:

具体的代码见P74-75.2.2CSS常用属性2.2.6表格属性

页面效果如图2-2-8所示。图2-2-8

表格内容2.2CSS常用属性2.2.6表格属性下面设置CSS样式,先定义<table>的宽高、文字大小和字体,设置文字颜色和背景颜色,设置表格外边框和单元格均为2px的灰色实线边框,代码如下:

页面效果如图2-2-9所示。图2-2-9计算器表格2.2CSS常用属性2.2.6表格属性下面利用伪类选择器first-child设置第一行的高度,分别定义3个圆点的文字样式为不同颜色,共有的样式.span-circle设置文字大小。代码如下:

2.2CSS常用属性2.2.6表格属性

页面效果如图2-2-10所示。图2-2-10计算器表格2.2CSS常用属性2.2.6表格属性利用伪类选择器nth-child(n)设置第2行的背景颜色和高度,利用后代元素选择器设置第3行至第7行的单元格宽度均为25%,实现平均分布效果,设置文字水平居中。代码如下:页面最终效果如图2-2-11所示。

图2-2-11计算器表格2.2CSS常用属性2.2.7案例:图文文档样式【例2-2-8】实现如图2-2-12所示的图文文档编辑。

图2-2-12图文文档HTML代码如下:CSS代码如下:具体的代码见P79-80.具体的代码见P78-79.2.3盒子模型2.3.1盒子模型简介盒子模型是CSS控制页面元素的一个重要概念。理解了盒子模型,才能更好地进行排版。在盒子模型中,所有页面中的元素都被看作一个个盒子,它们占据一定的页面空间,里面放着特定的内容。每个页面是由不同大小的盒子通过不同的排列方式(上下排列、并列排列、嵌套排列)堆积而成的,盒子之间互相影响。

2.3盒子模型2.3.1盒子模型简介图2-3-1描绘了盒子模型的结构。可以看到一个HTML元素对应的盒子包括元素的内容(content);内容和盒子之间的空隙,可以理解为盒子模型的内边距;盒子本身的厚度,即盒子模型的边框;盒子和其他盒子之间的间隔,即盒子的外边距。因而一个盒子实际在页面上占据的空间是由内容+内边距+边框+外边距组成的。

图2-3-1盒子模型2.3盒子模型2.3.2盒子模型属性为了分隔页面中不同的盒子,经常需要给元素设置边框效果。在CSS中border属性包括边框样式属性(border-style)、边框宽度属性(border-width)、边框颜色属性(border-color)、单侧边框的属性、边框的综合属性,如表2-3-1所示。

1.border属性2.3盒子模型2.3.2盒子模型属性表2-3-1CSS边框属性

1.border属性2.3盒子模型2.3.2盒子模型属性给不同的边框设定不同的属性值,有以下几种写法:如果给出一个属性值,那么表示设置上、右、下、左边框的属性值相同;如果给出两个属性值,那么前者表示上、下边框的属性,后者表示左、右边框的属性;如果给出三个属性值,那么前者表示上边框的属性,中间数值表示左、右边框的属性,后者表示下边框的属性;如果给出四个属性值,那么依次表示上、右、下、左边框的属性,按顺时针方向排序。例如:

1.border属性2.3盒子模型2.3.2盒子模型属性第一行代码将上、下边框设置为红色,将左、右边框设置为蓝色;第二行代码将四条边框宽度都设置为5px;第三行代码将上边框设置为虚线,将右边框设置为单实线,将下边框设置为双实线,将左边框设置为单实线。

1.border属性2.3盒子模型2.3.2盒子模型属性在一行中同时设置边框的宽度、颜色和样式。例如,以下代码将四条边框都设置为2px宽度的红色单实线:对一条边框设置与其他边框不同的属性。例如:

1.border属性第一行代码先将四条边框都设置为4px宽度的红色单实线,然后第二行代码将上边框改为2px宽度的黄色双线,以覆盖第一行代码对上边框的设置。2.3盒子模型2.3.2盒子模型属性为了调整内容在盒子中的显示位置,常常需要给元素设置内边距。内边距指的是元素内容与边框之间的距离,也称为填充。

2.padding属性2.3盒子模型2.3.2盒子模型属性和边框(border)属性类似,padding也可以设置1、2、3、4个属性值,效果如下:

2.padding属性(1)设置1个属性值:表示上、下、左、右四个内边距的值。(4)设置4个属性值:依次表示上、右、下、左内边距的值,按顺时针方向排序。(2)设置2个属性值:前者表示上、下内边距的值,后者表示左、右内边距的值。(3)设置3个属性值:前者表示上内边距的值,中间数值表示左、右内边距的值,后者表示下内边距的值。2.3盒子模型2.3.2盒子模型属性margin也可以设置1、2、3、4个属性值,效果如下:

3.margin属性(2)设置2个属性值:前者表示上、下外边距的值,后者表示左、右外边距的值。(1)设置1个属性值:表示上、下、左、右四个外边距的值。(4)设置4个属性值:依次表示上、右、下、左外边距的值,按顺时针方向排序。(3)设置3个属性值:前者表示上外边距的值,中间数值表示左、右外边距的值,后者表示下外边距的值。2.3盒子模型2.3.2盒子模型属性如果需要单独设置某一方向的外边距,可以使用margin-top、margin-right、margin-bottom、margin-left来设置,如图2-3-2所示。

3.margin属性图2-3-2盒子模型元素2.3盒子模型2.3.2盒子模型属性盒子内容的大小分别使用width(宽度)和height(高度)两个属性来设置。盒子的占位大小等于内容+内边距+边框+外边距,所以盒子的大小会随着内容大小的增大而增大。

4.4.盒子内容大小设置2.3盒子模型2.3.2盒子模型属性【例2-3-1】通过CSS属性操作盒子模型实现基础布局。可以看到,div在页面中水平居中,与浏览器的边距上、下均为20px,边框为10px。因为使用了padding属性设置内边距,所以整个div会被撑大。示例代码如下:

4.4.盒子内容大小设置具体的代码见P84.2.3盒子模型2.3.2盒子模型属性页面效果如图2-3-3所示。

4.4.盒子内容大小设置图2-3-3盒子模型示例12.3盒子模型2.3.2盒子模型属性【例2-3-2】边距示例。通过本例,理解border、margin、padding的意义。设置如下CSS代码,可以得到图2-3-4所示的效果。CSS代码如下:

4.4.盒子内容大小设置2.3盒子模型2.3.2盒子模型属性

4.4.盒子内容大小设置图2-3-4盒子模型示例22.3盒子模型2.3.3案例:用户注册页面【例2-3-3】美化用户注册页面。首先利用无序列表和表单元素制作HTML结构,代码如下:

具体的代码见P85-87.2.3盒子模型2.3.3案例:用户注册页面页面效果如图2-3-5所示。可以看到没有使用CSS样式的页面杂乱无章,不美观。

图2-3-5窗体元素2.3盒子模型2.3.3案例:用户注册页面下面设置CSS样式,定义ul的宽度,设置无项目符号,先设置所有列表项li的内边距和下边框效果,再单独设置第一个和最后一个li的下边框效果。加大第一个li的下外边距,设置标题字号和加粗效果。代码如下:

2.3盒子模型2.3.3案例:用户注册页面效果如图2-3-6所示。

图2-3-6窗体样式12.3盒子模型2.3.3案例:用户注册页面下面想统一设置span元素的宽度,该如何操作呢?HTML元素有以下三种类型:

HTML元素(1)块级元素:特点是独占一行,宽高可以设置。(3)行内块级元素：特点是可以和其他行内元素位于同一行,又保持独立,元素的宽高及与边的间距都可以设置。(2)行内元素(inline):特点是可以和其他行内元素位于同一行,宽度由内容决定,高度由内容字体大小决定,不可以设置宽高。2.3盒子模型2.3.3案例:用户注册页面span元素是行内元素,本身无法设置宽高,但可以使用display:inline-block属性将其转换成行内块级元素,然后进行宽高的设置。代码如下：

效果如图2-3-7所示。图2-3-7窗体样式22.3盒子模型2.3.3案例:用户注册页面下面继续设置所有input标签的宽高、内边距、边框、阴影效果和圆角边框、垂直居中,获得焦点的input单独设置背景颜色和边框效果。设置输入验证码的文本框宽度,设置验证码图片左外边距5px,垂直居中等效果。设置按钮的高度、内边距、左外边距,设置文字颜色、背景颜色和边框、圆角边框效果等,设置鼠标指针悬停在按钮上时改变背景色。

具体的代码见P88-89.2.3盒子模型2.3.3案例:用户注册页面最终页面效果如图2-3-8所示,页面中各个盒子排版整齐、美观。

图2-3-8用户注册页面最终效果

2.4定位与布局2.4.1定位CSS规范首先确定了一种标准的排版方式,即标准文档流,是指在不使用其他与排列和定位相关的特殊CSS规则时,各种元素默认的排列规则为:从上到下,从左到右,遇块(块级元素)换行,即块元素占满指定的宽度,不指定宽度则占满整行(如p、div元素),内联元素则是在行内一个接一个地从左到右排列(如span、a元素)。

2.4定位与布局2.4.1定位这种默认的布局方式有局限性:只能从上到下显示内容,无法实现图文环绕混排效果,不能很好地利用页面空间。使用定位属性(position)可以改变网页元素的默认排版,精确控制盒子的位置。其语法格式如下:各属性含义如表2-4-1所示。表2-4-1position属性说明

2.4定位与布局2.4.1定位01<div>元素<div>是一种容器,定义文档中的分区(division),其内部放置内容。<div>把文档分隔为独立的、不同的部分,常用作组织工具。<div>是块级元素,可以嵌套,也可以命名。<div>必须有width、height并配合border、background-color才能显示。格式如下:2.4定位与布局2.4.1定位02静态定位设置position属性的值为static,或不做设置即默认为static,元素所在的位置也就是文档流中的位置。在静态定位状态下,top、bottom、left、right属性不适用。

2.4定位与布局2.4.1定位03固定定位当用于定位的元素的position属性取值为fixed时,称为固定定位,是以当前浏览器窗为基准进行定位,也就是当拖动浏览器窗口滚动条时,依然保持对象位置不变。图2-4-2固定定位2.4定位与布局2.4.1定位【例2-4-1】固定定位。页面中布局三个div,如图2-4-1所示。图2-4-1固定定位将第一个div单独设置为固定定位,以浏览器为基准向右、向下偏移,此时可以看到,第一个div从文档流中脱离出来,而盒子2、盒子3均向上移动了一个div的位置,如图2-4-2所示。2.4定位与布局2.4.1定位示例代码如下:

2.4定位与布局2.4.1定位04相对定位当用于定位的元素的position属性取值为relative时,称为相对定位。相对定位的元素没有脱离文档流,只是按照left、right、top、bottom值进行了位置的偏移。相对定位的盒子占用原页面空间。2.4定位与布局2.4.1定位【例2-4-2】相对定位。将第二个div设为相对定位,并设置left属性值为40px、top属性值为50px,示例代码如下:具体的代码见P92-93.2.4定位与布局2.4.1定位可以看到整个文档流并没有改变,只是第二个div相对于原本的位置进行了偏移,如图2-4-3所示。图2-4-3相对定位2.4定位与布局2.4.1定位05绝对定位当用于定位的元素的position属性取值为absolute时,称为绝对定位,绝对定位是将元素依据最近的已经定位(position属性被设置成非static)的父元素进行定位,若所有父元素都没有定位,则根据body根元素(浏览器窗口)进行定位。2.4定位与布局2.4.1定位【例2-4-3】使用DIV+CSS制作二级导航菜单。首先建立一级菜单,在一个盒子(div)中定义学院导航,代码如下:效果如图2-4-4所示。图2-4-4ul结构2.4定位与布局2.4.1定位定义CSS样式,创建样式#menu,设置菜单整体大小、边框等属性,为div标记添加该样式;创建样式#menuul,设置清除边距、无项目符号等属性,代码如下:效果如图2-4-5所示。图2-4-5菜单雏形2.4定位与布局2.4.1定位创建样式#menuulli,设置菜单项的高度、行距、文字居中、下边框、背景色等属性。创建样式a,设置链接颜色、无文字下划线等属性,设置display:block属性为块元素,鼠标指针在链接所在块范围内即被激活。创建样式a:hover,设置鼠标指针悬停在链接上的文字颜色。代码如下:2.4定位与布局2.4.1定位以上设计的一级导航菜单效果如图2-4-6所示。图2-4-6一级导航菜单效果2.4定位与布局2.4.1定位二级导航菜单是指当鼠标指针经过一级导航菜单项时,会弹出对应的二级导航菜单,鼠标指针离开导航菜单项后二级导航菜单隐藏。接下来以一级导航菜单项“招生就业”为例,为其添加二级导航菜单。在“招生就业”列表下嵌套<ul>,代码如下:2.4定位与布局2.4.1定位创建样式#menuulliul,设置二级导航菜单默认隐藏属性为display:none,定位方式为绝对定位,并向其父元素的样式#menuulli中添加position:relative属性,二级导航菜单即可以其父元素(一级导航菜单项)为基准进行偏移。创建样式#menuulli:hoverul和#menuulli:hoverullia,均添加属性display:block,设置为块元素。完整代码如下:具体的代码见P95-97.2.4定位与布局2.4.1定位页面效果如图2-4-7所示。图2-4-7二级导航菜单效果

2.4定位与布局2.4.1定位06定位演示【例2-4-4】理解三种定位,如图2-4-8所示。图2-4-8定位示例

2.4定位与布局2.4.1定位HTML代码如下:

2.4定位与布局2.4.1定位CSS代码如下:

2.4定位与布局2.4.1定位07z-index层叠定位属性从前面定位的例子可见,定位后的元素会挡住一部分其他元素。可以通过层叠定位属性(z-index)定义页面元素的层叠次序。z-index没有单位,值可为正整数、负整数和0,z-index表示各元素间的层次关系,值大者在上。当为负数时,表示该元素在页面之下。对之前相对定位的【例2-4-2】进行修改,可以发现原来盒子2在盒子3之上,设置z-index属性后,盒子3的z-index值大于盒子2的z-index值,改变了层叠顺序。

2.4定位与布局2.4.1定位示例代码如下:

2.4定位与布局2.4.1定位页面效果如图2-4-9所示。图2-4-9z-index演示效果2.4定位与布局2.4.2浮动块级元素都是独占一行的,如果想让两个块级元素在一行内显示,可以设置元素浮动。浮动属性可以控制盒子脱离常规文档流,向左或向右浮动,直到边界碰到父对象或另一个浮动对象。float属性语法格式如下:

1.浮动(float)属性2.4定位与布局2.4.2浮动各属性含义如表2-4-2所示。

1.浮动(float)属性表2-4-2float属性含义2.4定位与布局2.4.2浮动【例2-4-5】对页面中两个div设置了左浮动,可见两个div由原来的上下排列变成了并排到同一行内。如果浏览器宽度足够容纳两个div,则会并排排列,但是如果将浏览器的宽度调窄到小于两个div的总宽度,div还会变成在两行上显示,这就是浮动的效果。示例代码如下:1.浮动(float)属性具体的代码见P100-101.2.4定位与布局2.4.2浮动页面效果如图2-4-10所示。

1.浮动(float)属性图2-4-10浮动效果12.4定位与布局2.4.2浮动各属性含义如表2-4-3所示。

2.清除浮动(clear)属性表2-4-3clear属性含义浮动属性可以灵活地布局页面,但有时某些盒子可能需要清除浮动的设置,可以使用清除浮动(clear)属性,其语法格式如下:2.4定位与布局2.4.2浮动【例2-4-6】在页面中布局三个div,在前两个div设置左浮动后,可以发现第三个div未设置浮动,也浮动到了同一行,页面效果如图2-4-11所示。

2.清除浮动(clear)属性图2-4-11浮动2.4定位与布局2.4.2浮动设置第三个div使用clear属性,其属性值设置为left,即清除div左侧的浮动,所以该div换行显示,页面效果如图2-4-12所示。可以看到第三个div与前面元素之间增加了距离,这是因为clear属性在设置元素之上增加了清除空间。

2.清除浮动(clear)属性图2-4-12浮动效果22.4定位与布局2.4.2浮动示例代码如下:

2.清除浮动(clear)属性具体的代码见P102-103.2.4定位与布局2.4.3页面布局【例2-4-7】页面布局1。通过本例掌握页面布局方法,实现图2-4-13所示的效果。内部div设置左右浮动时,外部div高度会塌缩成线,将不能包裹内部div。解决方法有如下两种:(1)为外部div设置样式overflow:auto;(2)在外部div最后加入辅助div并设置样式,如下所示:

本例题将使用第一种方法。2.4定位与布局2.4.3页面布局

图2-4-13div布局效果12.4定位与布局2.4.3页面布局

HTML代码如下:CSS代码如下:2.4定位与布局2.4.3页面布局

【例2-4-8】页面布局2。通过本例掌握页面布局方法,实现图2-4-14所示的效果。本例题使用第二种方法解决浮动的问题。图2-4-14div布局效果22.4定位与布局2.4.3页面布局

HTML代码如下:CSS代码如下:2.5综合项目2.5.1项目介绍

本节主要基于前面所学知识,完成一个小型项目,帮助读者灵活运用所学知识,同时更深入地理解CSS样式表、盒子模型及页面布局,解决和处理实际遇到的问题。下面分析扬州景点网站的首页页面,HTML5和CSS3相配合,页面最终效果如图2-5-1所示。具体见P106图2-5-1项目效果2.5综合项目2.5.1项目介绍

在开发环境中新建Web项目,新建css文件夹,在文件夹中新建style.css文件,作为CSS样式文件,新建images文件夹作为图片素材文件夹。在根目录下新建index.html作为首页,项目结构如图2-5-2所示。图2-5-2项目结构2.5综合项目2.5.2网页结构描述

该页面主体布局用HTML5的结构元素来组织,该页面结构元素的含义描述如下:(1)header元素:用来展示网站的标题、企业的logo图片、网站导航等。(2)nav元素:用于页面导航。(3)aside元素:放置非正文的内容,如广告、侧边栏等。(6)footer元素:放置网站的版权声明、备案信息等。(4)section元素:将页面内容分块,放置网页中展示的主体内容。(5)article元素:文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。2.5综合项目2.5.2网页结构描述

页面的主体结构如图2-5-3所示。图2-5-3页面布局页面结构的代码描述如下所示,

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

温馨提示

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

最新文档

评论

0/150

提交评论