当前位置:主页 > 丽人 > 星座物语 >

APPCan星座物语演示

作者:admin 来源:本站日期:2018-01-14 21:35

生男生女早知道,生日蛋糕的做法大全,生日蛋糕培训,生日蛋糕做法,壁花少年,壁纸贴图,避风塘奶茶店加盟

1、目录结构css文件夹:存放样式表文件 style.css js文件夹: 存放所需要的 js文件 wgtRes文件夹: 存放本地文件 images文件夹:存放页面所需的图片 config.xml文件:配置文件 index.html : 首

1、目录结构 css文件夹:存放样式表文件 style.css js文件夹: 存放所需要的 js文件 wgtRes文件夹: 存放本地文件 images文件夹:存放页面所需的图片 config.xml文件:配置文件 index.html : 首页 header部分 index_content.html : 首页内容部分,12星座 fortune.html: 各星座的运势页面的 header部分 fortune_content.html: 各星座的运势页面的内容部分 more.html : 更多页面的 header部分 more_content.html:星座名人,及星座故事等 details.html :星座名人详细页 header部分 details_content.html:星座名人详情内容 ruler.html : 星座故事详情页面 header部分 ruler_content.html:星座故事详情内容 ICON-114.png : icon图标 2、功能描述 通过本应用可以查看各星座的今日运势、本周运势、本月运势和全年运势。亦可了解各星座的传说、星座 守护星、星座档案、星座特点及星座名人、星座小故事等有趣的星座内容。 3、样式介绍 对本应用页面用到的技术做简要说明: 1、圆角部分: 四个角的样式可以单独设置 .uc-t1 { -webkit-border-top-left-radius: 0.3em; border-top-left-radius: 0.3em; -webkit-border-top-right-radius: 0.3em; border-top-right-radius: 0.3em } .uc-b1 { -webkit-border-bottom-left-radius: 0.3em; border-bottom-left-radius: 0.3em; -webkit-border-bottom-right-radius: 0.3em; border-bottom-right-radius: 0.3em } 2、背景图片自适应: 应用中用到的图片都是以背景图片的样式显示,以便协调各屏幕分辨率 如上图两种分辨率用的都是同样大小的图片,一张图片可以用到多种分辨率,这样减少了很多的图片和样 式的适配工作, 同时也减少了应用的大小,一举多得。 如下: .res23{ background:url(res-apple/icon12.png) 0 0 no-repeat !important; } .ub-img4 { -webkit-background-size:100% auto; background-size:100% auto; background-repeat:no-repeat; background-position:center; } 运用到 css3样式:background-size:width height; width和 height的大小,根据需要可以用%设置图片的显示大小 3、写出渐变效果: 如图的紫色背景渐变,是用 css3写出的效果,而非背景图片: .c-m1{ background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.6) ), color-stop(50%, rgba(255,255,255,0.2) ),color-stop(51%, rgba(255, 255, 255, 0) ), to(rgba(255, 255, 255, 0) )); background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0) 51%, rgba(255,255,255,0) 100%); background-image: linear-gradient(top, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0) 51%, rgba(255,255,255,0) 100%) ; } 4、不同分辨率适配: 为了适应各平台不同分辨率的手机,本应用采用 em和%控制字体和区域大小,根据 media判断,在此列 举部分样式以作说明: @media all and (min-width:340px) and (min-height:620px),(min-width:620px) and (min-height:340px){ html { font-size:20px; } } 5、样式分类: 对样式分类保存,类名有规律,容易寻找并可以多次运用 比如 ui-color.css文件保存的是背景颜色和字体颜色,例如: .c-m1{ background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.6) ), color-stop(50%, rgba(255,255,255,0.2) ),color-stop(51%, rgba(255, 255, 255, 0) ), to(rgba(255, 255, 255, 0) )); background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0) 51%, rgba(255,255,255,0) 100%); background-image: linear-gradient(top, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0) 51%, rgba(255,255,255,0) 100%) ; } .c-m2{ background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.4)),to(rgba(255, 255, 255, 0))); background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 100%); background-image: linear-gradient(top, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 100%) ; } .t-blu{ color:#385487; } .t-yel { color:#FFF6C4; } 4、页面介绍及 js功能 1、首页 本应用采用浮动层的方式展示页面的内容,index.html包含头部和内容部分的展示框架,index_content.html 包含星座图标的展示,index_content.html 以浮动层的方式在 index.html 的内容展示框架内显示,功能实 现如下: <script> zy_init(); window.uexOnload = function(type){ if (!type) {

本文:APPCan星座物语演示 文章地址:http://www.avira.org.cn/ainew/428221.html

    生男生女早知道,生日蛋糕的做法大全,生日蛋糕培训,生日蛋糕做法,壁花少年,壁纸贴图,避风塘奶茶店加盟