第三次人机界面

最后一次人机界面设计，老师让做的是基于在手机上能显示网页的软件或者系统。这次题材是自己小组定的。

当时一开始我就想到做一个关于游戏的网页，结果也就这样做咯。然而这次也是最后一次，都是我完成的。因为真的，有w3school这个学习网站，好多实例可以应用，在加上自己找的一个资源。我也就自己一个人完成了，因为毕竟只有界面，我认为还是蛮简单的说。以下就来展示下这次效果和代码。注：来自网络的帮助肯定是有的，所以如果有哪位前辈看到自己的代码在这里的话，请见谅。我以此表达感谢。界面的演示是在手机模拟浏览器opera下。

首先，是主界面：

首页就是看到导航栏和下面的新闻咨询。来用的都是原始的界面，没有很多颜色铺垫。这两天就看需要加不加的问题咯。代码：

<div data-role="page" id="page1">  <div data-role="header">    <h1>欢迎来到青游网</h1>    <div data-role="navbar">      <ul>        <li><a href="#page1" data-icon="home">首页</a></li>        <li><a href="#page2" data-icon="arrow-r">游戏分类</a></li>        <li><a href="#page3" data-icon="arrow-r">游戏图库</a></li>        <li><a href="#page4" data-icon="arrow-r">最新攻略</a></li>        <li><a href="#page5" data-icon="arrow-r">青游商场</a></li>              </ul>    </div>  </div><div data-role="content">    <ul data-role="listview" data-inset="true">      <li><a data-ajax="false" href="尝试-今日热点.html"><img src="寒冰.jpg" alt="lol" class="ui-li-icon">【英雄联盟】寒冰射手将进行大幅度改动</a></li>      <li><a href="#"><img src="cf.jpg" alt="cf" class="ui-li-icon">【穿越火线】新女性角色即将闪亮登场</a></li>      <li><a href="#"><img src="dnf.jpg" alt="dnf" class="ui-li-icon">【DNF】卷土谈DNF职业各有千秋各有擅场</a></li>      <li><a href="#"><img src="奇迹暖暖.jpg" alt="nn" class="ui-li-icon">【奇迹暖暖】星法法同款套装亮相！</a></li>      <li><a href="#"><img src="守望先锋.jpg" alt="cf" class="ui-li-icon">【守望先锋】2016暴雪嘉年华现场门票将首次在中国发售</a></li>    </ul>  </div>  </div><div data-role="page" id="page2">  <div data-role="header">    <h1>欢迎来到青游网</h1>    <div data-role="navbar">      <ul>        <li><a href="#page1" data-icon="home">首页</a></li>        <li><a href="#page2" data-icon="arrow-r">游戏分类</a></li>        <li><a href="#page3" data-icon="arrow-r">游戏图库</a></li>        <li><a href="#page4" data-icon="arrow-r">最新攻略</a></li>        <li><a href="#page5" data-icon="arrow-r">青游商场</a></li>              </ul>    </div>  </div> <div data-role="content">    <div data-role="navbar">      <ul>        <li><a data-ajax="false" href="尝试-游戏分类.html" data-icon="plus">全部</a></li>        <li><a href="#" data-icon="minus">角色扮演</a></li>        <li><a href="#" data-icon="delete">动作格斗</a></li>        <li><a href="#" data-icon="check">冒险解谜</a></li>        <li><a href="#" data-icon="info">策略棋牌</a></li>        <li><a href="#" data-icon="forward">即时战略</a></li>        <li><a href="#" data-icon="back">射击游戏</a></li>        <li><a href="#" data-icon="star">休闲益智</a></li>        <li><a href="#" data-icon="gear">女性专区</a></li>        <li><a href="#" data-icon="search">体育竞技</a></li>      </ul>     </div> </div></div><div data-role="page" id="page3">  <div data-role="header">    <h1>欢迎来到青游网</h1>    <div data-role="navbar">      <ul>        <li><a href="#page1" data-icon="home">首页</a></li>        <li><a href="#page2" data-icon="arrow-r">游戏分类</a></li>        <li><a href="#page3" data-icon="arrow-r">游戏图库</a></li>        <li><a href="#page4" data-icon="arrow-r">最新攻略</a></li>        <li><a href="#page5" data-icon="arrow-r">青游商场</a></li>              </ul>    </div>  </div>  <div data-role="content">   <table width="100%" height="100%" align="center" border="0"><tr><td colspan="2" align="center" > </td></tr><tr align="center"><td> <a data-ajax="false" href="尝试-图片滑动.html"> <img src="lol1.jpg" width="140" height="200"> <p>王者荣耀</p> </a> </td><td> <a href="#"> <img src="皮卡丘1.jpg" width="140" height="200"> <p>口袋皮卡丘</p>  </a> </td><tr><td olspan="2"> </td></tr> <tr align="center"><td> <a href="#"> <img src="天天酷跑1.jpg" width="140" height="200"> <p>天天酷跑</p> </a> </td><td>  <a href="#"> <img src="我的世界1.jpg" width="140" height="200"> <p>我的世界</p> </a> </td> </tr></table>      </div>    </div><div data-role="page" id="page4">  <div data-role="header">    <h1>欢迎来到青游网</h1>    <div data-role="navbar">      <ul>        <li><a href="#page1" data-icon="home">首页</a></li>        <li><a href="#page2" data-icon="arrow-r">游戏分类</a></li>        <li><a href="#page3" data-icon="arrow-r">游戏图库</a></li>        <li><a href="#page4" data-icon="arrow-r">最新攻略</a></li>        <li><a href="#page5" data-icon="arrow-r">青游商场</a></li>              </ul>    </div>  </div>    <div data-role="content">    <ul data-role="listview" data-inset="true">      <li><a data-ajax="false" href="尝试-视频教学.html"><img src="qq飞车1.jpg" alt="feiche" class="ui-li-icon">【QQ飞车】双喷技术详细教学</a></li>      <li><a href="#"><img src="地下城1.jpg" alt="dnf" class="ui-li-icon">【DNF】王者操作带来白手连招</a></li>        <li><a href="#"><img src="cf1.jpg" alt="dnf" class="ui-li-icon">【穿越火线】幽灵模式下的四大鬼跳</a></li>        <li><a href="#"><img src="单击1.jpg" alt="dnf" class="ui-li-icon">【守望先锋】全英雄特点属性图文解析攻略</a></li>         <li><a href="#"><img src="单击2.jpg" alt="dnf" class="ui-li-icon">【我的世界】新手玩家如何生存</a></li>          <li><a href="#"><img src="单击3.jpg" alt="dnf" class="ui-li-icon">【奇迹暖暖】奇迹暖暖战斗爱丽丝套装属性攻略</a></li>    </ul>  </div> </div><div data-role="page" id="page5">  <div data-role="header">    <h1>欢迎来到青游网</h1>    <div data-role="navbar">      <ul>        <li><a href="#page1" data-icon="home">首页</a></li>        <li><a href="#page2" data-icon="arrow-r">游戏分类</a></li>        <li><a href="#page3" data-icon="arrow-r">游戏图库</a></li>        <li><a href="#page4" data-icon="arrow-r">最新攻略</a></li>        <li><a href="#page5" data-icon="arrow-r">青游商场</a></li>              </ul>    </div>  </div>  <div data-role="content">  <form method="post" action="尝试-今日热点.html" data-ajax="false">      <div data-role="fieldcontain">        <input type="search" name="search" id="search" placeholder="搜索内容...">      </div>      <input type="submit" data-inline="true" value="提交">    </form>      <td> <a href="尝试-鼠标.html" data-ajax="false"> <img src="鼠标1.jpg"  weight="680" height="125"> <div style="position:absolute;left:225px;top:248px;"><p class="index_txt">雷蛇鼠标</p> <p class="index_txt1">有线/双模 游戏鼠标</p> </div></td>    </a>    <br />        <td> <a href="#"> <img src="鼠标2.jpg"  weight="140" height="140"> <div style="position:absolute;left:225px;top:380px;"><p class="index_txt">金刚鼠标</p> <p class="index_txt1">炼狱蝰蛇升级版/2013</p> </div></td>    </a>    <br />    <td> <a href="#"> <img src="人偶2.jpg"  weight="140" height="170"> <div style="position:absolute;left:225px;top:540px;"><p class="index_txt">木木</p> <p class="index_txt1">可爱呆萌的木木</p> </div></td>    </a>    <br />    <td> <a href="#"> <img src="人偶1.jpg"  weight="140" height="185"> <div style="position:absolute;left:225px;top:700px;"><p class="index_txt">龙的传人</p> <p class="index_txt1">他的精神你值得拥有</p> </div></td>    </a>    <br />    <td> <a href="#"> <img src="手办1.jpg"  weight="140" height="128"> <div style="position:absolute;left:225px;top:870px;"><p class="index_txt">卡莉斯塔</p> <p class="index_txt1">你也会她一样的</p> </div></td>    </a>    <br />    <td> <a href="#"> <img src="手办2.jpg"  weight="140" height="180"> <div style="position:absolute;left:225px;top:1020px;"><p class="index_txt">克劳德</p> <p class="index_txt1">守护最重要的东西</p> </div></td>    </a>    <br />       </div></div>

