使用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上查看代码片派生到我的代码片
步骤五:编写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上查看代码片派生到我的代码片
登录
步骤二:编写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上查看代码片派生到我的代码片
步骤二:根据官网导入js文件,需要下载unslider.js,它是基于JQuery.js的,所以需要下载2个,导入到项目中
[java]viewplaincopy在CODE上查看代码片派生到我的代码片
步骤三:为了使图片能让我们手动滑动,还需要导入2个JQuery的库,导入之后就能手动滑动了
[html]viewplaincopy在CODE上查看代码片派生到我的代码片
步骤四:为了让图片能刚好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上查看代码片派生到我的代码片
京东超市
全球购
服装城
京东生鲜
京东到家
充值中心
京东金融
领券
物流查询
我的关注
步骤二:编写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上查看代码片派生到我的代码片
掌上秒杀
0
0
:
0
0
:
0
0
更多>
¥10.00
¥100.00
¥10.00
¥100.00
¥10.00
¥100.00
京东超市
京东超市
京东超市
步骤二:编写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;
height:12px;
background:#d8505c;
}
.shop_box_sk{
}
/秒殺/
.sk_l>.sk_l_icon{
background:url("../img/sk_icon.png")no-repeat;
background-size:16px20px;
float:left;
width:16px;
height:20px;
margin-top:6px;
}
.sk_l>.sk_l_name{
font-size:15px;
color:#d8505c;
float:left;
}
.sk_l>.sk_l_time{
margin-top:10px;
float:left;
}
.sk_l>.sk_l_time>span{
float:left;
width:15px;
line-height:15px;
height:15px;
text-align:center;
background:#333;
color:#fff;
margin-left:3px;
}
.sk_l>.sk_l_time>span:nth-child(3n){
color:#333;
background:#fff;
width:5px;
}
.sk_con>ul{
width:100%;
margin:8px0;
}
.sk_con>ul>li{
width:33.33%;
float:left;
}
.sk_con>ul>li>a{
display:block;
width:100%;
margin:0auto;
border-right:1pxsolid#e0e0e0;
}
.sk_con>ul>li:last-child>a{
border-right:0;
}
.sk_con>ul>li>a>img{
width:67%;
margin:0auto;
display:block;
}
.sk_con>ul>li>p{
text-align:center;
}
.sk_con>ul>li>p:first-of-type{
color:#d8505c;
}
.sk_con>ul>li>p:last-of-type{
font-size:12px;
color:#666;
text-decoration:line-through;
}
|
|