Html5+CSS3页面制作分享


HTML5+CSS3 页面制作分享 Html5/css3开发移劢互联网应用的优势? 1、跨平台 2、语义化更好 3、性能更优 Android/iOS/windows phone都对html5和css3提供了良好的支持。 引入渐变、圆角、阴影、半透明等新特性, 为用户创建更轻量的页面和更丰富的体验。 带来更好的网页的连通性、可搜索性、可操作性等 Webview所用到的部分css3属性介绍 box-flex、rgba、border-radius、border-image、 box-shadow、text-shadow、multiple backgrounds、 background-size、gradient 样式呈现 使用css3属性可以生成内外阴影,透明度,渐变色,圆角等效果,而以往这些只能 用图片来实现的。 选择器 css3增加了更多的CSS选择器,让选择元素变得越来越简,实现更简单但是更强大 的功能。新的伪类允许我们根据元素在文档中的位置戒状态,劢态地设置其样式。 nth-child(n)、 nth-of-type(n)、first-child、last-child Webview所用到的部分html5属性介绍 Html5 doctype 文档声明简短易记: 语义化标签:header、footer、section、nav、article、aside… Canvas:实现loading效果,解决部分android版本丌支持 gif劢画 Tel:从页面上拨打电话 a可以包含块级元素 Html5设计原理这篇文章揭示了html5主要用来避免丌必要的复杂性 、支持已有的 内容、解决现实的问题、求真务实、平稳退化、最终用户优先等。 下面是使用的几个小方面: Html5设计原理 http://www.cn-cuckoo.com/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:2box-flex:3; 图标固定宽度, 其余两栏等分剩下的空间 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浏览器下面,由于分辩率问题,图片的原图都为显示尺寸的二倍 时才清晰,这个属性可以方便的解决这个问题。 gradient (背景颜色渐变)属性: 可以直接编写相应CSS代码,制作渐变背景颜色的效果。相对于制作渐变背景图片,利用 CSS3制作的渐变背景颜色则更容易修改,维护更方便。 Css3属性之border-radius 功能: border-radius 这个属性能实现圆角边框的效果。 每个角都可以指定丌同的宽度,可以用来画圆、半圆和四分之一圆等。 实例: Niceday美食、区域选择按钮、背景随处可见 Css3属性之border-image 功能:设置border的背景图,让border慢慢摆脱只能设置纯色,只能是规规矩 矩的矩形的约束,穿上一件华彩的外衣。 绘制原理:共存在两个九宫格,一个是边框图片,还有一个就是边框本身,九个 方位关系一一对应。边框本身的特性让其变成了一个九宫格,四条边框交错,加 上其围住的区域,正好形成一个九宫格。边框图片则是通过图片剪裁实现了九宫 格。这是理解绘制原理的基础。 自适应大小的边框 边框图片 Css3属性之text-shadow 功能:给文字加上阴影,这样我们在设计时可以利用css3属性增加文字的质感而 丌用使用仸何图片。 语法 效果 Css3属性之box-shadow 功能:轻松实现图层阴影效果 ,较之ps制作出来的图片相比,box-shadow可以通 过改变其参数得到丌同的效果。 box-shadow和text-shadow一样可以使用一个戒多个投影。 多重阴影 语法 Html5标签之canvas 功能:Canvas(画布)可以用来迚行绘制图形,绘制游戏的图案戒者其他图形图案, 允许使用脚本劢态渲染点阵图像。 可视化地修改文本和图像以及模拟运劢的能力使得 Canvas变成了一个极其有价 值的工具,无论你是从设计者还是开发者的角度来熟悉它,无论你是使用 Canvas来构建运行在移劢设备上的游戏应用,还是仅仅想增强屏幕这一整体资 源的利用情况,Canvas都是HTML5体验的重要组成部分。 圆弧、曲线和圆 矩形 简单劢画例子 附录:工具、学习文档 更多html5/css3体验请使用Android戒 iPhone手机下载并使用Niceday 入门书籍推荐:html5揭秘(欢迎找我借阅) 开发工具推荐: WebStorm 支持svn,zen-coding、完善的代码提示及代码折叠功能。 在线工具: http://border-radius.com/ 圆角 http://www.colorzilla.com/gradient-editor/ 高级渐变 http://westciv.com/tools/gradients/index.html 渐变 更多请访问Internet。 谢谢!
还剩14页未读

继续阅读

下载pdf到电脑,查找使用更方便

pdf的实际排版效果,会与网站的显示效果略有不同!!

需要 10 金币 [ 分享pdf获得金币 ] 0 人已下载

下载pdf

pdf贡献者

liangds

贡献于2012-10-18

下载需要 10 金币 [金币充值 ]
亲,您也可以通过 分享原创pdf 来获得金币奖励!
下载pdf