之后点击一个新闻后，出现新闻界面：

这个也简单，就是文字图片的插入。代码如下

<td><p align=center><font style=font:15pt face="黑体" color="#3300FF">寒冰射手将进行大幅度改动</font></p><p align=center ><font style="font-size:9px" face="黑体" color="#000000">2016.05.23 路透社</font></p><p align=center ><img src="寒冰.jpg" width="150" height="100"></p><p><font style="font-size:14px" face="黑体" color="#000000">    艾希是Freljord大陆上少数获得冰霜射手头衔的人，但却心肠火热。和她出众的箭术一样为人称道的，是即使在最可怕的环境下她仍是足智多谋。她擅长将冰川苔原上的寒冷注入箭里，手腕轻轻一动就可减缓敌人速度。她可以在数百尺外发出猛烈的一击，冻结最强大的敌人。她与生俱来的美貌，艾希在正义广场赢得了所有人的尊敬。</font></p><p><font style="font-size:14px" face="黑体" color="#000000">    艾希起初来到战争学院为召唤师服务，只是想借此赢得足够的影响力和支持，并最终给她的王国带来和平。这个王国从阿瓦罗萨和三姐妹时代起就内战不断。在获得无数场胜利后，艾希开始发挥她在联盟积攒的影响力。有传言说，艾希和英雄泰达米尔在正义之地外已经联合起来。但是她却否认了这个传言。所有人都在关注艾希，她在联盟的成功将最终为人民带来持续的和平。</font></p></td>

