禁止滚动

$('#idl').bind("touchmove",function(e){
  e.preventDefault();
});

图片居中 (因为图片比较特别,所以需要在外面套一层div)

<div style="height:500px;width:500px;text-align:center;display:table;">
<div style="display:table-cell;vertical-align:middle;">
<img src="s_type.png" />
</div>
</div>

让左边的div撑满父div的高度(比如有时候你想让它里面的图片居中,所以要height:100%)

<div id="a">
<div id="b" style="width:50%;float:left;"></div>
<div id="c" style="width:50%;float:right;"></div>
</div>

id为c的div里面放文字,文字会撑大所在的div,文字越多,div的height越高

第一步,我们要让a也有高度,因为b,c都是浮动的,a是不会因为c而撑起来的,所以要clear:both;

<div id="a">
<div id="b" style="width:50%;float:left;"></div>
<div id="c" style="width:50%;float:right;"></div>
<div style="clear:both;"></div>
</div>

然后我在b里面加height:100%,发现没起效果

<div id="a">
<div id="b" style="width:50%;float:left;height:100%;"></div>
<div id="c" style="width:50%;float:right;"></div>
<div style="clear:both;"></div>>
</div>

后来不知道在哪里搜到的,height:100%只有在position:absolute才有效果,于是

<div id="a">
<div id="b" style="width:50%;float:left;position:absolute;height:100%;"></div>
<div id="c" style="width:50%;float:right;"></div>
<div style="clear:both;"></div>>
</div>

现在变成了屏幕的高度了,再查资料看到了这句话-----生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。

于是把它的父div改为 position:relative;

<div id="a" style="position:relative;">
<div id="b" style="width:50%;float:left;position:absolute;height:100%;"></div>
<div id="c" style="width:50%;float:right;"></div>
<div style="clear:both;"></div>>
</div>

加点颜色的效果就是

<div id="a" style="width:100px;position:relative;">
<div id="b" style="width:50%;float:left;position:absolute;height:100%;background:grey;"></div>
<div id="c" style="width:50%;float:right;">字数不确定,高度不确定。</div>
<div style="clear:both;"></div>
</div>

video可以通过poster属性设置视频没播放前的海报。

<video autobuffer="true" controls="true" height="280px" poster="http://14.23.85.239:7011/content-attachment/20160706/27060503069809121.png" preload="none" src="http://aiseet.lsdb.atianqi.com/app_3/OTTTV/12149150/50/playlist.m3u8?bitrate=400" width="100%"></video>

html5移动开发。的更多相关文章

  1. HTML5移动开发学习笔记之Canvas基础

    1.第一个Canvas程序 看的是HTML5移动开发即学即用这本书,首先学习Canvas基础,废话不多说,直接看第一个例子. 效果图为: 代码如下: <!DOCTYPE html> < ...

  2. H5案例分享:html5移动开发细微之美

    html5移动开发细微之美 1.H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=dev ...

  3. html5 app开发,你知道多少?

    随着大量新生移动设备的兴起,改变了互联网的未来,html5技术为开发者提供了一个跨平台的移动app开发方案,并且该方案具有很好的扩展性和灵活性,但就国内使用html5开发app应用技术来讲,还是有欠缺 ...

  4. HTML5界面开发工具jQuery EasyUI更新至v1.3.5

    本文转自:evget.com HTML5界面开发工具 jQuery EasyUI 最新发布v1.3.5,新版修复了多个bug,并改进了menu,tabs和slider等多个控件.jQuery Easy ...

  5. 快速入门系列--MVC--07与HTML5移动开发的结合

    现在移动互联网的盛行,跨平台并兼容不同设备的HTML5越来越盛行,很多公司都在将自己过去的非HTML5网站应用渐进式的转化为HTML5应用,使得一套代码可以兼容不同的物理终端设备和浏览器,极大的提高了 ...

  6. CutJS – 用于 HTML5 游戏开发的 2D 渲染引擎

    CutJS 是轻量级的,快速的,基于 Canvas 开发的 HTML5  2D 渲染引擎,可以用于游戏开发.它是开源的,跨平台的,与现代的浏览器和移动设备兼容.CutJS 提供了一个类似 DOM 树的 ...

  7. 优秀工具推荐:两款很棒的 HTML5 游戏开发工具

    HTML5 众多强大特性让我们不需要多么高深技术就能创建好玩的网页游戏,同时证明了开放的 Web 技术能与任何其他在游戏开发中使用的技术竞争.正如标题所说,这篇文章推荐的几款很棒 HTML5 游戏开发 ...

  8. HTML5游戏开发引擎,初识CreateJS

    CreateJS为CreateJS库,可以说是一款为HTML5游戏开发的引擎.打造 HTML5 游戏,构建新游戏,提供构建最新 HTML5 的技术.你可以通过这个网站学习如何构建跨平台和跨终端游戏.这 ...

  9. 免费的HTML5连载来了《HTML5网页开发实例详解》连载(二)

    最近新浪.百度.腾讯.京东.大众点评.淘宝等流行的网站都加大了招聘HTML5的力度,HTML5开发人员成了抢手货,本次连载的是由大众点评前端工程师和一淘网前端工程师基情奉献的<HTML5网页开发 ...

  10. HTML5游戏开发进阶指南(亚马逊5星畅销书,教你用HTML5和JavaScript构建游戏!)

    HTML5游戏开发进阶指南(亚马逊星畅销书,教你用HTML5和JavaScript构建游戏!) [印]香卡(Shankar,A.R.)著 谢光磊译 ISBN 978-7-121-21226-0 201 ...

随机推荐

  1. 15.python操作mysql

    导入包 from pymysql import* 1. 创建 Connection 连接 conn=conne(host='192.168.13.130',port=3306 ,database='' ...

  2. shell随笔

    一, case的详细用法:   参考文章(http://blog.csdn.net/dreamtdp/article/details/8048720) 语句实例:由用户从键盘输入一个字符,并判断该字符 ...

  3. windows,linux,esxi系统判断当前主机是物理机还是虚拟机?查询主机序列号命令

    参考网站:https://blog.csdn.net/yangzhenping/article/details/49996765 查序列号: http://www.bubuko.com/infodet ...

  4. 微信小程序注册身份证验证

    // 校验身份证号 //校验码校验 checkCode: function (val) { var p = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2])) ...

  5. 【RabbitMQ】ubuntu下RabbitMQ安装与简单使用

    参考:https://blog.csdn.net/the_fool_/article/details/80570971 1.安装: https://blog.csdn.net/a295277302/a ...

  6. HTML5 Canvas ( 事件交互, 点击事件为例 ) isPointInPath

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. node 把前台传来的base64码转成图片存放

    最近做个人网站头像修改用到了,在做头像修改,先做了一个图片切割,只需要上传你选中部分, 如图 这种需求 应该还是会遇到的, http://pan.baidu.com/s/1boVkn1t 这是裁剪图片 ...

  8. xe7 Unresolved external CSPIN.OBJ

    工程里打开使用了CSPIN控件的界面窗体,再编译就好了 [ilink32 Error] Error: Unresolved external 'Vcl::Controls::TControl::Set ...

  9. AS3 - 数组元素乱序方法以及效率比较

    http://www.hangge.com/blog/cache/detail_453.html

  10. Ambari安装Hadoop集群

    * System Environment:centOS6.7 1.Prepare the Environment 1)Set Up Password-less SSH : (Generate publ ...