夺命雷公狗---微信开发61----在线点播电影网2之电影网之个人中心

我们上一节课程里面基本功能都实现出来了，那么我们下一节课将开始写一个新的模块，这就是个人中心。

首先我们在index.html页面里面的底部加上一个按钮，代码如下所示：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>夺命雷公狗之电影在线点播网</title><!--宽高禁缩放 --><meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" /><!--类webapp--> <meta name="apple-mobile-web-app-capable" content="yes"><!--状态条 --> <meta name="apple-mobile-web-app-status-bar-style" content="black"><!--电话号码不是链接 --> <meta name="format-detection" content="telephone=no"><link href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/><script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script><script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js" type="text/javascript"></script></head><body><div data-role="page" id="page1"><div><img src="banner.png" width="100%" /></div><div data-role="content"><div class="ui-grid-b"><!--在实际的开发里面这就是一个循环--><div class="ui-block-a"><a href="movie.html"><img src="movie1.png" width="100%"></a></div><div class="ui-block-b"><a href="movie.html"><img src="movie2.png" width="100%"></a></div><div class="ui-block-c"><a href="movie.html"><img src="movie3.png" width="100%"></a></div><div class="ui-block-a"><a href="movie.html"><img src="movie1.png" width="100%"></a></div><div class="ui-block-b"><a href="movie.html"><img src="movie2.png" width="100%"></a></div><div class="ui-block-c"><a href="movie.html"><img src="movie3.png" width="100%"></a></div><div class="ui-block-a"><a href="movie.html"><img src="movie1.png" width="100%"></a></div><div class="ui-block-b"><a href="movie.html"><img src="movie1.png" width="100%"></a></div><div class="ui-block-c"><a href="movie.html"><img src="movie1.png" width="100%"></a></div></div><!--进入会员中的按钮 GO--><a href="user.html" target="_self" data-role="button" data-icon="gear">会员中心</a><!--进入会员中心按钮 EDF--></div><div data-role="footer"><h3>夺命雷公狗出品2015-2016</h3></div></div><div data-role="page" id="page2"><div data-role="header"><h1>header2</h1></div><div data-role="content"><img width="200px" src="http://i.cnblogs.com/images/adminlogo.gif" /></div><div data-role="footer"><h1>页面脚注</h1></div></div><div data-role="page" id="page3"><div data-role="header"><h1>header3</h1></div><div data-role="content">内容3</div><div data-role="footer"><h1>footer3</h1></div></div><div data-role="page" id="page4"><div data-role="header"><h1>header4</h1></div><div data-role="content"><b>内容4</b></div><div data-role="footer"><h1>footer4    </h1></div></div><div data-role="page" id="page5"><div data-role="header"><h1>header5</h1></div><div data-role="content"><h1>内容5</h1></div><div data-role="footer"><h1>footer5</h1></div></div></body>
<html>

核心代码如下所示：

这里用到一个data-icon，这是选择按钮左边加多一个图片的，在手册上我们可以看到还有多个图片可以选择，如下图所示：

然后开始写user.html会员中心里面的代码了，代码如下所示：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>会员中心</title><!--宽高禁缩放 --><meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" /><!--类webapp--> <meta name="apple-mobile-web-app-capable" content="yes"><!--状态条 --> <meta name="apple-mobile-web-app-status-bar-style" content="black"><!--电话号码不是链接 --> <meta name="format-detection" content="telephone=no"><link href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/><style> #main{ position:relative; background-image:url(hyk.png); background-repeat:no-repeat; background-size:100%; }#fens{ position:absolute; right:5%; top:25%; font-size:1em; font-weight:bold; } #cardId{position:absolute; right:5%; top:5%; font-size:1em; font-weight:bold; }</style><script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script><script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js" type="text/javascript"></script><script> $(document).bind('pageinit',function(){$(window).resize()}) $(window).resize(function(){ var mainwidth=+document.body.clientWidth; var mainheight=+mainwidth/477*303 ;
                document.getElementById("main").style.height=mainheight+"px"; }) </script>  </head> <body> <div data-role="page" id="page"><img src="hyzx.png" width="100%"/><div data-role="content"> <div id="main"> <div id="cardId"> 会员卡号：00001 </div> <div id="fens"> 会员积分：1000 </div> </div><div data-role="collapsible-set"><div data-role="collapsible"><h3>最新活动</h3><div class="ui-grid-a"><div class="ui-block-a"><a href="http://www.taobao.com"><b style="font-size:20px;">查看详情</b></a>买一送一活动很快就要开始啦！！！</div><div class="ui-block-b" align="right"><img src="cx.png" /></div><div class="ui-block-a"><a href="http://www.jd.com"><b style="font-size:24px;">查看详情</b></a>包情妇怕被发现？那就免费来领取叼毛牌充气娃娃</div><div class="ui-block-b" align="right"><img src="cx.png" /></div></div></div><div data-role="collapsible-set"><div data-role="collapsible"><h3>会员优惠政策</h3><p style="color:blue; font-weight:bold;">①会员注册免费领取30元代金卷</p><p style="color:blue; font-weight:bold;">②正品保障,7天包退,15天包换</p><p style="color:blue; font-weight:bold;">③会员购物邮费全免</p><p style="color:blue; font-weight:bold;">④非传销,拉人头送代金卷</p><p style="color:blue; font-weight:bold;">活动多多,您还在犹疑啥...</p></div></div></div><a href="http://www.showtp.com/" data-role="button" data-icon="home">夺命雷公狗技术交流</a><!--如果是电话按钮，下面这里的alert是必须的和head里面的 电话号码不是链接 这个也要有--><a href="tel:15388888888" data-role="button" data-icon="alert">欢迎您的来电</a></div><div data-role="footer"><h4>夺命雷公狗出品2015-2016</h4></div> </div></body>
