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设计移动页面样式)的更多相关文章

  1. HTML5商城开发五 实现返回页面顶部

    本文内容主要是网上参考收集,介绍四种简单的返回页面顶部代码,可以使用简单的HTML锚标记,也可使用Javascript Scroll函数动态返回等等. 一.使用锚标记返回页面顶部 使用HTML锚标记最 ...

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

    一,自适应和响应式的区别 自适应是一套模板适应所有终端,但每种设备上看到的版式是一样的,俗称宽度自适应. 响应式一套模板适应所有终端,但每种设备看到的版式可以是不一样的. 虽然响应式/自适应网页设计会 ...

  3. 小强的HTML5移动开发之路(4)——CSS2和CSS3

    来自:http://blog.csdn.net/dawanganban/article/details/17653149 在上一篇中我们提到学习HTML5要具备CSS的知识,在页面设计的时候HTML5 ...

  4. [课程设计]Scrum 1. 9 多鱼点餐系统开发进度(最后页面完善&修复BUG&用户测试反馈)

    [课程设计]Scrum 1. 9 多鱼点餐系统开发进度(最后页面完善&修复BUG&用户测试) 1.团队名称:重案组 2.团队目标:长期经营,积累客户充分准备,伺机而行 3.团队口号:矢 ...

  5. [课程设计]Scrum 2.8 多鱼点餐系统开发进度(下单一览页面-菜式一览功能的最终实现)

    Scrum 2.8 多鱼点餐系统开发进度 (下单一览页面-菜式一览功能的最终实现) 1.团队名称:重案组 2.团队目标:长期经营,积累客户充分准备,伺机而行 3.团队口号:矢志不渝,追求完美 4.团队 ...

  6. 项目Splash页面的开发与设计

    项目Splash页面的开发与设计 首先建立一个安卓的项目,然后修改manifest.xml文件,修改应用程序的logo和显示名称,效果图如下: 对应的代码如下: 1 <?xml version= ...

  7. 在APP开发中,如何优雅的设计APP页面

    1.明确页面设计在整个产品设计中的位置 互联网产品设计的流程大致是:产品定位——需求分析——信息架构设计——流程设计——页面框架设计——设计说明——输出设计文档.可以看到页面设计是处于整个流程的后期, ...

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

    在使用jQuery Mobile进行开发的时候可以选择单页模版和多页模版,在使用单页模版的时候从一个页面跳转到另一个页面的时候需要从服务器请求,用户会感到略有停顿.使用多页模版,可以改善页面跳转之间的 ...

  9. [课程设计]Scrum 2.7 多鱼点餐系统开发进度(下单一览页面-菜式添加功能的继续实现)

    Scrum 2.7 多鱼点餐系统开发进度  (下单一览页面-菜式添加功能的继续实现) 1.团队名称:重案组 2.团队目标:长期经营,积累客户充分准备,伺机而行 3.团队口号:矢志不渝,追求完美 4.团 ...

随机推荐

  1. ios UnitTest 学习笔记

    一.运行第一个单元测试: 1.在Xcode 5中新建一个工程默认自带一个单元测试的文件夹,IDE自动生成了一个实现XCTestCase的.m文件,里面有一个失败测试(早期版本中实现的是SenTestC ...

  2. vs2013的安装及单元测试

    一:安装 废了九牛二虎之力,VS终于安装成功,可喜可贺,期间经历了各种风风雨雨,什么安装完少东西啊,重新安装又提示已经安装啊,卸载卸不干净啊,最后只能还原系统重新安装,最后终于成功了,这辈子没见过这么 ...

  3. php代码编写

    在php文件里,写入header('content-type:text/html;charset = uft-8');<!-- ============================== -- ...

  4. PPT 遥控器

    1. 下载 最新版本: 百度袋鼠输入: http://daishu.baidu.com/?from=pptweb 百度PPT遥控器:http://ppt.baidu.com/ 2. 安装过程忽略 3. ...

  5. css命名管理混乱?不妨试试BEM

    css的缺陷 我们知道,css使用中一个比较令人烦恼的问题,就是css没有作用域可言,我们写了一个组件或者模块之后,往往希望它们可以四处复用,但是由于css没有作用域,我们给样式命名的时候都会非常小心 ...

  6. C# 爬虫小程序

    设计思路 主要基于Http Get请求网页数据,进行分析.涉及递归调用,多线程提高效率,守护线程等. 相关技术 抽象类 多线程 队列 Http Get请求 字符串解析 项目结构 AbsChain 职责 ...

  7. php学习目录

    前面的话 前端工程师为什么要学习php?是因为招聘要求吗?这只是一方面 一开始,我对学习php是抵触的,毕竟javascript已经够自己喝一壶的了,再去学习php,可能让自己喝醉.但是,在学习jav ...

  8. python自动化之PDF

    ###################################处理PDF和Word文档################################### ''' PDF和Word文档是二进 ...

  9. BZOJ2001 [Hnoi2010]City 城市建设 CDQ分治

    2001: [Hnoi2010]City 城市建设 Time Limit: 20 Sec  Memory Limit: 162 MB Description PS国是一个拥有诸多城市的大国,国王Lou ...

  10. 【转】spi测试自发自收(中断通信方式)

    1.初始化spi时钟 void spiRccinit(void) { RCC_APB2PeriphClockCmd(RCC_APB2Periph_AFIO, ENABLE); RCC_APB2Peri ...