HTML5 移动开发(CSS3设计移动页面样式)

1.如何创建CSS样式表

2.CSS3的卓越特性

3.基于设备属性改变样式的媒体查询

4.如何使用属性改变元标签创建更美观移动页面

 

层叠样式表是移动WEB开发中的一个重要组成部分,本次分享将学到如何编写CSS并用它为移动页面定制样式,其中包括媒体查询为特定设备定制样式表。此外还将了解一些影响移动设备内容显示的元标签

创建好的样式,可通过三种方法附加到样式表里

1.内联到标签中   【建议在测试的时候这么做】

2.内嵌于HTML的开头

3.放在一个独立文档中作为样式表  【推荐的做法】*能够提高网站加载速度,加载样式表后,将其保存在浏览器缓存中,打开同一个网站中的其它页面时不需要重新加载。

使用font属性的语法为:

font: font-style font-variant font-weight font-size/line-height font-family;

为了确保WEB页面外观与设想一致,可以使用顺序的字体列表,也称为字体堆栈

在为Web页面布局之前,需要了解Web页面的行程。文档中的每一个元素的默认形状都是方形,即使这个形状不显示出来也是如此。最简单的方法就是使用border属性为元素加上一个边框,语法如下:

border: 1px solid red;

下图为盒子模型:

中心为内容区域(width)

补白(padding)

边框(border)

边距(margin)

CSS3带来了以下卓越的新特性:

多列布局和网格布局

圆角

边框图形

文本及盒阴影

非浏览器设备山固定滚动溢出

字体及排版修改

动画

三维变换

浏览器并不直接支持CSS3样式属性。大部分Web浏览器的做法是在使用新属性时,需要在属性前加上相应的关键字,以表明它是浏览器专用属性。如下:

-moz   Firefox 和 Mozlla

-ms     Internet Explorer

-wap   WAP 和 Opera

-o        Opera

-webkit    Chrom 和 Safari

在添加了相关浏览器专用扩展名后,才可以使用许多CSS3新属性。

下面就列举几个为例:

圆角: css3中的圆角是通过一个名为border-radius的属性来实现的。几乎每一个开发者都在期待CSS圆角,以为人们已经厌倦CSS2 的方块表现了。

border-bottom-left-radius

border-bottom-right-radius

border-top-left-radius

border-top-right-radius

当然为了兼容还要考虑FF与Webkit的扩展名

盒阴影及文字阴影

可以使用CSS3属性text-shadow 和 box-shadow为文字与盒添加阴影

text-shadow:horizontal-offset vertical-offset blur-radius color;

text-shadow:horizontal-offset vertical-offset blur-radius color;

Offset指阴影从原元素出发的偏移量。Blur radius 为模糊两; color为阴影颜色。

透明色:

之前我们CSS2.0用的都是 RGB 现在CSS3.0推出了RGBA就是多了一个通道,可以设置透明度了

第四位加入一个在0到1之间的数字,0为完全透明,而1为完全不透明。rgba(0, 0, 0, 0.4);

HTML5 移动开发(CSS3设计移动页面样式)

时间: 2024-08-27 07:19:59

HTML5 移动开发(CSS3设计移动页面样式)的相关文章

html5/css3响应式页面开发总结

一,自适应和响应式的区别 自适应是一套模板适应所有终端,但每种设备上看到的版式是一样的,俗称宽度自适应. 响应式一套模板适应所有终端,但每种设备看到的版式可以是不一样的. 虽然响应式/自适应网页设计会带来兼容各种设备工作量大.代码累赘.加载时间长的缺点,但它们跨平台和终端,能"一次设计,普遍适用",可以根据屏幕分辨率自适应以及自动缩放图片.自动调整布局,它们不只是技术的实现,更多的是对于设计的全新思维模式. 很多网站的解决方法,是为不同的设备提供不同的网页,比如专门提供一个mobile

html5/css3响应式页面的设计流程

第一步:确定需要兼容的设备类型.屏幕尺寸 通过用户研究,了解用户使用的设备分布情况,确定需要兼容的设备类型.屏幕尺寸. 设备类型:包括移动设备(手机.平板)和pc.对于移动设备,设计和实现的时候注意增加手势的功能. 屏幕尺寸:包括各种手机屏幕的尺寸(包括横向和竖向).各种平板的尺寸(包括横向和竖向).普通电脑屏幕和宽屏. 需要考虑的问题: 某个页面进行响应式设计时其适用的尺寸范围是哪些?比如,1688搜索结果页面,跨度可以从手机到宽屏,而1688首页,由于结构过于复杂,想直接迁移到手机上,不太现

