HTML5移动Web开发任务教程PPT完整全套教学课件

上传人：b*** IP属地：浙江上传时间：2023-05-25 格式：PPTX 页数：430 大小：27.89MB 积分：35 举报 版权申诉

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

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

文档简介

移动Web开发概述chapter01移动Web开发概述chapter02初识HTML5chapter03CSS3基础chapter04CSS3常用样式chapter05CSS3高级应用chapter06HTML5智能表单PPTchapter07基于HTML5的移动Web应用（上）chapter08基于HTML5的移动Web应用（下）chapter09响应式Web设计神器Bootstrapchapter10实战开发——英语学习网全套PPT课件01移动Web开发简介移动Web开发概述02移动Web开发技术03开发工具HBuilder的使用

01移动Web（移动网页）:在移动端Web浏览器中运行的Web应用。NativeApp（原生应用）：用Objective-C等原生语言开发的移动应用。02HybridApp（混合应用）：将移动Web页面封装在原生外壳中，以App的形式与用户交互。03移动Web开发就是针对移动端的Web页面的开发，它主要有以下3种开发方式。移动Web开发简介01移动web开发基本概念PCWeb开发移动Web开发PC端Web开发主要由HTML、CSS和JavaScript技术来实现。PC端Web开发的内容包括网站页面内容、样式的呈现，用户的交互，数据的呈现等。它需要PC端浏览器对HTML、CSS和JavaScript及其他技术的支持。在开发时，需要注意不同厂家浏览器对前端技术支持的差异化，需要考虑浏览器的兼容性。

移动Web开发即针对移动端的Web页面的开发，它与PC端Web开发有什么区别？移动Web开发简介01移动web开发基本概念PCWeb开发移动Web开发移动端Web开发与PC端Web开发所用的技术类似，开发项目的呈现是依赖于移动端Web浏览器。在移动Web开发中，需要注意的有两点。（1）由于屏幕大小的限制，在移动Web开发中，要注意由于页面的结构不能过于繁琐，要提炼出该网站最为核心的功能，简洁清晰的呈现出来。（2）对于页面的一切交互活动由鼠标控制变成了手指触屏控制，所以在移动Web开发时，会增加一些触屏事件。移动Web开发简介01移动web开发基本概念AndroidBrowserAndroidMobileSafariiOSUC浏览器多操作系统QQ浏览器百度浏览器

随着Android系统手机、iOS系统手机、windowsphone系统手机不断推出各种应用程序。不论什么系统的手机，手机中都有移动Web浏览器。移动Web开发简介01移动web开发基本概念

移动Web浏览器可以直接访问任何通过HTML等语言构建的Web网站或应用程序。

我们通过iPhone手机上的Safari浏览器访问了中国大学MOOC的首页，如右图所示。移动Web开发简介接下来，作为对比，我们在PC端访问中国大学MOOC网站的首页，如下图所示。01移动web开发基本概念移动Web开发简介移动端网站的设计更简洁，内容更核心。这也反映了移动Web浏览器的一些特点，如下所示。

屏幕尺寸限制加入手势操作硬件设备不断发展

可支持HTML5规范现在的移动Web浏览器都可以支持HTML5，这包括HTML5规范，CSS3规范和JavaScript脚本代码。01移动web开发基本概念移动端会支持触屏、滑动、缩放、放大等手势操作。移动Web浏览器受到屏幕尺寸的限制，所以移动端网站的设计会将本站最核心的产品进行展示，菜单栏也会缩进一个汉堡菜单中。PC端硬件配置相对强大，各种浏览器对硬件的要求已经无需太多的限定。而手机的性能相对于PC端要低的多，内置的浏览器就需要考虑硬件因素。所以移动Web浏览器功能相对有限。但是随着手机的硬件设备不断加强，移动Web浏览器支持的功能也随着越来越多。移动Web开发简介01移动Web开发简介移动Web开发概述02移动Web开发技术03开发工具HBuilder的使用超文本标记语言HTML描述网页文档的一种标记语言，通过标记来标识要显示在网页中的各个部分。HTML5简介

Web成为应用程序运行的平台HTML5能实现并改进Web应用，实现Web应用的多设备同时支持。HTML5简介TimBerners-Lee创建“HTML标签”雏形HTML2.0

—HTML

4.01HTML5草案公布IETF推出第一个官方版本HTML2.0HTML5爆发19801995|1999200819932015HTML5发展史

每一个新版本都是对之前版本的扩充

每一个新版本基本都能兼容之前的版本HTML5发展史支持跨平台、跨设备支持移动开发HTML5新特性

语义化表达引入具有特定语义的结构标签，如<header>、<footer>、<nav>等。HTML5新特性

支持多媒体新增<audio>和<video>标签处理音频和视频文件。HTML5新特性

离线和存储HTML5提出LocalStorage与ApplicationCache两大离线存储技术，能把Web应用相关资源文件缓存到本地。HTML5新特性

三维图形与特效Canvas、SVG和WebGL等技术使图形渲染更高效，页面效果更酷炫。网页特效网页游戏三维立体展示厅HTML5新特性

支持多线程：WebWorkers让浏览器可以多线程处理后台任务而不阻塞用户界面渲染。