然后跟着导航栏走，游戏分类：

可以选择你喜欢的游戏类型，代码是在主页的代码中，因为是用id控制导航栏的，所以点击一个分类后，出现的就是：

游戏的下载量可以看到，如果要查看游戏详细情况可以点击右边的箭头：

这个和新闻热点很类似。以上两个代码为

<div data-role="page" id="pageone">  <div data-role="content">    <h2>全部游戏</h2>    <ul data-role="listview" data-inset="true">      <li>        <a href="#">        <img src="cf.jpg">        <h2>穿越火线</h2>        <p>下载量：150万</p>        </a>        <a data-ajax="false" href="尝试-穿越火线.html">Some Text</a>      </li>      <li>        <a href="#">        <img src="寒冰.jpg">        <h2>英雄联盟</h2>        <p>下载量：100万</p>        </a>        <a href="#">Some Text</a>      </li>      <li>        <a href="#">        <img src="萝卜保卫战.jpg">        <h2>萝卜保卫战</h2>        <p>下载量：200万</p>        </a>        <a href="#">Some Text</a>      </li>      <li>        <a href="#">        <img src="迷你死神.jpg">        <h2>迷你死神</h2>        <p>下载量：50万</p>        </a>        <a href="#">Some Text</a>      </li>      <li>        <a href="#">        <img src="英雄之剑.jpg">        <h2>英雄之剑</h2>        <p>下载量：10万</p>        </a>        <a href="#">Some Text</a>      </li>      <li>        <a href="#">        <img src="炸弹人合集.jpg">        <h2>炸弹人合集</h2>        <p>下载量：8万</p>        </a>        <a href="#">Some Text</a>      </li>      <li>        <a href="#">        <img src="自由小镇.jpg">        <h2>自由小镇</h2>        <p>下载量：40万</p>        </a>        <a href="#">Some Text</a>      </li>    </ul>  </div></div><p align="center"><font style="font-size:17px" face="黑体" color="#000000">穿越火线:枪战王者</font></p><p align="center"><font style="font-size:10px" face="黑体" color="#0000FF">大小: 316.3MB 版本: 1.0.7.60 下载次数: 1852万 来自: 开放平台</font></p><p align="center"><img src="穿越火线1.jpg" width="290" height="320" /></p><p align="center"><img src="穿越火线2.jpg" width="290" height="320" /></p><p><font style="font-size:14px" face="黑体" color="#000000">    《穿越火线：枪战王者》是一款由韩国Smilegate研发商及腾讯游戏三年的倾力打造的CF正版FPS手游，完美传承了PC端的品质和玩法，同时还针对手机端的操作特点，进行了针对枪战玩家习惯的定制化适配与优化，让玩家能够在手机上真正享受枪战游戏带来的乐趣和快感，将三亿鼠标的枪战梦想延续到了手机上。</font></p><button>下载游戏</button>