</html>

转载于:https://www.cnblogs.com/leigood/p/5274433.html

夺命雷公狗---微信开发61----在线点播电影网2之电影网之个人中心相关推荐

夺命雷公狗---微信开发39----微信语言识别接口1
语音识别接口的基本介绍注意: 由于客户端缓存,开发者开启或者关闭语音识别功能,对新关注者立即生效,对已关注用户需要24小时生效,开发者可以从新关注帐号进行测试. 我们可以在测试号下方的体验接口权限表 ...
夺命雷公狗---微信开发26----客服消息接口基础和推送视频
我们按照上一课的套路继续改写下index.php即可实现,代码如下所示: <?php /*** wechat php test*///define your token require_once ...
夺命雷公狗---微信开发57----微网站之jquery_mobile之入门案例
这节课我们主要用到到jquery_mobile来实现一个点电影播放网站 jquery_mobile(简称JQM)其实就是基于jquery开发出来的一套移动端框架,适应移动用户端市场对浏览与体验从而进一 ...
夺命雷公狗---微信开发09----玩转单图文消息回复
index.php的代码如下: <?php /*** wechat php test*///define your token require_once "common.php&quo ...
夺命雷公狗---PHP开发APP接口---1（手动编写json）
在php里面按照json的方式产生json数据接口的定义 <?phpclass Ren{/***按json方式输出通信数据*param integer $code状态码*param strin ...
夺命雷公狗ThinkPHP项目之----商城1项目整体架构
夺命雷公狗项目之---商城本人准备更新套基于tp下开发的商城的项目,为啥呢?原因和简单,本人没使用过框架开发商城,准备用一些时间来开发套B2C的商城系统.. 项目规划: 1:项目整体架构用户部分 ...
夺命雷公狗之后台登录一条龙模版
今天用bootstrap开发了套后台登录和管理后台管理的模版,有需要的朋友可以拿去用用. 或者可以@夺命雷公狗进行技术交流.... 下载地址: http://pan.baidu.com/s/1kVff ...
夺命雷公狗-----React---5--props对象的传递
提示:props的值是不可以改变的... <!DOCTYPE html> <html lang="en"> <head><meta cha ...
夺命雷公狗TP3.2.3商城2-----后台模版引入和后台控制器的创建
首先我们来到D:\phpStudy\WWW\shop\WEB 目录下,将Home目录进行复制一份,并且改名为Admin,如下所示: 然后将我们准备好的后台首页模版放入 D:\phpStudy\W ...
夺命雷公狗—玩转SEO---62---TF-IDF核心算法与运用
比如我们站点有一篇文章,搜索引擎想过来提取一篇文章的关键词,这是涉及到数据挖掘.文本处理.信息检索等很多的领域,但是出乎意料的是,有一个非常简单的经典算法,可以给出令人相当满意的结果.它简单到都不需要 ...

夺命雷公狗---微信开发61----在线点播电影网2之电影网之个人中心

夺命雷公狗---微信开发61----在线点播电影网2之电影网之个人中心相关推荐

最新文章

热门文章