通信：增强了通信能力，意味着增强了信息交互的实时性和网络游戏的顺畅性。

设备访问：增强了设备感知能力，使Web应用在电脑、pad、手机上均能使用。HTML5新特性01移动Web开发简介移动Web开发概述02移动Web开发技术03开发工具HBuilder的使用HBuilder简介

01敏捷的性能，实现emmet、sass自动编译。清爽的界面，可以自定义界面风格。02强大的功能，完整的代码提示、自动补全。03HBuilder是一款功能丰富、多平台开发的轻量编辑器，支持HTML5的Web开发。快，是HBuilder的最大优势，通过完整的语法提示和代码输入法、代码块等，大幅提升Web开发效率。HBuilder的下载和安装http://www.dcloud.io/下载解压下载的安装包安装双击可执行文件运行HBuilder的使用1234编写代码新建Web项目新建HTML文件查看页面效果谢谢！初识HTML501HTML5常用标签及其属性HTML5基础02HTML5新增的标签及属性03HTML5新增的语义元素04HTML5新增的属性HTML5文档的基本格式各位同学：欢迎来到《移动web开发》的学习课堂。在这里，你们能学到最实用的web开发技术，让我们一起努力！

《移动web开发》课程组学习HTML标记语言和写书信一样，要符合基本格式，遵从相应的格式规范。HTML5文档的基本格式<!DOCTYPE>文档类型声明<html>根标记<head>头部标记<body>主体标记简化的文档类型和字符集简化的文档类型

文档类型声明<!DOCTYPE>标记，必须位于HTML5文档中的第一行。简化的字符集HTML5的字符集得到了简化，只需要用UTF-8即可。meta就可以指定HTML5的字符集。<!DOCTYPEhtml><metacharset=“UTF-8“>HTML5整体结构标签

•

整个文档由成对的标签和文本组成，如下：<html><head>--根标记，文档的开始标签--头部标记，文档头的开始标签<title>标题</title>--

文档标题，显示的浏览器标题栏中</head><body>

内容</body></html>--

文档头的结束标签--

主体标记，文档内容的开始标签--

文档内容的结束标签--

文档的结束标签01HTML5常用标签及其属性HTML5基础02HTML5新增的标签及属性03HTML5新增的语义元素04HTML5新增的属性标签和属性

在html文件中，带有“<>”符号的元素被称为HTML标签。

标签被Web浏览器解释，决定网页的结构和显示的内容。<body></body>双标签和单标签双标签

由开始和结束两个标记符组成的标记。<标签名>内容</标签名>例：<h2>欢迎学习移动Web开发</h2>单标签

也称空标签。指用一个标记符号即可完整地描述某个功能的标签。<标签名/>例：<hr>注释标签

需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。

例：<p>这是一个段落</p><!—p是段落标签，在页面上显示为一段话-->语法：标签描述标题标签HTML中，定义了6级标题，分别为h1、h2、h3、h4、h5、h6，每级标题的字体大小依次递减，1级标题字号最大，6级标题字号最小。段落标签<p>标签用于定义段落。<br>标签与<wbr>标签<br>标签可插入一个简单的换行符，用来输入空行，而不是分割段落。<wbr>规定在文本中的何处适合添加换行符。作用是建议浏览器在这个标记处可以断行,只是建议而不是必定会在此处断行,还要根据整行文字长度而定。除了InternetExplorer，其他所有浏览器都支持<wbr>标签。<details>标签与<summary>标签<details>标签用于描述文档或文档某个部分的细节，目前只有Chrome浏览器支持<details>标签，可以与<summary>标签配合使用，<summary>标签用于定义这个描述文档的标题。<bdi>标签<bdi>标签用于设置一段文本，使其脱离其父标签的文本方向设置。<ruby>标签、<rt>标签与<rp>标签<ruby>标签用于定义ruby注释（中文注音或字符）。与<rt>标签一同使用。<rt>标签用于定义字符（中文注音或字符）的解释或发音。<rp>标签在ruby注释中使用，以定义不支持<ruby>标签的浏览器所显示的内容。<mark>标签<mark>标签主要用来在视觉上向用户呈现那些需要突出显示或高亮显示的文字，典型应用是搜索结果中高亮显示搜素关键字。<time>标签<time>标签用于定义日期或时间，也可以两者同时。<meter>标签<meter>标签用于定义度量衡，仅用于已知最大和最小值的度量。<progress>标签<progress>标签用于定义任何类型任务的运行进度，可以使用<progress>标签显示JavaScript中时间函数的进程。常用的文本标签details元素用于描述文档或文档某个部分的细节。summary元素经常与details元素配合使用，作为details元素的第一个子元素，用于为details定义标题。标题是可见的，当用户点击标题时，会显示或隐藏details中的其他内容。details和summary元素例如:下面的案例效果。progress元素progress元素用于定义一个正在完成的进度条，这个进度可以是不确定的，只是表示进度正在进行，但是不清楚还有多少工作量没有完成progress元素常用属性值value：已经完成的工作量。max：总共有多少工作量。meter元素用于表示指定范围内的数值。meter元素有多个常用的属性属性说明high定义度量的值位于哪个点被界定为高的值。low定义度量的值位于哪个点被界定为低的值。max定义最大值，默认值是1。min定义最小值，默认值是0。optimum定义什么样的度量值是最佳的值。如果该值高于high属性，则意味着值越高越好。如果该值低于low属性的值，则意味着值越低越好。value定义度量的值。meter元素标签的属性

