无需安装即可享用 iPhone Web App详解_苹果手机应用-泡泡网
　　　　　　　　　
无需安装即可享用 iPhone Web App详解
日 04:55&出处：&【原创】 作者:张义 编辑:
延伸阅读：&&&&&&&&&&&&&&&&&&
小白用户娱乐生活
&&&&频道4月20日&凭借数十万的App应用支持，iPhone、 以及iPad已经深深植入人心，仿佛也已成为了这个时代智能移动娱乐产品的“领军人物”。
&&& 为了找到更好玩更实用的软件/游戏，很多苹果用户都在频繁更换设备中的各种应用内容。在更换一批应用时首先会存在付费问题，即便是越狱用户也需要通过下载、同步等诸多麻烦过程才能获取到心仪的应用。日复一日，本来就对应用内容处于懵懂状态的很多用户便会逐渐变得懒惰，而手中的设备也逐渐变成了一部简单的、随身听，甚至是一个电子相框。
&&& 另外，在这个网络与WiFi网络崛起的时代，越来越多的人喜欢通过手中的移动设备享受网络生活。简单的下载或在线欣赏视频、音乐等内容其实并不是大多数用户最为常用的功能，反而是一些基于网络的游戏或应用才会引起人们的兴趣。
&&& 基于以上两种现状，我打算通过这篇文章给大家介绍一种更合适的玩机办法，既让您体验到3G/WiFi网络的乐趣，又可以让您在娱乐办公的同时无需进行客户端下载或安装。
比客户端应用更易用 Web App综述
&&& 这个看似高端的名词“Web App”其实很容易理解，如果通过字面直译便是网页应用（基于浏览器的网页应用）。
&&& 为了让您更直观的了解Web App，我下面将引用一些网友关于这类产品的问答内容，相信可以让您轻松上手。
&&& Q1：Web App与App 中下载的游戏或软件有何不同？&&& A1：首先，Web App仅仅是一个独立的网页，而App store中的内容则是实际的.ipa（.deb/.pxl）客户端。如果更形象一点可以解释为前者是浏览器运行的一款在线Flash小游戏，而后者是下载到本地上的一个游戏。
&&& Q2：这些产品去哪找？大概有多少？付费情况是什么样？&&& A2：所有Web App内容只能在苹果官方网站上找到，具体地址是。目前在官网上拥有1700+左右此类应用。1700+Web App应用皆为免费内容，且无内置增值服务。
&&& Q3：GPRS网络能玩Web App吗？&&& A3：当然可以，Web App支持GPRS/EDGE、3G、WiFi等各种网络连接方式。在使用过程中游戏类应用流量消耗也不算低，所以建议在非WiFi网络下不要长时间使用。
&&& Q4：为什么我的Web App已经保存到桌面却没法正常进入？&&& A4：两种可能，首先是要网络连接要保证畅通；另外就是应用远程端有可能在维护。
&&& Q5：我的iPad为什么不能玩Web App？&&& A5：可能是由于分辨率及流量耗损的考虑，目前Web App仅支持在iPhone及iPod touch上运行。
&&& 当然，如果您已经对Web App已经非常了解，建议直接到后几页去挑选几款好玩的应用；而如果您是一名新手用户，建议通过下一页的具体讲解更深入了解一下。
Web App各功能介绍及使用
&&& 相信经过两页的介绍大家一定对Web App有了一些了解，那么我们接下来便实际操作一下，很多细节内容还是需要您认真掌握一下的。
&&& 第一步，打开您iPhone/iPod touch中的Safari浏览器，在地址栏键入，点击前往便可抵达Web App首页。
&&& 如果您想长期使用，建议将Web App商店保存到收藏夹中。
&&& Web App中的分类
&&& 在商店左上角位置便是详细的分类条目，大家可以参考右侧我给出的中文分类内容对照进行使用。
&&& 使用iPhone/iPod touch查看Web App原首页不但分辨率不理想且全部内容为英文版，建议大家可以先通过PC打开首页，使用，然后将喜欢的内容以邮件或者其他方式传到上。
&&& RSS订阅及Web App界面
&&& Web App提供有一个非常人性化的RSS订阅功能，大家可以通过设定在第一时间收到最新应用的相关推荐。
&&& 在应用介绍部分中，大家可以了解到一些应用相关信息，点击查看应用（View web app）便可直接进入到游戏最终界面。
&&& 进入应用
&&& 1700+个Web App中少量内容可以直接进入开始使用，而大部分内容则需要用户将其添加至主屏幕，具体操作方式与收藏网页完全一样。收藏至主屏幕的Web App同样会生成一个icon图标，点击后便可开始使用。
&&& 收藏及分享
&&& 如果大家发现了一些精品应用，可以轻松的将其收藏到收藏夹或主屏界面中；通过邮件方式更可以轻松将这款应用分享给身边的朋友。
&&& 相信大家经过这一番介绍已经对Web App非常了解了，那么接下来我就为您重点推荐几款好玩的Web App，希望您会喜欢。
Web App试用推荐一
&&& 应用推荐一&&& 冰桌台球 Puck Billiards&&& 在线应用地址：
&&& 这款游戏名列Web App榜首，不论是游戏分类还是全部分类，Puck Billiards的成绩都是最为出色的。
&&& 其实游戏内容非常简单，玩家需要用白球通过触控方式将其他球撞击到四边的袋口中，而感觉玩起来则与沙狐球非常相像。
&&& 应用推荐二&&& 原始黄金矿工 Gold Nuggets&&& 在线应用地址：
&&& 黄金矿工相信各位都不陌生，如今通过Web App我们也可以再次体验到它。这款游戏就是标准的需添加到桌面才可进行的游戏，点击浏览器中下方的收藏按钮，将其放置到桌面即可。
&&& 游戏内容非常简单，勤劳的旷工很难把握工具的稳度，所以玩家只能在摇摆中类似钓鱼一般获取黄金矿石。
&&& 应用推荐三&&& 记忆力大挑战 Memory Vitamins Game&&& 在线地址：
&&& Memory Vitamins Game又是一款不错的休闲小游戏，相信益智类的记忆力游戏大家都不陌生，而该作亦是如此。
&&& 游戏共分为三种难度，而其区别就在于单位的数量。相信在您的火眼金睛与闪存般的记忆力相结合之下，Hard难度依旧可以轻松通关。
Web App试用推荐二
&&& 应用推荐四&&& 无聊课堂 Boring School&&& 在线应用地址：
&&& 相信厌学的心里是每个朋友都曾有过的，而在课堂上捣一捣乱是我们很明显的厌学表现。这款小游戏就是让你扮演一名淘气的小朋友，在课堂上利用纸屑攻击你的老师。
&&& 当然，水平高超的朋友不但可以将一名老师赶走，还会将陆续新来的老师一一打跑，如果你能保证用最少的纸球轰走最多的老师，那么你就上传一下自己的分数，与全球“厌学少年”一教高下吧。
&&& 应用推荐五&&& 快速音乐抢答 Cup O’ Joe Music Edition Lite&&&
&&& Cup O’ Joe Music Edition Lite是一款非常专业的娱乐软件，对于广大音乐爱好者来说一定是不可多得好应用。玩家通过做选择题的方式将乐谱连接起来，最后获得积分。
&&& 在每次完成全部题目时系统会根据玩家水平进行打分，并且系统可以通过缓存记录玩家近期的每次成绩，然后通过一幅曲线图展示给玩家。
&&& 应用推荐六&&& 流星雨 Meteor rain&&&
&&& 在看到这款应用时我第一时间想到的就是雷人组合F4，那首曾经红遍菜市场的歌曲与这款游戏名字一样。
&&& 游戏实际内容也非常简单，在未来的某天世界末日即将来临，漫天的流星雨不断的侵袭地球，而玩家作为拯救地球的唯一希望需要将流星雨一一浇灭，而这么重要的任务仅需点击屏幕便可完成。
&&& 总结：
&&& 虽然现在仍是客户端App的天下，但相信随着科技的发展，凭借更优质的网络服务以及神马云雨之类的技术，Web App终将成为我们未来最实用的服务（没有之一）。■
延伸阅读：&&&&&&&&&&&&&&&&&&
快速转帖：
欢迎转载泡泡网原创文章，请注明：转载自泡泡网 [
上市时间：
参考报价：
iPhone5 相似产品：??????iPhone5 相关文章：| 新闻| 新闻| 新闻| 新闻|
[][]新车排行热门车排行选车工具
| 电信与信息服务业务经营许可证： | 北京市公安局海淀分局网监中心备案编号： 上传我的文档
 下载
 收藏
该文档贡献者很忙，什么也没留下。
 下载此文档
正在努力加载中...
苹果iPhone_WebApp_开发指南
下载积分：30
内容提示：苹果iPhone_WebApp_开发指南
文档格式：PDF|
浏览次数：234|
上传日期： 18:31:37|
文档星级：
该用户还上传了这些文档
苹果iPhone_WebApp_开发指南
官方公共微信iphone6显示“该照片尚未从icloud下载,请从系统相册中下载到本地后重新尝试”怎么弄_百度知道iPhone WebApp 开发技术要义总结（一） - Web前端当前位置:& &&&iPhone WebApp 开发技术要义总结（一）iPhone WebApp 开发技术要义总结（一）&&网友分享于：&&浏览：6次iPhone WebApp 开发技术要点总结（一）
iPhone WebApp 开发技术要点总结
作者 ：流螢飛舞
Apple iPhone 推出以后 ，以其动人的外观、超强的性能和丰富的软件资源吸引了众多的拥趸
者。iPhone
的原始出厂功能比较基本 ，仅能完成一般的电话、短信、时钟、邮件、上网以及定位
的较少的功能。然而 ，其基于 Apple Mac OS X
的操作系统 ，为用户提供了编写应用软件的可能。
上架的软件就已经达到近十万个。可以形象的比喻 ，原始的
买来的电脑 ，但众多的第三方软件使其可以完成几乎任何你可以想象到的功能。
你的创意总是独特的 ，或许那些收费的或免费的软件不能满足你的愿望 ，您也想试图编写一些
应用程序来实现你的需求。那么 ，我可以告诉你 ，这点上 ，很难、也很容易。
公司为企图开发 iPhone
应用软件的公司和个人提供了开发所必须的软件开发工
SDK （Software Develoment Kit ），然而 ，使用它 ，必须先向
注册申请 ，开发的软
Apple Store
审核 ，然后才能上架发布。虽然现在已经出现了盗版的
SDK ，可以免注册
环境下进行开发 ，但其开发环境搭建的复杂 ，以及基于
Object-C 相对较难
的编程语言 ，也阻挡的很多爱好者试图开发程序的脚步。
所幸的是 ，
为我们提供了另一条简洁的开发途径 ，也就是在基于
上 ，用户可以编写自己所需的
WebApp ，也就是网络应用软件。简单的说 ，应用程序可严格编写为
服务器上的
JavaScript
文件 ，实现大多数可以实现的功能需求。Web
开发是两种截然不同、各有利弊的开发方式。
是一种浏览器引擎 ，支撑着
Mobile Safari 浏览器背后的技术。WebKit
是一个开源项目 ，它优先支持
特性。实际上 ，WebKit
还支持尚未被其他浏览器采
纳的一些诸如
HTML5 规范
iPhone 上的 Safari 支持的标准 ：
JavaScript (ES3)
DOM (Level 2)
AJAX (XMLHttpRequest)
熟悉这些标准并且平常也坚持 Web Standards 实践的朋友估计要笑出来了——就这些吗 ？我
们天天在用啊 ，还有必要专门写文章来说明吗 ？事实上 ，Safari 之前作为一款无 PC 版的浏览器 ，一
直用户数量就不高 ，因此对它的研究也就不多 ，然而 Safari 其实有不少自己的扩展 ，因此还是很值
得研究的。既然我们是针对 iPhone 设置 ，其实就是针对 Safari 设计 ，无需考虑兼容其它浏览器 ，
这时候为什么不好好利用这些扩展增强自己的应用程序的可用性呢 ？
iPhone WebApp 开发已经有诸如
iUI、Canvas、Dashcode
等很好的开发工具 ，
但了解掌握最基本的
html、javascript 、css
知识仍是十分必要的。本文竭力提供通俗易懂的内容 ，
以大量的例子入手 ，突出特性 ，适合有一定
Web 开发基础 ，并试图开发
iPhone WebApp 开发
的人士参考。
1、首先要说的就是 viewport ，也就是可视区域。对于桌面浏览器 ，我们都很清楚 viewport
是什么 ，就是出去了所有工具栏、状态栏、滚动条等等之后用于看网页的区域 ，这是真正有效的区
对于传统 Web 页面直接在 iPhone上面显示来说是很好的事情 ，因为如果传统Web 页面在 980
宽度的桌面浏览器 viewport 中显示正常的话 ，iPhone 上显示也绝对正常。然而这对于 Web 应用
程序来说则不是好事 ，因为我们需要按照 980 宽度来设计将来会以 320 宽度显示的页面 ，一个应该
显示为 320*80 的元素 ，必须设计为 980*245 ，这多麻烦 ！因此我们需要改变 viewport。
实际上应该怎么做呢 ？我们有几个选择 ，因此先让我们看看到底我们能够设置哪些属性吧。我
们可以操作的属性有 4 个 ：
· width - viewport 的宽度
（范围从 200 到 10,000 ，默认为 980 像素 ）
height - viewport 的高度
（范围从 223 到 10,000 ）
· initial-scale -
初始的缩放比例
（范围从&0到 10 ）
minimum-scale -
允许用户缩放到的最小比例
maximum-scale -
允许用户缩放到的最大比例
· user-scalable -
用户是否可以手动缩放
这 6 个属性 ，我们可以设置其中的一个或者多个 ，iPhone 会根据你设置的属性自动推算其他属
性值 ，而非直接采用默认值。这点很重要 ，在完全不设置的时候有默认 viewport ，在你设置一个属
性后其它值是自动推算出来的 ，不再是默认的。
initial-scale=1 ，那
么 width 和 height
在竖屏时自动为
320*356 （不是
320*480 因为地址栏
等都占据空间 ），横屏
时自动为 480*208。
类似地 ，如果你仅
仅设置了 width ，就
会自动推算出
initial-scale 以及
height。例如你设置
了 width=320 ，竖屏时 initial-scale 就是 1 ，横屏时则变成 1.5 了。
那么到底这些设置如何让 Safari 知道 ？其实很简单 ，就一个 meta ，形如 ：
&meta id="viewport" name="viewport" content="width=320; initial-scale=1.0;
maximum-scale=1.0; user-scalable=0;"/&
在设置了 initial-scale=1 之后 ，我们终于可以以 1:1 的比例进行页面设计了。
关于 viewport ，还有一个很重要的概念是 ：iphone 的 safari 浏览器完全没有滚动条 ，而且不
“隐藏滚动条” ，是根本没有这个功能。iphone 的 safari 浏览器实际上从一开始就完整显
示了这个网页 ，然后用 viewport 查看其中的一部分。当你用手指拖动时 ，其实拖的不是页面 ，而是
viewport。
浏览器行为的改变不止是滚动条 ，交互事件也跟普通桌面不一样。这在后面会进行详细说明。
2、必须注意到 ，为了让你的页面更好地受到 Safari 的支持。必须 ：
u 声明正确的 doctype ；
u 避免使用 frameset ；
u 每一个独立的资源文件 ，HTML、CSS、JavaScript、以及非流媒体的其他多媒体文件 ，
限制在 10m 之内 ；
u 顶级入口的 JavaScript 执行时间限制为 5 秒 ，超时将自动终止 ；
u JavaScript 分配内存上限为 10m ；
同一时间最多在 Safari 内打开 8 个子窗口 （同时浏览的页面 ）。
Safari 本身还对图片有如下的限制 ：
u GIF （包括 GIF 动画 ）、PNG 与 TIFF 解压后的体积小于 2m。意思是 ，原图的长度乘以
宽度再乘以每一个像素的位数 ，得出来的大小要小于 2m ；
u JPEG 解压后最大的体积是 32m。解压体积大于 2m 的 JPG 会被进行二次抽样 ，最终显
示给用户的是二次抽样后的结果。显示时实际上是降低了精度的 ，以提高程序的执行效率。
可以看出 iPhone 对 HTML 的支持与桌面端的 Safari 是类似的 ，只是加入了更多扩展功能而已。
作为框架 ，适当嵌入 javascript
，灵活运用
CSS ，即可实现你编写
的快乐梦想。
的基本结构。很多人对
已经很熟了。在此仅做一简单复习。
&meta ……/ &
&link ……/ &
&title&……&/title&
&script type="text/javascript" src="xxxx.js"&&/script&
&style type="text/css"&……&/style&
&script Language="JavaScript"&……&/script&
&body&……&/body&
下面 ，侧重
iPhone Safari
的特性 ，详细介绍其各部分的内容。
的 iPhone Safari ，有一些与电脑上的 Safari ，特别是与
IE(Internet Explorer)
不同之处 ，以下的说明中会特别注明。
1、头&head&部分 ：
定义网页语言 ：（如果使用了扩展字符 ，请选用 gb18030 ）
&meta http-equiv="Content-Type " content="text/ charset=gb2312 "/ &
定义用户界面 ，宽度为设备宽度 （等同于 320 像素 ），并不可缩放 ）
&meta name = "viewport " content = "width = device-width, user -scalable = no "/ &
定义显示的数字串 ，不被自动识别为电话号码。否则会自动转换为拨号超链接。
&meta name="format-detection" content="telephone=no" /&
定义开发者
&meta name="Author" contect="LSi "/ &
web app 可以像原生应用一样 ，在 home 界面里上添加一个快捷方式图标
&link rel="apple -touch-icon" href="icon.png" /&
这是针对单个页面的 ，如果你把图片命名为
“apple-touch-icon.png” ，放在网站的某个目录
里面 ，该目录下所有页面都会获得添加图标的功能……
图标的要求是尺寸 57×57 ，png 格式 ，不用画蛇添足的去做圆角渐变或玻璃反光效果 ，iphone
系统会把图片自动裁剪和渲染成统一的风格……
定义可被搜索的网页关键词
&title&择吉老黄历&/title&
④&script&
定义外部 javascript
&script type="text/javascript" src="xxxx.js "&&/script&
定义所用的 CSS （层叠样式表 Cascading Style Sheet ）
&style type="text/css"&……&/style&
iPhone Safari 支持的 CSS3 的很多新特性。灵活运用
CSS ，不仅可以简化程序 ，而且可以轻松
实现很多特殊的效果。这一点 ，会在后面详细说明。
2、JavaScript 部分
&script Language="JavaScript "&……&/script&
这部分是程序实现各种功能的关键。一般包括 ：
自定义函数
简单示例 ：
&script Language="JavaScript "&
var MsgArr=new Array()
var pPot =pMin=0; pMax =9
var wAddr= "/?u=61542 "
function pSetup(s)
return (s&pMax) ? true : false
文件与内嵌 javascript
段存在变量或函数冲突时 ，按加载顺序 ，以最后的定义为准。
Javascript
段亦可放在
&body& 段之后 ，可实现先加载
&javscript&。但
必须注意 ，由于是顺序加载 ，&body& 段不能引用后面的变量或函数 ，但可以向后调用。
3、&body&部分
这是程序界面的主要部分。程序的显示、交互一般都放到这个段。
简单示例 ：
&body style="margin: 0; font -size: 12 font -family: Trebuchet MS; color: #FFFFFF"
ontouchmove="event.preventDefault()" onload="tImg.style.visibility='visible' " &
&img id="tImg" class="sImg" src="TestFile.png" onerror="pError()" /&
&table id="layerT" style=" width: 320 height: 480px "&
&tr&&th id="TitleBar" colspan="2" height="48px"&
&/th&&/tr&
&script Language="JavaScript"&
for (i=0; i&=pM i++)
document.write("&tr ontouchend ='DispImg(" + i +")' style='border-top:
1px solid #CCC'&&td id='M" + i + "'&&/td&&td width='12' & ＞&/td&&/tr&");
&tr&&td id="ToolBar" colspan="2" height="42px"&
&/td&&/tr&
&div id="layerH" style="position: width: 320 height: 480 left: 0 top:
0 background -color: RGBA(0,0,0,0.3); z-index: 1; visibility:hidden"&
&div id="layerM" style=" -webkit-border-radius:12 border:2px solid #FFF;
-webkit-box-shadow: 0px 2px 4px #888;
position: left: 24 top: 106
width: 256 height: 268 padding -left: 8 padding-right: 8
color: #FFFFFF; text-shadow: 1px 1px 1px #000; text -align:
background-color: RGBA(32,48,96,0.9);
background-image:url('BG-Msg.png'); background-repeat:no-
z-index: 1; visibility: "&
&p&&span style="font -size: 16 font -weight: bold"&使用说明&/span&&/p&
&hr noshade size="1"&
&div id="HelpText" style="height: 120px"&说明文字&/div&
&hr noshade size="1"&
&form name="formV" method="POST"&
&input type="button" class="sButton" value="确认" name="B1"
onclick=" layerH.style.visibility='hidden'" / &
简要说明 ：
ontouchmove="event.preventDefault()"
//锁定 viewport ，任何屏幕操作不移动用户界
面 （弹出键盘除外 ）。
onload="tImg.style.visibility='visible'"
// &body&加载完成后 ，显示该图片。
onerror="pError()"
//图片加载错误时 ，执行错误处理过程。（特别说明 ：在
中 ，只有图
片文件不存在 ，才返回错误 ；而在
iPhone Safari
中 ，图片文件不存在 ，或格式不正确 ，均返回错
误。因此这种方式 ，只能用来判断图片文件是否存在。）
position: width: 320 height: 480px
//设定该容器绝对定位位置 ，正好为完全
的 viewport
尺寸。（特别说明 ：除非参数值为 0 ，建议数值参数均带上单位。）
id="TitleBar"
//定义单元标志 ，其后可以使用 ：TitleBar .innerText = "标题文字"
TitleBar .innerHTML = "&b&标题文字&/b&"
来重置该单元内容。不同的是 innerText 是纯文本
内容 ，而 innerHTML 可以使用规范的 html 格式。
width: 256 height: 268 padding -left: 8 padding-right: 8
//由于设定了容器
padding 值 ，所以 ，该容器的宽度实际是 ：256 + 8 + 8 = 272 px。
z-index: 1 //设定该层的顺序。层号越大越靠上 ；若有相同层号 ，按程序中定义顺序 ，后边的靠
上 ；设定为
-1 会不显示 ，但为显示方便 ，避免层设定混乱 ，隐藏某层一般使用 ：visibility: hidden。
①font-family
字体名称 （iPhone
自带字体参见右表 ）
②font-size:
字号参数 （一般标题使用
18 pt ，正文使用
12pt ，按钮使用 14pt,工具条使用
③font-style:
斜体字的名称 （italic ）
④font-weight:
字体粗细 （取值范围从数字 100~900 ，浏览器默认的字体粗细为 400 ，默认
bold 为 700。另外可以通过参数 lighter 和 bolder 使得字体在原有基础上显得更细或更粗些。）
⑤text-transform ：文字大小写
uppercase ：所有文字大写显示
lowercase ：所有文字小写显示
capitalize ：每个单词的头字母大写显示
none ：不继承母体的文字变形参数。
⑥text-decoration ：文字修饰
underline ：为文字加下划线
overline ：为文字加上划线
line-through ：为文字加删除线
blink ：使文字闪烁
none ：不显示上述任何效果。
⑦text-align
：文本水平对齐
left ：左对齐
right ：右对齐
center ：居中对齐
：相对左右对齐
但需要注意的是 ，text-alight 是块级属性 ，只能用于&p&、&blockquqte&、&ul&、&h1&~&h6&
等标识符里。
⑧vertical-align
：文本垂直对齐
top ：顶对齐
bottom ：底对齐
text-top ：相对文本顶对齐
text-bottom ：相对文本底对齐
baseline ：基准线对齐
middle ：中心对齐
sub ：以下标的形式显示
super ：以上标的形式显示 ）
⑨text-shadow: 1px 1px 1px #000 ：文字阴影。（参数分别为 ：水平 X 方向偏移量 ；垂直 Y
方向偏移量 ；高斯模糊半径值 ；阴影颜色值 ）
①color ：颜色属性 （颜色参数取值范围 ：
以 RGB 值表示 ；以 16 进制 （hex ）的色彩值表示 ；
以默认颜色的英文名称表示 ，注意大小写 ！）
(可以使用#abc 缩写来表示#aabbcc)
RGBA(00,33,66,0.5)
(Red:0 Green:33 Blue:66 opacity:50%)
(颜色代码保留字 ，参见下表)
Black="#000000"
Green="#008000"
Gray="#808080"
White="#FFFFFF"
Silver="#C0C0C0"
Lime="#00FF00"
Yellow="#FFFF00"
Olive="#808000"
□ Fuchsia="#FF00FF"
□ Maroon="#800000" □ Red="#FF0000"
□ Purple="#800080"
Aqua="#00FFFF
Teal="#008080"
Blue="#0000FF"
Navy="#000080"
②background-color ：背景颜色
参数取值和颜色属性一样。
①background-image: url(URL)
URL 就是背景图片的存放路径。如果用
“none”来代替背景图片的存放路径 ，将什么也不显示
②background-repeat ：背景图片重复 （默认的是水平、垂直两个方向上平铺 ）
no-repeat ：不重复平铺背景图片
repeat-x ：只在水平方向上平铺
repeat-y ：只在垂直方向上平铺
③background-position ：背景定位 （用于控制背景图片在网页中显示的位置。其参数为带长
度单位的数字参数 ，其取值范围 ：
top ：相对前景对象顶对齐
bottom ：相对前景对象底对齐
left ：相对前景对象左对齐
right ：相对前景对象右对齐
center ：相对前景对象中心对齐
参数中的 center 如果用于另外一个参数的前面 ，表示水平居中 ；如果用于另外一个参数的后面 ，
表示垂直居中。 ）
①margin 边框空白。位于 BOX 模型的最外层 ，包括四项属性。格式分别如下 ：
margin-top ：顶部空白距离
margin-right ：右边空白距离
margin-bottom ：底部空白距离
margin-left ：左边空白距离
如果使用上述属性的简化方式 margin ，可以在其后连续加上四个带长度单位的数字 ，来分别表
示 margin-top、margin-right、margin-bottom、margin-left ，每个数字中间要用空格分隔。
②border 对象边框。位于边框空白和对象空隙之间 ，包括了七项属性。格式分别如下 ：
border-top ：顶边框宽度
border-right ：右边框宽度
border-bottom ：底边框宽度
border-left ：左边框宽度
border-width ：所有边框宽度
border-color ：边框颜色
border-style ：边框样式参数
其中 border-width 可以一次性设置所有的边框宽度 ，border-color 同时设置四面边框的颜色
时 ，可以连续写上四种颜色 ，并用空格分隔。上述连续设置的边框都是按 border-top、border-right、
border-bottom、border-left 的顺序。
Border-style 相对别的属性而言稍稍复杂些 ，因为它还包括了多个边框样式的参数 ：
none ：无边框。
dotted ：边框为点线。
dashed ：边框为长短线。
solid ：边框为实线。
double ：边框为双线。
groove ：根据 color 属性显示不同效果的 3D 边框
ridge ：根据 color 属性显示不同效果的 3D 边框
inset ：根据 color 属性显示不同效果的 3D 边框
outset ：根据 color 属性显示不同效果的 3D 边框
③padding 对象间隙。位于对象边框和对象之间 ，包括了四项属性。基本格式如下 ：
padding-top ：顶部间隙
padding-right ：右边间隙
padding-bottom ：底部间隙
padding-left ：左边间隙
和 margin 类似 ，padding 也可以一次性设置所有的对象间隙。
④background: url(..), url(..), url(..), url(..)
多重背景。
由精心收集。
12345678910
12345678910
12345678910 上一篇：下一篇：文章评论相关解决方案 12345678910 Copyright & &&版权所有