游戏攻略是一些游戏的攻略介绍，点击之后里面有视频演示：

这里插入了视频是一个应用点。代码：

<video width="402px" height="245px" controls="controls"> <source src="QQ飞车双喷教学视频.mp4" type="video/mp4"></source>  </video> <p><font style="font-size:14px" face="黑体" color="#000000">    双喷是飞车所必须的一种技在普通漂移的基础上,增加一次简短的漂移,使得普通漂移的喷气变成两次喷气,该技能可以使得漂移聚气更多能。</font></p>

之后青游商场里面是一些商品介绍，点击你想看得商品会得到详细信息，最下面的进入店铺是直接链接到了淘宝的对应店铺。

代码如下：

<p><font style="font-size:27px" face="黑体" color="#000000">雷蛇鼠标</font></p><p><font style="font-size:15px" face="黑体" color="#0000FF">Razer雷蛇鼠标 雷蛇炼狱蝰蛇 炼狱蝰蛇升级版/2013 自定义宏编程</font></p><p align="center"><img src="雷蛇1.jpg" width="290" height="320" /></p><li title="基本信息">产品名称: 基本信息</li><li title="1">包装体积: 1</li><li title="Razer/雷蛇">品牌: Razer/雷蛇</li><li title="炼狱蝰蛇2013">型号: 炼狱蝰蛇2013</li><li title="官方标配">套餐类型: 官方标配</li><li title="1">毛重: 1</li><p><font style="font-size:30px" face="黑体" color="#000000">如果你真的对此产品感兴趣，请进入店铺！</font></p><a data-ajax="false" href="https://item.taobao.com/item.htm?spm=a230r.1.14.33.j51dah&id=530857851836&ns=1&abbucket=17#detail"><button>进入店铺</button>

最后的就是图库，图库里面应用到图片的滑动显示，值得一用：

图片的滑动是在网上找到的，感谢：