属性描述标签的特征。基本语法格式<标签名属性=“属性值”>内容</标签名>标记可以拥有多个属性，属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开，任何标签的属性都有默认值，省略该属性则取默认值。例：<inputchecked=checkedtype="checkbox"/>HTML5语法的改变例：<inputchecked=checkedtype="checkbox"/>

为了兼容各个浏览器，HTML5在设计和语法方面做了一些变化。

标签不区分大小写

例：<b></b>是正确的写法。<p></P>头尾标签大小写不一致，也是正确的写法。

允许属性值不使用引号

当属性不包含一些特殊字符（如空字符串、<、>、=、单引号、双引号）时，属性值不放在引号中也是正确的。HTML5语法的改变可以省略的标签

可以省略结束部分的标签开始和结束均可省略的标签不允许写结束标签有dt、dd、li、p、option、colgroup、thead、tbody、tfoot、tr、td、th等。有html、head、body、tbody、thead、colgroup等。

只能使用“<标签/>”形式。有area、base、br、col、hr、img、input、link、meta、param、embed、keygen、track、source等。01HTML5常用标签及其属性HTML5基础02HTML5新增的标签及属性03HTML5新增的语义元素04HTML5新增的属性HTML5页面结构<header><nav><article><footer><section><aside>语义元素，就是有意义的元素。用来向浏览器和开发者描述其意义。HTML5提供了新的语义元素来明确一个Web页面的不同部分。

<body><header>...</header><nav>...</nav><article><section>...</section></article><aside>...</aside><footer>...</footer></body>HTML5页面结构新增的语义元素标签名描述<header>定义文档的头部区域.<nav>定义导航链接的部分。<section>定义文档中的节（section、区段）。<article>定义页面独立的内容区域。<aside>定义页面的侧边栏内容。<figure>规定独立的流内容（图像、图表、照片、代码等）。<figcaption>定义<figure>元素的标题。<footer>定义section或document的页脚。新增的语义元素

header元素

<header>标签用于定义文档的页眉（介绍信息）。在一个文档中，您可以定义多个<header>元素。

案例：<header><h1>欢迎阅读《大学生创新创业读本》</h1></header>

注意：<header>标签不能被放在<footer>、<address>或者另一个<header>元素内部。新增的语义元素

article元素

article元素代表文档、页面或者应用程序中与上下文不相关的独立部分，该元素经常被用于定义一篇日志、一条新闻或用户评论等。案例：<article>在英文中,这个创新Innovation,它这个词起源于拉丁语。它原意有三层含义：第一,更新。第二,创造新的东西。第三,改变。</article>新增的语义元素

section元素

section元素用于对网站或应用程序中页面上的内容进行分块，一个section元素通常由内容和标题组成。不要将section元素用作设置样式的页面容器，那是div的特性。如果article元素、aside元素或nav元素更符合使用条件，那么不要使用section元素。没有标题的内容区块不要使用section元素定义。新增的语义元素

nav元素

<nav>标签定义导航链接的部分。在不同设备上可以制定导航链接是否显示，以适应不同屏幕的需求。案例：<nav><ahref="index.html">首页</a><ahref="intr.html">图书简介</a><ahref="ind.html">图书目录</a><ahref="con.html">联系方式</a></nav>新增的语义元素

footer元素

<footer>标签用于定义区段（section）或文档的页脚。通常，该元素包含作者的姓名、文档的版权信息、联系方式等等。案例：<footer>江苏凤凰教育出版社<br>2019年10月12日</footer>HTML5页面结构<header><nav><article><footer><section><aside>语义元素，就是有意义的元素。用来向浏览器和开发者描述其意义。HTML5提供了新的语义元素来明确一个Web页面的不同部分。

header元素

<header>标签用于定义文档的页眉（介绍信息）。在一个文档中，您可以定义多个<header>元素。

案例：<header><h1>欢迎阅读《大学生创新创业读本》</h1></header>

注意：<header>标签不能被放在<footer>、<address>或者另一个<header>元素内部。新增的语义元素

article元素

section元素

nav元素

footer元素

<footer>标签用于定义区段（section）或文档的页脚。通常，该元素包含作者的姓名、文档的版权信息、联系方式等等。案例：<footer>江苏凤凰教育出版社<br>2019年10月12日</footer>新增的属性HTML5添加了很多新属性，常用的属性主要有contenteditable、hidden和spellcheck。这些为全局属性，任何元素都可以使用。

属性名描述contenteditable规定是否可编辑元素的内容。hidden规定元素是否被隐藏。spellcheck对用户输入的文本内容进行拼写和语法检查。01HTML5常用标签及其属性HTML5基础02HTML5新增的标签及属性03HTML5新增的语义元素04HTML5新增的属性

contenteditable属性该属性规定是否可编辑元素的内容，前提是该元素必须可以获得鼠标焦点并且其内容不是只读的。

该属性有两个值，true表示可编辑，false表示不可编辑。

contenteditable属性

tips：

1、可编辑元素是指可以把<table>、<div>等元素变成可编辑状态；

