使用H5搭建webapp主页面

上传人：知*** IP属地：北京上传时间：2023-04-22 格式：DOC 页数：16 大小：615KB 积分：12 举报 版权申诉

已阅读5页，还剩11页未读，继续免费阅读

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

使用H5搭建webapp主页面前言：在一个h5和微信小程序火热的时代，作为安卓程序员也得涉略一下h5了，不然就要落后了，据说在简历上可以加分哦，如果没有html和css和js基础的朋友，可以自行先学习一下，很简单的。推荐0基础能力一般的，我建议可以看传智播客的韩顺平老师的视频或者毕向东老师的视频，能力强的同学可以在w3c文档自学。主页面搭建思路分析：Meta标签中的ViewPort属性：ViewPort是承载代码层的一个View视图，而手机浏览器看到网页是承载ViewPort视图。因此，手机看到的层级关系，从上到下：代码View视图->ViewPort视图->浏览器视图。所以我们只需要修改ViewPort这一层的属性，比如缩放等，即可对手机进行响应式布局，即安卓的自适应布局。实现的效果图：（左右拖拽即可实现自动调整大小）（PS：动图无法上传将就看下吧）步骤三：由于每个浏览器的默认边距，默认属性的不同，我们需要全部初始化一遍，达到适应不同浏览器。编写我们的common.css文件，记得在index.html中导入[css]viewplaincopy在CODE上查看代码片派生到我的代码片*,::after,::before{margin:0;padding:0;/*当用户点击iOS的Safari浏览器中的链接或JavaScript的可点击的元素时，覆盖显示的高亮颜色*/-webkit-tap-highlight-color:transparent;/*设置所有是以边框开始计算宽度百分比*/-webkit-box-sizing:border-box;box-sizing:border-box;}body{font-size:14px;font-family:"MicrosoftYaHei","sans-serif";color:#333;}a{color:#333;text-decoration:none;}a:hover{text-decoration:none;}input{border:none;outline:none;/*清除移动端默认的表单样式*/-webkit-appearance:none;}li{list-style:none;}步骤四：编写index.html文件[html]viewplaincopy在CODE上查看代码片派生到我的代码片<body><divclass="layout"></div></body>步骤五：编写index.css，来对这个layout类进行布局[css]viewplaincopy在CODE上查看代码片派生到我的代码片.layout{width:100%;max-width:640px;min-width:320px;height:1000px;margin:0auto;background:#ff0000;}实现效果图：轮播图和导航栏的搭建思路分析：1、导航栏实现：导航栏使用css的position=fixed和z-index=1000，使它固定在顶部并在网页的最上层，左边的icon和右边登陆按钮使用绝对位置来调整距离左边右边上边的距离，而中间的form表单只要Padding-Left和Padding-Right就可以随屏幕伸缩。2、自动轮播效果实现：这里使用了jQuery的一个js开源库unslider。3、十个选项按钮实现：使用一个列表，设置每一个li为块元素，宽度为20%，并且让10个选项左浮动，就可以自动排好两行。实现的效果图：导航栏实现步骤一：编写html文件，将导航栏做成一个盒子，并放置需要的组件，并为它们取好类名，方便css的编写[html]viewplaincopy在CODE上查看代码片派生到我的代码片<headerclass="nav_header"><divclass="nav"><ahref="#"class="nav_logo"></a><formaction="#"><spanclass="nav_search_icon"></span><inputtype="search"placeholder="搜索关键字"/></form><ahref="#"class="nav_login">登录</a></div></header>步骤二：编写css文件，将放置的东西设置好宽高，宽用百分比可以自适应，高度则是自己测量[css]viewplaincopy在CODE上查看代码片派生到我的代码片/*nav*/.nav_header{position:fixed;height:40px;width:100%;top:0;left:0;z-index:1000;}.nav_header>.nav{width:100%;height:40px;max-width:640px;min-width:320px;margin:0auto;background:rgba(201,21,35,0.00);position:relative;}.nav_header>.nav>.nav_logo{width:80px;height:30px;position:absolute;background:url("../img/top_logo.png")no-repeat;background-size:80px20px;top:10px;left:0;}.nav_header>.nav>.nav_login{width:50px;height:40px;line-height:40px;text-align:center;position:absolute;right:0;top:0;color:white;font-size:15px;}.nav_header>.nav>form{width:100%;padding-left:85px;padding-right:50px;height:40px;}.nav_header>.nav>form>input{width:100%;height:30px;border-radius:15px;margin-top:5px;padding-left:30px;}.nav_header>.nav>form>.nav_search_icon{height:20px;width:20px;background:url("../img/top_search.png");background-size:20px20px;position:absolute;left:90px;top:10px;}自动轮播实现步骤一：根据官网编写自动轮播html文件[java]viewplaincopy在CODE上查看代码片派生到我的代码片<divclass="banner"><div><ul><li><a><imgsrc="img/banner_01.jpg"></a></li><li><a><imgsrc="img/banner_02.jpg"></a></li><li><a><imgsrc="img/banner_03.jpg"></a></li><li><a><imgsrc="img/banner_04.jpg"></a></li><li><a><imgsrc="img/banner_05.jpg"></a></li></ul></div></div>步骤二：根据官网导入js文件，需要下载unslider.js，它是基于JQuery.js的，所以需要下载2个，导入到项目中[java]viewplaincopy在CODE上查看代码片派生到我的代码片<scripttype="text/javascript"src="js/jquery-2.1.4.min.js"></script><scripttype="text/javascript"src="js/ider.js"></script><script>$(function(){$('.banner').unslider({speed:500,delay:3000,nav:true,//是否启动导航图标dots:true,//是否出先圆点点arrows:false,autoplay:true//自动轮播});})</script>步骤三：为了使图片能让我们手动滑动，还需要导入2个JQuery的库，导入之后就能手动滑动了[html]viewplaincopy在CODE上查看代码片派生到我的代码片<scripttype="text/javascript"src="js/jquery.event.move.js"></script><scripttype="text/javascript"src="js/jquery.event.swipe.js"></script>步骤四：为了让图片能刚好100%显示出来，并且实现自动轮播导航圆点，需要在css中加入实现[css]viewplaincopy在CODE上查看代码片派生到我的代码片/*banner*/.bannerulliaimg{width:100%;}.unslider{overflow:auto;margin:0;padding:0;/*Added*/position:relative;}.unslider-nav{position:absolute;width:100%;bottom:2%;}十个选项按钮实现步骤一：编写html文件[html]viewplaincopy在CODE上查看代码片派生到我的代码片<navclass="item"><ulclass="clearfix"><li><ahref="#"><imgsrc="img/nav_01.png"alt=""/><p>京东超市</p></a></li><li><ahref="#"><imgsrc="img/nav_02.png"alt=""/><p>全球购</p></a></li><li><ahref="#"><imgsrc="img/nav_03.png"alt=""/><p>服装城</p></a></li><li><ahref="#"><imgsrc="img/nav_04.png"alt=""/><p>京东生鲜</p></a></li><li><ahref="#"><imgsrc="img/nav_05.png"alt=""/><p>京东到家</p></a></li><li><ahref="#"><imgsrc="img/nav_06.png"alt=""/><p>充值中心</p></a></li><li><ahref="#"><imgsrc="img/nav_07.png"alt=""/><p>京东金融</p></a></li><li><ahref="#"><imgsrc="img/nav_08.png"alt=""/><p>领券</p></a></li><li><ahref="#"><imgsrc="img/nav_09.png"alt=""/><p>物流查询</p></a></li><li><ahref="#"><imgsrc="img/nav_10.png"alt=""/><p>我的关注</p></a></li></ul></nav>步骤二：编写css文件[css]viewplaincopy在CODE上查看代码片派生到我的代码片/*item*/.item{width:100%;height:180px;background:#fff;margin-top:-4px;border-bottom:1pxsolid#e0e0e0;}.item>ul{width:100%;}.item>ul>li{width:20%;float:left;}.item>ul>li>a{width:100%;display:block;padding-top:20px;}.item>ul>li>a>img{width:40px;height:40px;display:block;margin:0auto;}.item>ul>li>a>p{text-align:center;color:#666;}商品区块的搭建思路分析：1、秒杀模块：可以分为头部的倒计时和内容部分三个li存放三个图，并且右边界为1px。2、左一大图、右两小图：这里使用模块化开发，在css写好width=50%、左右两边1px的border和左浮动右浮动的类，直接在html创建好后使用即可。左大图采用左浮动，右小图采用右浮动，大小都为50%。3、左两小图、右一大图：左小图采用左浮动，右大图采用有浮动。实现的效果图：准备工作编写common.css，用于模块化开发，只要在class里面放置需要的类名即可：[css]viewplaincopy在CODE上查看代码片派生到我的代码片.fl{float:left;}.fr{float:right;}.m_l10{margin-left:10px;}.m_r10{margin-right:10px;}.m_b10{margin-bottom:10px;}.m_t10{margin-top:10px;}.b_l1{border-left:1pxsolid#e0e0e0;}.b_r1{border-right:1pxsolid#e0e0e0;}.b_b1{border-bottom:1pxsolid#e0e0e0;}.w_50{width:50%;display:block;}.w_50>img{width:100%;display:block;}.clearfix::before,.clearfix::after{content:"";height:0;line-height:0;display:block;visibility:hidden;clear:both;}秒杀区块、左大图右小图、左小图右大图步骤一：编写html文件[html]viewplaincopy在CODE上查看代码片派生到我的代码片<mainclass="shopItem"><sectionclass="shop_box"><divclass="shop_box_titno_border"><divclass="flm_l10sk_l"><spanclass="sk_l_icon"></span><spanclass="sk_l_namem_l10">掌上秒杀</span><divclass="sk_l_timem_l10"><span>0</span><span>0</span><span>:</span><span>0</span><span>0</span><span>:</span><span>0</span><span>0</span></div></div><divclass="frm_r10"><ahref="#">更多></a></div></div><divclass="sk_con"><ulclass="clearfix"><li><ahref="#"><imgsrc="img/detail01.jpg"alt=""/></a><p>¥10.00</p><p>¥100.00</p></li><li><ahref="#"><imgsrc="img/detail02.jpg"alt=""/></a><p>¥10.00</p><p>¥100.00</p></li><li><ahref="#"><imgsrc="img/detail01.jpg"alt=""/></a><p>¥10.00</p><p>¥100.00</p></li></ul></div></section><sectionclass="shop_box"><divclass="shop_box_tit"><h3>京东超市</h3></div><divclass="clearfix"><ahref="#"class="flw_50b_r1"><imgsrc="img/cp1.jpg"alt=""/></a><ahref="#"class="frw_50b_b1"><imgsrc="img/cp2.jpg"alt=""/></a><ahref="#"class="frw_50"><imgsrc="img/cp3.jpg"alt=""/></a></div></section><sectionclass="shop_box"><divclass="shop_box_tit"><h3>京东超市</h3></div><divclass="clearfix"><ahref="#"class="frw_50b_l1"><imgsrc="img/cp4.jpg"alt=""/></a><ahref="#"class="flw_50b_b1"><imgsrc="img/cp5.jpg"alt=""/></a><ahref="#"class="flw_50"><imgsrc="img/cp6.jpg"alt=""/></a></div></section><sectionclass="shop_box"><divclass="shop_box_tit"><h3>京东超市</h3></div><divclass="clearfix"><ahref="#"class="flw_50b_r1"><imgsrc="img/cp1.jpg"alt=""/></a><ahref="#"class="frw_50b_b1"><imgsrc="img/cp2.jpg"alt=""/></a><ahref="#"class="frw_50"><imgsrc="img/cp3.jpg"alt=""/></a></div></section></main>步骤二：编写css文件[css]viewplaincopy在CODE上查看代码片派生到我的代码片/*shopItem*/.shopItem{padding:05px;}.shopItem>.shop_box{width:100%;margin-top:10px;background:#fff;box-shadow:001px#e0e0e0;}.shopItem>.shop_box>.shop_box_tit{width:100%;height:32px;line-height:32px;border-bottom:1pxsolid#e0e0e0;}.shopItem>.shop_box>.shop_box_tit.no_border{border-bottom:none;}.shopItem>.shop_box>.shop_box_tit>h3{padding-left:18px;font-size:15px;color:#666;font-weight:normal;position:relative;}.shopItem>.shop_box>.shop_box_tit>h3::before{content:"";width:3px;position:absolute;top:10px;left:10px;h

人人文库> 全部分类> 行业资料 > 各类标准

温馨提示

1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

使用H5搭建webapp主页面

文档简介

温馨提示

最新文档

评论

使用H5搭建webapp主页面

文档简介

温馨提示

最新文档

评论

相关文档