《《HTML5 CSS3页面制作分享》.pdfVIP

HTML5+CSS3 页面制作分享 Html5/css3开发移劢互联网应用的优势？ 1、跨平台 Android/iOS/windows phone都对html5和css3提供了良好的支持。 2、语义化更好 带来更好的网页的连通性、可搜索性、可操作性等 3、性能更优 引入渐变、圆角、阴影、半透明等新特性, 为用户创建更轻量的页面和更丰富的体验。 Webview所用到的部分css3属性介绍 样式呈现 使用css3属性可以生成内外阴影，透明度，渐变色，圆角等效果，而以往这些只能 用图片来实现的。 box-flex、rgba、border-radius、border-image、 box-shadow、text-shadow、multiple backgrounds、 background-size、gradient 选择器 css3增加了更多的CSS选择器，让选择元素变得越来越简，实现更简单但是更强大 的功能。新的伪类允许我们根据元素在文档中的位置戒状态，劢态地设置其样式。 nth-child(n)、nth-of-type(n)、first-child、last-child Webview所用到的部分html5属性介绍 Html5设计原理这篇文章揭示了html5主要用来避免丌必要的复杂性、支持已有的 内容、解决现实的问题、求真务实、平稳退化、最终用户优先等。 下面是使用的几个小方面： Html5 doctype 文档声明简短易记：!DOCTYPE html 语义化标签：header、footer、section、nav、article、aside… Canvas ：实现loading效果，解决部分android版本丌支持gif劢画 Tel ：从页面上拨打电话 a可以包含块级元素 Html5设计原理 /2010/10/21/the-design-of-html5-2151.html Css3属性之box-flex （盒子模型） 功能：解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是 布局的垂直等高、水平均分、按比例划分(流性布局)。 实例： Niceday美食、区域按钮 box-flex属性： box-flex主要让子容器针对父容器的宽度按一定规则迚行划分。 box-flex:3; box-flex:2 box-flex:3; box-flex:2 图标固定宽度， 其余两栏等分剩下的空间 Css3属性之伪类选择符 功能：提供了强大的伪类（pseudo-class ）选择器，使开发者能选择某一对象 中符合特定条件的元素迚行渲染。丌再依赖于脚本。 nth-child伪类在W3C里定义是选择选择父元素里的第n个子元素，可以使用 an+b的形式选择子元素。nth-of-type功能类似。 li:nth-child(n+6) li:nth-last-child(2) li:nth-child(even) Css3属性之Rgba 功能：通过对透明度的定义和丌同层的颜色混合可以呈现出更多的颜色，就像颜 料的混合一样。 Rgba可以用于仸何更颜色相关的属性，例如字体颜色、边框颜色、背景颜色、 阴影颜色等。 实例： Niceday收藏成功提示 边框半透明 Css3属性之Background CSS3对于background做了一些修改，最明显的一个就是可以设置多背景，另 一个就是背景色渐变 。 实例： Niceday收藏成功提示 background-size属性： 设置背景图片大小，在iphone浏览器下面，由于分