2、该属性“可继承”，若一个HTML元素的父元素是“可编辑”的，

则它默认也是可编辑的。

hidden属性

用来设置元素是否可见。在HTML5中，大多数元素都支持hidden属性。

该属性有两个值：hidden和默认值。HTML5新增的属性0102hidden：元素会被隐藏。默认：元素会显示。元素中的内容是通过浏览器创建的，页面装载后允许使用JavaScript脚本将该属性取消。

spellcheck属性主要用于对input元素和textarea文本输入框，对用户输入的文本内容进行拼写和语法检查。

该属性有两个值true（默认值）和false。

spellcheck属性0102true：默认，会检测输入框中的值。false：不检测。谢谢！CSS3基础01CSS3发展史及性能预览CSS3基础02CSS3选择器03多列布局04CSS3字体05

CSS3新增文本属性06CSS3颜色CSS3概述

CSS（CascadingStyleSheets，层叠样式表）是一种将表示样式应用到标记的系统。CSS不仅能对网页页面进行布局和美化，还能实现一些特殊的网页效果，在Web开发中显得尤为重要。CSS3是CSS技术的最新升级版本，是由AdobeSystems、Apple、Google、HP、IBM、Microsoft、Sun等需要Web界巨头联合组成的名为CSSWorkingGroup的组织共同协商策划的。但目前CSS3的最终标准还没有确定。CSS3发展史1996.122004.021998.05至今CSS1CSS2.1CSS2CSS3较为全面地规定了文档的显示样式选择器样式属性伪类属性保存方式目前通用的版本，删除了部分不被浏览器所支持的属性。扩充并改进了更多强大的属性更多强大的选择器增强了位置模型布局、表格样式引入媒体类型扩展伪类属性添加光标样式完整的、规范权威的CSS3标准还没有尘埃落定，但是各主流浏览器已经支持其中绝大部分特性。CSS3发展史

模块化

CSS3规范被划分为若干个独立的模块。一方面利于规范及时更新和发布，另一方面设备和厂商可以有选择地支持一部分模块的内容。

2002.05.15Line模块2002.11.07Lists模块2002.11.07Border模块2003.05.14GeneratedandReplaceContent模块2003.08.13PresentationLevels模块2003.08.13Syntax模块2004.02.24HyperlinkPresentation模块2004.12.06Speech模块2005.12.15CascadingandInheritance模块2007.08.09BasicBox模块2007.09.05GridPositioning模块2009.03.20Animations模块2009.03.203DTransforms模块2009.06.18Fonts模块2009.08.04视图模块TOBECONTINUED…CSS3性能预览

更强大的选择器

CSS3新增了3个属性选择器，用来匹配属性中包含的特定的值。

CSS3性能预览

更多的样式选择

CSS3新增了多栏布局、阴影、圆角、边框图片、形变、动画等多个样式属性，简化了前端开发人员的设计过程。

CSS3性能预览

支持跨平台、跨设备

CSS3改进了CSS2的媒体查询模块，能根据设备不同的宽度与高度、朝向（横屏、竖屏）、分辨率等设计不同的样式规则。01CSS3发展史及性能预览CSS3基础02CSS3选择器03多列布局04CSS3字体05

CSS3新增文本属性06CSS3颜色CSS3选择器

选择器是CSS中一个重要的内容，可以大幅度提高开发人员书写或修改样式表的效率。

CSS1和CSS2定义了大部分常用选择器，这些选择器能满足设计师常规设计的需求；但是它们没有进行系统化，也没有形成独立的版块，不利于扩展。

CSS3增加并完善了选择器的功能，以便更灵活地匹配页面元素。个重要的内容，可以大幅度提高开发人员书写或修改样式表的效率。CSS2属性选择器CSS2定义了4个属性选择器。选择具有attr属性的E元素，并应用rule指定的样式。*[title]{color:red;}a[href]{color:red;}a[href][title]{color:red;}E[attr]{rule}CSS2属性选择器CSS2定义了4个属性选择器。选择具有attr属性并且值等于value的E元素，并应用rule指定的样式a[href=“”]{color:red}E[attr=value]{rule}CSS2属性选择器CSS2定义了4个属性选择器。选择具有attr属性且属性值为用空格分隔的多个字符列表，其中任一字符等于value的E元素，并用rule指定的样式a[href=“”]{color:red}E[attr~=value]{rule}CSS2属性选择器CSS2定义了4个属性选择器。选择具有attr属性且属性值为用空格分割的多个字符列表，且以value开始的E元素，并用rule指定的样式span[title|=big]{color:red;}E[attr|=value]{rule}CSS3属性选择器CSS3新增了3个属性选择器。选择具有attr属性且属性值以value开头的E元素，并应用rule指定的样式。E[attr^=value]{rule}选择具有attr属性且属性值以value结尾的E元素，并应用rule指定的样式。E[attr$=value]{rule}选择具有attr属性且属性值任意位置包含value的E元素，并应用rule指定的样式。E[attr*=value]{rule}

案例：添加链接文件图标

由于链接文档的类型不同，链接文件的扩展名也会不同。使用属性选择器匹配a元素中href属性值最后几个字符，可以为不同类型的连接添加不同的显示图标。CSS3