HTML5 & CSS3初学者指南(2) – 样式化第一个网页

介绍 我们已经使用基本的 HTML 编写了一个网页.但是,写出来的 HTML 代码的网页看起来很平淡,没有吸引力. 如何改善这种很平淡的页面呢? 让我们开始使用网页的基本样式来改善页面效果,我们将会使用到 CSS 的功能. 正式开始 CSS 是层叠样式表的缩写,它是为网页添加样式的通用语言,在所有浏览器中都支持.最新的标准是 CSS3,这与早期版本完全向后兼容.CSS3 的规范是由 W3C 开发的,目前仍处于开发阶段,其最新的版本是 CSS Snapshot 2010. 打开你的文本编辑器,键入

面向Web Cloud的HTML5 App开发实战:Browser&HTML5&CSS3&PhoneGap&jQuery Mobile& WebSocket&Node.js(3天)

课程简介: 王家林老师(联系邮箱[email protected] 电话:18610086859 QQ:1740415547 微信号:18610086859) 22个HTML5主题一次性贯穿HTML5的一切技术: 一网打尽HTML5时代Device.(设备端).Browser(浏览器)和Cloud(浏览器)的所有技术: 以浏览器定制技术为基础,通晓HTML5+CSS3+PhoneGap+Web Socket +jQuery Mobile +Node.js等HTML5的六大核心技术: 最新研发的H

面向Web Cloud的HTML5 App开发实战:Browser&HTML5&CSS3&PhoneGap&jQuery Mobile& WebSocket&Node.js(2天)

如何理解Android架构设计的初心并开发出搭载Android系统并且具备深度定制和软硬整合能力特色产品,是本课程解决的问题. 课程以Android的五大核心:HAL.Binder.Native Service.Android Service(并以AMS和WMS为例).View System为主轴,一次性彻底掌握Android的精髓. 之所以是开发Android产品的必修课,缘起于: 1,     HAL是Android Framework&Application与底层硬件整合的关键技术和必修技

小强的HTML5移动开发之路(53)——jQueryMobile页面间参数传递

在单页模版中使用基于HTTP的方式通过POST和GET请求传递参数,而在多页模版中不需要与服务器进行通信,通常在多页模版中有以下三种方法来实现页面间的参数传递. 1.GET方式:在前一个页面生成参数并传入下一个页面,然后在下一个页面中进行GET内容解析. 2.通过HTML5的Web Storage进行参数传递. 3.建立当前页面变量,在前一个页面将所需传递的参数内容赋值到变量中,在后一个页面从变量中将参数取出来.(程序灵活性较弱) 一.以GET方式实现页面间参数传递 <!DOCTYPE html

HTML5移动开发之路(53)——jQueryMobile页面间参数传递

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(53)--jQueryMobile页面间参数传递 在单页模版中使用基于HTTP的方式通过POST和GET请求传递参数,而在多页模版中不需要与服务器进行通信,通常在多页模版中有以下三种方法来实现页面间的参数传递. 1.GET方式:在前一个页面生成参数并传入下一个页面,然后在下一个页面中进行GET内容解析. 2.通过HTML5的Web Storage进行参数传递. 3.建立当前页面变量,在前一个页面将所需传递的

HTML5移动开发之路(50)——jquerymobile页面初始化过程

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(50)--jquerymobile页面初始化过程 了方便说明和更加直观的展示jquerymobile的页面初始化过程以及各个事件的触发过程,我绘制了一幅流程图: 图中用红色框圈起来的是界面中的事件,测试代码如下: [html] view plain copy print? <!DOCTYPE html> <html> <head> <title>练习</title

HTML5移动开发之路(51)——jquerymobile中改善页面访问速度

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(51)--jquerymobile中改善页面访问速度 在使用jQuery Mobile进行开发的时候可以选择单页模版和多页模版,在使用单页模版的时候从一个页面跳转到另一个页面的时候需要从服务器请求,用户会感到略有停顿.使用多页模版,可以改善页面跳转之间的流畅性,但是多个页面要一次性下载,所以下载时间变长,用户体验也会受到影响. 在基于预取技术的开发中,当第一个页面的DOM对象加载完成后,jQuery Mob