<script type="text/javascript" src="jquery-2.1.4/jquery.js"></script> <style type="text/css">  * {   padding: 0px;   margin: 0px;  }  a {   text-decoration: none;  }  ul {   list-style: outside none none;  }  .slider, .slider-panel img, .slider-extra {   width: 296px;   height: 403px;  }  .slider {   text-align: center;   margin: 30px auto;   position: relative;  }  .slider-panel, .slider-nav, .slider-pre, .slider-next {   position: absolute;   z-index: 8;  }  .slider-panel {   position: absolute;  }  .slider-panel img {   border: none;  }  .slider-extra {   position: relative;  }  .slider-nav {   margin-left: -51px;   position: absolute;   left: 50%;   bottom: 4px;  }  .slider-nav li {   background: #3e3e3e;   border-radius: 50%;   color: #fff;   cursor: pointer;   margin: 0 2px;   overflow: hidden;   text-align: center;   display: inline-block;   height: 18px;   line-height: 18px;   width: 18px;  }  .slider-nav .slider-item-selected {   background: blue;  }  .slider-page a{   background: rgba(0, 0, 0, 0.2);   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000);   color: #fff;   text-align: center;   display: block;   font-family: "simsun";   font-size: 22px;   width: 28px;   height: 62px;   line-height: 62px;   margin-top: -31px;   position: absolute;   top: 50%;  }  .slider-page a:HOVER {   background: rgba(0, 0, 0, 0.4);   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);  }  .slider-next {   left: 100%;   margin-left: -28px;  } </style> <script type="text/javascript">  $(document).ready(function() {   var length,    currentIndex = 0,    interval,    hasStarted = false, //是否已经开始轮播    t = 3000; //轮播时间间隔   length = $('.slider-panel').length;   //将除了第一张图片隐藏   $('.slider-panel:not(:first)').hide();   //将第一个slider-item设为激活状态   $('.slider-item:first').addClass('slider-item-selected');   //隐藏向前、向后翻按钮   $('.slider-page').hide();   //鼠标上悬时显示向前、向后翻按钮,停止滑动，鼠标离开时隐藏向前、向后翻按钮，开始滑动   $('.slider-panel, .slider-pre, .slider-next').hover(function() {    stop();    $('.slider-page').show();   }, function() {    $('.slider-page').hide();    start();   });   $('.slider-item').hover(function(e) {    stop();    var preIndex = $(".slider-item").filter(".slider-item-selected").index();    currentIndex = $(this).index();    play(preIndex, currentIndex);   }, function() {    start();   });   $('.slider-pre').unbind('click');   $('.slider-pre').bind('click', function() {    pre();   });   $('.slider-next').unbind('click');   $('.slider-next').bind('click', function() {    next();   });   /**    * 向前翻页    */  function pre() {    var preIndex = currentIndex;    currentIndex = (--currentIndex + length) % length;    play(preIndex, currentIndex);   }   /**    * 向后翻页    */  function next() {    var preIndex = currentIndex;    currentIndex = ++currentIndex % length;    play(preIndex, currentIndex);   }   /**    * 从preIndex页翻到currentIndex页    * preIndex 整数，翻页的起始页    * currentIndex 整数，翻到的那页    */  function play(preIndex, currentIndex) {    $('.slider-panel').eq(preIndex).fadeOut(500)     .parent().children().eq(currentIndex).fadeIn(1000);    $('.slider-item').removeClass('slider-item-selected');    $('.slider-item').eq(currentIndex).addClass('slider-item-selected');   }   /**    * 开始轮播    */  function start() {    if(!hasStarted) {     hasStarted = true;     interval = setInterval(next, t);    }   }   /**    * 停止轮播    */  function stop() {    clearInterval(interval);    hasStarted = false;   }   //开始轮播   start();  }); </script> </head><body><div class="slider">   <ul class="slider-main">    <li class="slider-panel">     <a href=><img alt="a" title="a" src="lol1.jpg"></a>    </li>    <li class="slider-panel">     <a href=><img alt="b" title="b" src="lol2.jpg"></a>    </li>    <li class="slider-panel">     <a href=><img alt="c" title="c" src="lol3.jpg"></a>    </li>    <li class="slider-panel">     <a href=><img alt="d" title="d" src="lol4.jpg"></a>    </li>   </ul>   <div class="slider-extra">    <ul class="slider-nav">     <li class="slider-item">1</li>     <li class="slider-item">2</li>     <li class="slider-item">3</li>     <li class="slider-item">4</li>    </ul>    <div class="slider-page">     <a class="slider-pre" href="javascript:;;"><</a>     <a class="slider-next" href="javascript:;;">></a>    </div>   </div>  </div> <p><font style="font-size:14px" face="黑体" color="#000000">    作为最红的一款5V5团战手游，《王者荣耀》可谓俘获了大批粉丝的心。既然是团战游戏，怎么能不找三五好友一起开黑呢?随着五人排位系统的登场，五黑变得更加有趣。试想一下，与小伙伴们一起携手冲上王者，这种升华为战友的友谊简直让人感动的泪崩啊。</font></p>

以上就是这次的基本全部内容，人机界面也接近尾声了，静候下周的今天早上在课堂上展示讲解。