属性选择器CSS3结构伪类选择器

结构伪类是CSS3新设计的选择器，利用文档结构树实现元素过滤，通过文档结构的相互关系来匹配特定的元素，从而减少文档内的class属性和Id属性的定义，使得文档更加简洁。结构伪类E:rootE:emptychild系列type系列CSS3结构伪类选择器选择匹配E所在的文档的根元素。E:

root在HTML文档中，根元素就是html元素。此时E:root与html类型选择器匹配内容相同。CSS3结构伪类选择器选择匹配E元素，且该元素不含子节点。E:

empty示例<div>

<p></p>

<p>我们对中国建设国际一流大学、培养国际一流人才充满自信。</p>

<p>我们的胸襟是开放的，包容并蓄。幸福不是从天降，</p>

<p>中国人民取得的成就是很了不起的，不要<span>妄自菲薄</span>，同时要<span>自强不息</span>。</p></div>p:empty

{border:1px

solid

black;

}只能匹配到第一个没有任何内容的p元素。其他p元素含有文本或span等其他元素，文本也属于节点哦！CSS3结构伪类选择器child系列E:nth-child(n)E:first-childE:only-childE:nth-last-child(n)E:last-childCSS3结构伪类选择器选择所有在其父元素中第n个位置的匹配E的子元素。child系列提示参数n可以是数字（1，2，3……）、关键字（odd、even）和公式（2n、2n+1)，参数的索引起始值为1。tr:nth-child(3)匹配表格里第3行的tr元素tr:nth-child(even)或tr:nth-child(2n)匹配表格的偶数行tr:nth-child(odd)或tr:nth-child(2n+1)匹配表格奇数行案例：表格隔行分色CSS3结构伪类选择器child系列E:nth-last-child(n)选择所有在父元素中倒数第n个位置的匹配E的元素。与E:nth-child(n)计算顺序相反，语法和用法完全一样。E:first-child选择位于其父元素中第一个位置且匹配E的子元素，相当于E:nth-child(1)。E:last-child选择位于其父元素中最后一个位置且匹配E的子元素，相当于E:nth-last-child(1)。CSS3结构伪类选择器child系列E:only-child选择其父元素只包含一个子元素，且该子元素匹配E。示例p:only-child匹配<div><p></p></div>中的p元素，但不匹配<div><h1></h1><p></p></div>中的p元素。CSS3结构伪类选择器type系列E:nth-of-type(n)E:first-of-typeE:only-of-typeE:nth-last-of-type(n)E:last-of-typeCSS3结构伪类选择器

E:nth-child(n)

E:nth-of-type(n)

E:nth-child(n)：选择所有在其父元素中第n个位置的匹配E的子元素。所有元素先排序，再匹配E元素。

<div>

<h4>不要妄自菲薄，同时要自强不息</h4>

<p>我们对中国建设国际一流大学、培养国际一流人才充满自信。</p>

<p>我们的胸襟是开放的，包容并蓄。</p>

<p>中国人民取得的成就是很了不起的，不要妄自菲薄，同时要自强不息。</p></div>12345p:nth-child(2){color:red;}先找到第二个元素，然后进行元素匹配，此时第二个元素是h4，与要求的p元素不匹配，所以字体颜色保持不变p:nth-child(3){color:red;}先找到第三个元素，然后进行元素匹配，此时第三个元素是p，与要求的p元素匹配，所以字体颜色变为红色CSS3结构伪类选择器

E:nth-child(n)

E:nth-of-type(n)

E:nth-of-type(n)：选择所有在其父元素中同类型第n个位置的匹配E的子元素。所有E元素被分离出来单独排序，非E子元素不参与排序。<div>

<h4>不要妄自菲薄，同时要自强不息</h4>

<p>我们对中国建设国际一流大学、培养国际一流人才充满自信。</p>

<p>我们的胸襟是开放的，包容并蓄。</p>

<p>中国人民取得的成就是很了不起的，不要妄自菲薄，同时要自强不息。</p></div>123p:nth-of-type(2){color:red;}所有p元素单独排序，之后匹配第二个p元素。CSS3

UI伪类选择器UI伪类选择器指定的样式只有当元素处于某种状态下才起作用，在默认状态下不起作用。未访问状态a:link锚元素a鼠标悬停a:hover选定链接a:active已访问状态a:visited扩展到E元素鼠标悬停E:hover鼠标单击E:active获取焦点E:focusCSS3

UI伪类选择器E:enabled元素处于可用状态E:disabled元素处于不可用状态E:read-only元素处于只读状态E:read-write元素处于非只读状态E:checked元素处于选取状态E:default默认处于选中状态的元素E:indeterminate任一选项被选中时整组选框状态E:selection元素处于选中状态案例：登录框01CSS3发展史及性能预览CSS3基础02CSS3选择器03多列布局04CSS3字体05

CSS3新增文本属性06多列布局网页布局

网页布局是指在网页中如何对标题、导航栏、主要内容、脚注等多种构成要素进行合理的编排。

在CSS3之前，主要通过float或position属性进行网页布局，一个明显的缺点就是各模块底部不能对齐。positionfloatCSS3的多列布局属性可以自动将内容按指定的列数排列，这种布局适合纯文档版式设计或小模块的编排，不适合做网页结构布局。

