七牛云移动端H5界面实战
首先我自己作为一名大四的准毕业生，我也有过与大多数同学一样苦恼的问题，对于博客中的资源由于积分的要求而无法继续学习，所以本人的大多数资源基本打算免费提供。后续如有变更还请见谅。再有本人水平有限，如有错误，还请各位前辈同僚批评指正。
学习目标
1）学习<meta name=”viewport”...>，移动端适配的设置
2）弹性布局
3）植入video标签
4）植入js库，满足移动端的界面适应
viewport的认知
通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。在默认情况下，一般来讲，移动设备上的viewport都是要大于浏览器可视区域的，这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小，所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站，移动设备上的浏览器都会把自己默认的viewport设为980px或1024px（也可能是其它值，这个是由设备自己决定的），但带来的后果就是浏览器会出现横向滚动条，因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。
这里不做太多的赘述，如果大家想更深一步的了解viewport,可以去网络上找更多的资源。在这里我就不给大家提供了，而且作为一名合格的程序猿，首先你要有做一名程序猿的思维，你不能做一个伸手党，而是要学会单独思考以及百度，谷歌。
颜色的设置
1）给出颜色的单词: background-color: yellow;
2）十六进制数（0~9 A~F）: background-color: #FFFFFF;
3）Rgb颜色设置；红（0-255），蓝（0-255），蓝（0-255）三种颜色搭配后形成混合颜色， background-color: rgb(251, 251, 251)
可能大家经常会在网络上接触到各种颜色编码，有些新学的兄弟姐妹可能觉得很高端的样子，其实通俗理解就是用16进制数表示颜色，以及用rgb三原色表示，如果这些概念你不懂，还是那句老话，你不要做伸手党，要学会百度，谷歌。
下面不多bb直接上你要准备的资源:
开发工具
首先要搞开发那么你要有一个合适的IDE,就是集成开发工具。本次项目用的是Hbuliderx,这是咱们中国人开发的，而且是完全免费的，至于其他部分，仁者见仁智者见智，我认为作为一款前端IDE相比于DW和sublime，studio code或webstorm我认为作为一款免费的工具，还是很良心了，我可以给出大家网址：点我进入官网，剩下的部分由大家自己完成，还是那句话不要做伸手党。
UI原型
1、首页界面
2、文件界面
3、好友界面
4、我的界面
素材下载
前面我已经说过，本次素材不需要积分我下面就把素材给大家：
素材下载
源代码
下面不多bb直接上代码：
1、首页：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<title></title>
</head>
<body>
<div class="box">
<!-- 第一部分 -->
<div class="item1">
<div class="item1-1"></div>
<div class="item1-2">哈密瓜,你好<img src="icon/vip.png"></div>
<div class="item1-3">
<a><img src="icon/添加.png"></a>
<a><img src="icon/下载.png"></a>
<a><img src="icon/放大镜.png"></a>
</div>
</div>
<!-- 第二部分 -->
<div class="item2">
<div class="item2-1">
<img src="icon/相册.png" >
<span>相册</span>
</div>
<div class="item2-1">
<img src="icon/视频.png" >
<span>视频</span>
</div>
<div class="item2-1">
<img src="icon/文档.png" >
<span>文档</span>
</div>
<div class="item2-1">
<img src="icon/音乐.png" >
<span>音乐</span>
</div>
</div>
<!-- 灰色分界线-->
<div class="item3"></div>
<!-- 第三部分 -->
<div class="item4">
<div class="item4-1">
<div class="item4-1-1">最近</div>
<div class="item4-1-2">
<div>收藏</div>
<div><img src="icon/浏览眼睛.png" ></div>
</div>
</div>
<!-- 视频收藏 -->
<div class="item4-2">
<div class="item4-2-1">
06-21 20:23 网页存储
</div>
<div class="item4-2-2">
<video src="video/array.mp4" controls="controls"></video><!-- control 属性供添加播放、暂停和音量控件。 -->
</div>
<div class="item4-2-3">25_数组基础算法实战——1.mp4</div>
</div>
<!-- 文件目录-1 -->
<div class="item4-3">
<div class="item4-3-1">06-21 20:23网页存储</div>
<div class="item4-3-2">
<div><img src="icon/文件夹.png"></div>
<div>JVM</div>
</div>
<div class="item4-3-2">
<div><img src="icon/文件夹.png"></div>
<div>JVM</div>
</div>
<div class="item4-3-2">
<div><img src="icon/文件夹.png"></div>
<div>JVM</div>
</div>
</div>
<!-- 文件目录-1 -->
<div class="item4-3">
<div class="item4-3-1">06-21 20:23网页存储</div>
<div class="item4-3-2">
<div><img src="icon/文件夹.png"></div>
<div>JVM</div>
</div>
<div class="item4-3-2">
<div><img src="icon/文件夹.png"></div>
<div>JVM</div>
</div>
<div class="item4-3-2">
<div><img src="icon/文件夹.png"></div>
<div>JVM</div>
</div>
</div>
<!-- 文件目录-1 -->
<div class="item4-3">
<div class="item4-3-1">06-21 20:23网页存储</div>
<div class="item4-3-2">
<div><img src="icon/文件夹.png"></div>
<div>JVM</div>
</div>
<div class="item4-3-2">
<div><img src="icon/文件夹.png"></div>
<div>JVM</div>
</div>
<div class="item4-3-2">
<div><img src="icon/文件夹.png"></div>
<div>JVM</div>
</div>
</div>
<!-- 视频收藏 -->
<div class="item4-2">
<div class="item4-2-1">
06-21 20:23 网页存储
</div>
<div class="item4-2-2">
<video src="video/array.mp4" controls="controls"></video><!-- control 属性供添加播放、暂停和音量控件。 -->
</div>
<div class="item4-2-3">25_数组基础算法实战——1.mp4</div>
</div>
<!-- 视频收藏 -->
<div class="item4-2">
<div class="item4-2-1">
06-21 20:23 网页存储
</div>
<div class="item4-2-2">
<video src="video/array.mp4" controls="controls"></video><!-- control 属性供添加播放、暂停和音量控件。 -->
</div>
<div class="item4-2-3">25_数组基础算法实战——1.mp4</div>
</div>
</div>
<div class="item9">
<div class="item9-1">
<img src="icon/蓝云.png" />
<span>首页</span>
</div>
<div class="item9-1">
<img src="icon/灰文件夹.png" />
<span>文件</span>
</div>
<div class="item9-1">
<img src="icon/灰好友.png" />
<span>好友</span>
</div>
<div class="item9-1">
<img src="icon/灰我的.png" />
<span>我的</span>
</div>
</div>
</div>
</body>
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
</html>
2、文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/wenjian.css"/>
</head>
<body>
<div class="box">
<!-- 第一部分 -->
<div class="item1">
<div class="item1-1">
分类
<div class="item1-1-1"></div>
</div>
<div class="item1-2">
<a><img src="icon/添加.png"></a>
<a><img src="icon/下载.png"></a>
<a><img src="icon/放大镜.png"></a>
</div>
</div>
<div class="item2">
<img src="icon/搜索.png" >
<input type = "text" placeholder="搜索网盘资源" class="search" />
</div>
<div class="file">
<div class="file-img"><img src="icon/文件夹.png" ></div>
<div class="file-alpha">
<span>基本算法案例</span>
<span>2019-05-11 23:11</span>
</div>
</div>
<div class="file-space"></div>
<div class="file">
<div class="file-img"><img src="icon/文件夹.png" ></div>
<div class="file-alpha">
<span>基本算法案例</span>
<span>2019-05-11 23:11</span>
</div>
</div>
<div class="file-space"></div>
<div class="file">
<div class="file-img"><img src="icon/文件夹.png" ></div>
<div class="file-alpha">
<span>基本算法案例</span>
<span>2019-05-11 23:11</span>
</div>
</div>
<div class="file-space"></div>
<div class="file">
<div class="file-img"><img src="icon/文件夹.png" ></div>
<div class="file-alpha">
<span>基本算法案例</span>
<span>2019-05-11 23:11</span>
</div>
</div>
<div class="file-space"></div>
<div class="file">
<div class="file-img"><img src="icon/文件夹.png" ></div>
<div class="file-alpha">
<span>基本算法案例</span>
<span>2019-05-11 23:11</span>
</div>
</div>
<div class="file-space"></div>
<div class="file">
<div class="file-img"><img src="icon/文件夹.png" ></div>
<div class="file-alpha">
<span>基本算法案例</span>
<span>2019-05-11 23:11</span>
</div>
</div>
<div class="file-space"></div>
</div>
<div class="item9">
<div class="item9-1">
<div><img src="icon/灰云.png" ></div>
<span>首页</span>
</div>
<div class="item9-1">
<div><img src="icon/蓝文件夹.png" ></div>
<span>文件</span>
</div>
<div class="item9-1">
<div><img src="icon/灰好友.png" ></div>
<span>好友</span>
</div>
<div class="item9-1">
<div><img src="icon/灰我的.png" ></div>
<span>我的</span>
</div>
</div>
</body>
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
</html>
3、好友：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/friend.css"/>
</head>
<body>
<div class="box">
<div class="item1">
<div class="item1-1"></div>
<span>好友</span>
<div class="item1-2">
<div><img src="icon/好友列表.png" ></div>
<div><img src="icon/添加.png" ></div>
</div>
</div>
<!-- <div class="itema">
</div> -->
<div class="item2">
<div class="item2-1">
<span>开启通知，知道谁给你分享了文件</span>
<div class="item2-2-1">
去开启
</div>
<div class="item2-2-2">
X
</div>
</div>
</div>
<div class="itema">
</div>
<div class="item3">
<div class="item3-1">
<img src="images/icon02.jpg" sizes="100%">
</div>
<div class="item3-2">
<span>吴彦祖</span>
<!-- <span>在吗?</span> -->
<span>已添加好友打个招呼吧</span>
</div>
<div class="item3-3">06-21 17:23</div>
</div>
<div class="friend-space"></div>
<div class="item3">
<div class="item3-1">
<img src="images/icon03.jpg" sizes="100%">
</div>
<div class="item3-2">
<span>赵丽颖</span>
<!-- <span>在吗?</span> -->
<span>已添加好友打个招呼吧</span>
</div>
<div class="item3-3">06-21 17:23</div>
</div>
<div class="friend-space"></div>
<div class="item3">
<div class="item3-1">
<img src="images/icon05.jpg" sizes="100%">
</div>
<div class="item3-2">
<span>安妮</span>
<!-- <span>在吗?</span> -->
<span>在吗？</span>
</div>
<div class="item3-3">06-21 17:23</div>
</div>
<div class="friend-space"></div>
<div class="item3">
<div class="item3-1">
<img src="images/icon04.jpg" sizes="100%">
</div>
<div class="item3-2">
<span>阿狸</span>
<!-- <span>在吗?</span> -->
<span>已添加好友打个招呼吧</span>
</div>
<div class="item3-3">06-21 17:23</div>
</div>
<div class="friend-space"></div>
</div>
<div class="item9">
<div class="item9-1">
<div><img src="icon/灰云.png" ></div>
<span>首页</span>
</div>
<div class="item9-1">
<div><img src="icon/灰文件夹.png" ></div>
<span>文件</span>
</div>
<div class="item9-1">
<div><img src="icon/蓝好友.png" ></div>
<span>好友</span>
</div>
<div class="item9-1">
<div><img src="icon/灰我的.png" ></div>
<span>我的</span>
</div>
</div>
</body>
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
</html>
4、我的：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/mine.css"/>
</head>
<body>
<div class="box">
<div class="item1">
<div class="item1-1">
<img src="icon/扫一扫.png" >
<span>扫一扫</span>
</div>
<div class="item1-2">
<img src="icon/设置.png" >
</div>
</div>
<div class="item2">
<div class="item2-1"></div>
<div class="item2-2">
<div class="item2-2-1">
<span>三溪风月醉</span>
</div>
<div class="item2-2-2">
<span>220G/2068G</span>
<div class="item2-2-21">
<div class="item2-2-211"></div>
<div class="item2-2-212"></div>
</div>
</div>
</div>
<div class="item2-3">
<span>签到</span>
</div>
</div>
<div class="item3">
<div class="item3-1">
<div class="item3-1-1">
<img src="icon/会员俱乐部.png" >
<span>开通超级会员</span>
</div>
<div class="item3-1-2">
<span>了解特权</span>
<img src="icon/右.png" >
</div>
</div>
</div>
<div class="item4">
<span>网盘功能</span>
<span>更多></span>
</div>
<div class="item5">
<div class="item5-1">
<img src="icon/相册2.png" >
<span>相册备份</span>
</div>
<div class="item5-1">
<img src="icon/回收站.png" >
<span>回收站</span>
</div>
<div class="item5-1">
<img src="icon/会员.png" >
<span>我的会员</span>
</div>
<div class="item5-1">
<img src="icon/活动.png" >
<span>活动中心</span>
</div>
</div>
<div class="item5">
<div class="item5-1">
<img src="icon/硬件.png" >
<span>智能硬件</span>
</div>
<div class="item5-1">
<img src="icon/通讯录.png" >
<span>通讯录</span>
</div>
<div class="item5-1">
<img src="icon/闪电.png" >
<span>闪电互传</span>
</div>
<div class="item5-1">
<img src="icon/动态.png" >
<span>分享动态</span>
</div>
</div>
<div class="item6"></div>
<div class="item5">
<div class="item5-1">
<img src="icon/借.png" >
<span>蚂蚁花呗</span>
</div>
<div class="item5-1">
<img src="icon/打印.png" >
<span>云打印</span>
</div>
<div class="item5-1">
<img src="icon/搜一搜.png" >
<span>搜一搜</span>
</div>
<div class="item5-1">
<img src="icon/SIM.png" >
<span>免流量卡</span>
</div>
</div>
<div class="item6"></div>
<div class="item4">
<span>设置</span>
<span> <span>
</div>
<div class="item7">
</div>
<div class="item4">
<span>用户反馈</span>
<span> <span>
</div>
<div class="item8">
<span>退出登陆</span>
</div>
</div>
<div class="item9">
<div class="item9-1">
<div><img src="icon/灰云.png" ></div>
<span>首页</span>
</div>
<div class="item9-1">
<div><img src="icon/灰文件夹.png" ></div>
<span>文件</span>
</div>
<div class="item9-1">
<div><img src="icon/灰好友.png" ></div>
<span>好友</span>
</div>
<div class="item9-1">
<div><img src="icon/蓝我的.png" ></div>
<span>我的</span>
</div>
</div>
</body>
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
</html>
大家记得一定要添加下面的js链接。要不然可能界面会出现问题，这个是传说中的JavaScript还是那句话不懂的话自行百度。
对于最近收藏栏：
再附加几个属性：
a.弹性布局中 align-content 属性的用法
b.align-content：flex-start | flex-end | center
c.flex-start：相对于父容器的顶部对齐
d.flex-end：相对于父容器的底部对齐
e.center: 相对父容器纵向方向居中
f.align-content必须要搭配flex-wrap: wrap 才起作用
g.思考：align-content 和 align-items 之间的区别是什么？？？
本次实战结束，可能大家会有很多很多的问题，但是别忘了不当伸手党。
扫一扫
557
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