多列布局基本语法格式columns是多列布局特性的基本属性，该属性可以同时定义列数和每列的宽度。columns:<column-width>|<column-count>

目前Webkit引擎支持-webkit-columns私有属性，MozillaGecko引擎支持-moz-column-width和-moz-column-count私有属性，其他引擎暂不支持多列布局。

为了更好的兼容不同内核的浏览器，CSS3中部分属性需要添加浏览器的私有前缀，将某个样式以-xx-开头，具体如下：多列布局-moz--ms--o-只有以Webkit为内核的浏览器可以解析，如Chrome、Safari。只有以Gecko为内核的浏览器可以解析，如Firefox。只有以Trident为内核的浏览器可以解析，如IE。只有以Presto为内核的浏览器可以解析，如Opera。-webkit-多列布局基本语法格式columns是多列布局特性的基本属性，该属性可以同时定义列数和每列的宽度。columns:<column-width>|<column-count>column-width:<length>

auto<length>直接给定列的宽度（px，em，百分比）auto：根据浏览器计算值自动设置。1column-count:<integer>

auto<integer>：定义栏目的列数，取值为大于0的整数。auto：根据浏览器计算值自动设置。2多列布局列宽间距column-gap列高column-fill列数column-width中心线column-countcolumn-rule跨行显示column-rule

column-gap定义列间距多列布局column-gap:<length>|normal<length>直接给定列的间距（px，em，百分比）normal：初始值，根据浏览器默认设置进行解析，通常为1em。

column-span定义跨列显示column-span:1|all1：默认值，只在本栏中显示all：横跨所有列多列布局

column-rule定义列分隔线样式column-rule:column-rule-width|column-rule-style|column-rule-color|transparentcolumn-rule-width:<length>column-rule-style:接受所有线的样式column-rule-color:接受所有颜色transparent:定义边框透明

column-fill定义列高度column-fill:auto|balanceauto:各列的高度随其内容的变化而自动变化balance:各列的高度将会根据内容最多的那一列的高度进行统一

案例：纯文档排版《乔布斯演讲选段》

多列布局

案例：小模块排版——旅游城市01CSS3发展史及性能预览CSS3基础02CSS3选择器03多列布局04

CSS3字体05

CSS3新增文本属性06CSS颜色@font-face规则

@font-face是CSS3的新特性，用于定义服务器字体。通过@font-face规则，开发者便可以使用用户计算机未安装的字体。

基本语法格式@font-face{

font-family:<YourWebFontName>;src:<source>[<format>][,<source>[<format>]]*;

[font-weight:<weight>];

[font-style:<style>];}@font-face规则基本语法格式@font-face{

font-family:<FontName>;src:<source>[<format>][,<source>[<format>]]*;}FontName：自定义的字体名称，最好是使用下载的默认字体source：自定义的字体的存放路径，可以是相对路径也可以是绝对路径。format：自定义的字体的格式，主要用来帮助浏览器识别，主要：truetype、opentype、truetype-aat、embedded-opentype、svg等。

案例：自定义字体

@font-face规则Web字体图标

在传统的网页制作过程中，涉及到图标的问题大多用图片进行处理，图片有优势也有不足。使用图片会增加总文件的大小和很多额外的“http请求”，增大服务器负担。大量图片需要下载时，增加用户等待时间，牺牲用户体验。图片通常都是矢量图，在移动端高分辨率屏上会变的模糊。因此，有时候在“响应式设计”中需要使用图标的最好解决方案就是不去使用图片，而使用矢量的字体，即图标字体化。Web字体图标

font-awesome一个开源免费的图标工具，当前的版本是4.5.0。首先去“/”地址进行下载，下载完毕后解压目录如下图所示。字体文件和css文件“font-awesome.min.css”拷贝到项目中，结构如下图所示。该工具提供的css文件该工具提供的字体文件Web字体图标应用字体图标主要分为两个步骤：在页面引入font-awesome.min.css文件。为页面元素添加相应的class,例如“<iclass=”fafa-comments>”,会在页面显示如下图所示的图标。每个图标都有相应的class，如果想使用其他的图标可以去地址：http://fontawesome.io/icons/进行查看。01CSS3发展史及性能预览CSS3基础02CSS3选择器03多列布局04CSS3字体05

CSS3新增文本属性06CSS3颜色新增文本属性

CSS3在CSS2.1基础上新增了几个文本属性：

01text-shadow：定义文本阴影或模糊效果text-overflow：定义省略文本的处理方式02word-wrap：定义文本超过指定容器的边界时是否断开转行03

文本阴影新增文本属性基本语法格式text-shadow：<length><length><length><color>length1水平方向的偏移量length2垂直方向的偏移量length3阴影模糊的偏移量color阴影颜色案例：立体浮雕效果

文本阴影新增文本属性p{

color:#999;

text-shadow:0.1em0.1em#333;}p{ color:#fff;text-shadow:black0.1em0.1em0.2em;}p{ color:red;text-shadow:004pxwhite,

0-5px4px#ff3,

2px-10px6px#fd3,

-2px-15px11px#f80,2px-25px18px#f20;}p{

color:white;

text-shadow:-1px0black,01pxblack,

1px0black,0-1pxblack;}

溢出文本为避免超长字符的信息破坏模块的布局，可以使用text-overflow属性省略多出的字符。新增文本属性基本语法格式text-overflow:clip|ellipsis|ellipsis-word010203clip：简单裁剪ellipsis：显示省略标记（…），省略标记插入的位置是最后一个字符。ellipsis-word：显示省略标记（…），省略标记插入的位置是最后一个词。

文本换行浏览器自带文本自动换行的功能。在浏览器显示文本时，文本会在浏览器或元素右端自动实现换行。CSS3还定义了几个换行处理的属性:新增文本属性0102word-wrap：normal

break-word;

normal表示连续文本换行；break-word实现强制换行word-break：normal

keep-all

loose

break-strict

break-all;keep-all对于中、日、韩不允许字断开；break-all非中、日、韩能在任意位置断开。03white-space：normal

pre

nowrap

pre-line;nowrap强制在同一行中显示所有文本；pre显示预定义文本格式。

溢出文本新增文本属性案例：消息栏01CSS3发展史及性能预览CSS3基础02CSS3选择器03多列布局04CSS3字体05

CSS3新增文本属性06CSS3颜色设计颜色样式RGBopacity设计颜色样式rgb(112,173,71)#70AD47新的颜色表示

RGBA颜色值RGBAR：红色比重（0-255）G：绿色比重（0-255）B：蓝色比重（0-255）A：透明度（0-1）示例div{background：rgba(200,125,23,0.5);}新的颜色表示

HSL颜色值HSLH：色调（0-360）S：饱和度（0%-100%）L：亮度（0%-100%）色调H：取值为任意数值，确定不同的颜色，0为红色，60为黄色，120为绿色等。饱和度S：颜色的深浅程度、鲜艳程度，0%表示灰色，100%颜色最鲜艳。亮度L：0%最暗，表现为黑色，100%最亮，表现为白色。新的颜色表示

HSL颜色值示例div{background：hsl(200,50%,60%);}新的颜色表示

HSLA颜色值HSLAH：色调（0-360）S：饱和度（0%-100%）L：亮度（0%-100%）A：透明度（0-1）H=120S=50%L=50%A取值递增谢谢！CSS3常用样式01CSS3弹性盒布局CSS3常用样式02CSS3背景设置03CSS3圆角边框与渐变04CSS3盒子阴影与倒影弹性盒（FlexibleBox或flexbox）是CSS3的一种新的布局模式。是一种当页面需要适应不同的屏幕大小以及设备类型时，确保元素拥有恰当的行为的一种布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

什么是弹性盒布局

CSS3弹性盒布局弹性盒子由弹性容器(Flexcontainer)和弹性子元素(Flexitem)组成。弹性容器通过设置display属性的值为flex或inline-flex将其定义为弹性容器。弹性容器内包含了一个或多个弹性子元素。

注意弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。弹性盒子的组成

CSS3弹性盒布局案例1：弹性子元素的显示

弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

CSS3弹性盒布局设置

direction

属性为

rtl

(right-to-left),弹性子元素的排列方式也会改变，页面布局也跟着改变。案例2：

使用direction属性修改排列方式

CSS3弹性盒布局

flex-direction属性

指定了弹性子元素在父容器中的位置。flex-direction属性基本语法格式flex-direction:row|row-reverse|column|column-reverse;row：横向从左到右排列（左对齐），默认的排列方式。row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。column：纵向排列。column-reverse：反转纵向排列，从下往上排，最后一项排在最上面。

CSS3弹性盒布局案例3：

flex-direction属性的使用flex-direction:row-reverse;flex-direction:row;flex-direction:column;flex-direction:column-reverse;

CSS3弹性盒布局CSS3背景属性设置背景的显示区域设置背景图像的大小设置背景颜色和背景图像设置背景图像的裁剪区域

在网页设计中，合理使用背景颜色和背景图像等来美化页面，能给读者带来良好的用户体验。

CSS3背景设置01CSS3弹性盒布局CSS3常用样式02

CSS3背景设置03CSS3圆角边框与渐变04CSS3盒子阴影与倒影

background-colorbackground-color用来设置背景颜色。案例1：背景颜色和背景图像基本语法格式background-color：color|transparent;color：设置背景颜色。可以采用英文单词、十六进制、RGB、HSL、HSLA和RGBA。transparent：表示透明，默认值。设置背景颜色和背景图像

CSS3背景设置

background-imagebackground-image用来设置背景背景图像。案例1：背景颜色和背景图像基本语法格式background-image：none|url(url);none：无图像背景。url(url)：使用绝对或相对地址指定背景图像。还可以用URL形式引入网络上的图像。设置背景颜色和背景图像

CSS3背景设置

案例2：背景图像大小设置背景图像的大小基本语法格式background-size：[<length>|<percentage>|auto]|cover|contain<length>:可以为一个或两个浮点数值。只设置一个值表示宽度，高度等比例缩放。若设置两个值，分别表示宽和高。<percentage>:可以为一个或两个百分比值，表示将图像的宽度和高度按百分比进行缩放。auto:表示原始尺寸cover:等比缩放到完全覆盖容器。contain:等比缩放到宽度或高度与容器的宽或高相等。

background-size在CSS3中，background-size属性用于设置背景图像的大小。

CSS3背景设置在CSS3中，background-origin属性用于控制背景图像的起始点，也就是从哪里开始显示背景图像。

案例3：背景的显示区域设置背景的显示区域基本语法格式background-origin：border-box|padding-box|content-box;border-box：从border区域（含border）开始显示背景图像。padding-box：从padding区域（含padding）开始显示背景图像。content-box：从content区域开始显示背景图像。

background-origin

CSS3背景设置在CSS3中，background-clip属性用于定义背景图像的裁剪区域。

案例4：背景图像的裁剪区域设置背景图像的裁剪区域基本语法格式background-clip：border-box|padding-box|content-box|text;border-box：从border区域（不含border）开始向外裁剪背景。padding-box：从padding区域（不含padding）开始向外裁剪背景。content-box：从content区域开始向外裁剪背景。text：从前景内容的形状（比如文字）作为裁剪区域向外裁剪。使用该属性值可以实现使用背景作为填充色之类的遮罩效果。

CSS3背景设置01CSS3弹性盒布局CSS3常用样式02CSS3背景设置03CSS3圆角边框与渐变04CSS3盒子阴影与倒影

border-radiusCSS3中的border-radius属性可以将矩形边框圆角化。CSS3圆角边框基本语法格式border-radius：参数1/参数2[参数1/参数2[...]]；参数1:圆角的水平半径。参数2:圆角的垂直半径。值可以取1到4个，设置1个值时，四个角具有相同的弧度。设置2个、3个、4个值时，分别按照左上、右上、右下、左下的顺序设置。

CSS3圆角边框和渐变案例1：设置圆角边框.b1{border-radius:30px;/*设置一个值时，四个角的半径都是30px，弧度相同*/}.b2{border-radius:50px;/*四个角的半径都是50px，显示出圆形效果*/}.b3{border-radius:50px20px;/*左上与右下使用半径50px，右上与左下使用半径20px*/}.b4{border-radius:50px30px10px;/*左上使用半径50px，右上与左下使用半径30px，右下使用10px*/}.b5{border-radius:50px30px20px10px;/*左上50px，右上30px，右下20px,左下10px*/}.b6{border-radius:50px/20px;/*四个角的水平半径都是50px，垂直半径都是20px*/}.b7{border-radius:50%0;/*左上与右下使用原值的一半，右上与左下值为0，仍保持矩形角*/}.b8{border-radius:50%0px0px;/*左上使用原值的一半，右上、右下与左下值为0，仍保持矩形角*/}

CSS3圆角边框和渐变在CSS3中，通过渐变属性可以轻松实现渐变效果。CSS3的渐变属性主要包括:线性渐变、径向渐变和重复渐变。径向渐变线性渐变重复渐变CSS3渐变属性

CSS3圆角边框和渐变

linear-gradient在线性渐变过程中，起始颜色会沿着一条直线按顺序过渡到结束颜色。线性渐变基本语法格式background-image:linear-gradient(渐变角度，颜色值1，颜色值2...，颜色值n);linear-gradient：说明渐变方式为线性渐变。渐变角度：指水平线和渐变线之间的夹角，逆时针方向计算。0deg将创建一个从下到上的渐变，90deg将创建一个从左到右的渐变。颜色值：用于设置渐变颜色。其中颜色值1表示起始颜色，颜色值n表示结束颜色。

CSS3圆角边框和渐变案例2：线性渐变.b1{background-image:linear-gradient(0deg,#00F,#0F0);}.b2{background-image:linear-gradient(90deg,#00F,#0F0);}.b3{background-image:linear-gradient(45deg,#00F50%,#0F080%);}

CSS3圆角边框和渐变radial-gradient在径向渐变过程中，起始颜色会从一个中心点开始，依据椭圆或圆形形状进行扩张渐变。径向渐变基本语法格式background-image:radial-gradient(渐变形状圆心位置，颜色值1，颜色值2...，颜色值n);radial-gradient：说明渐变方式为径向渐变。渐变形状：取值可以是（a）像素值/百分比，用于定义形状的水平和垂直半径。（b）circle：指定圆形的径向渐变。（c）ellipse：指定椭圆形的径向渐变。圆心位置：用于确定元素渐变的中心位置，使用at加上关键词或参数来确定。取值有：像素值/百分比，left，center，right。默认center。颜色值：用于设置渐变颜色。其中颜色值1表示起始颜色，颜色值n表示结束颜色。

CSS3圆角边框和渐变案例3：径向渐变.b1{background-image:radial-gradient(circleatcenter,#00F,#0F0);}.b2{background-image:radial-gradient(ellipseatleft,#00F,#0F0);}.b3{background-image:radial-gradient(130pxatbottom,#00F,#0F0);}

CSS3圆角边框和渐变重复渐变即在一个背景上重复应用渐变模式的情况。重复渐变包括：重复线性渐变和重复径向渐变。重复渐变重复线性渐变语法格式background-image:repeating-linear-gradient(渐变角度，颜色值1，颜色值2...，颜色值n);重复径向渐

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

温馨提示

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

HTML5移动Web开发任务教程PPT完整全套教学课件

文档简介

温馨提示

最新文档

评论

相关文档