禁止滚动

$('#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. 使用Larave5.6l提交POST请求出现The page has expired due to inactivity错误

    使用Larave5.6l提交POST请求出现The page has expired due to inactivity错误 一般是由于没有添加 csrf造成的 在表单下面的 第一个行 添加如下代码即 ...

  2. 万字总结:学习MySQL优化原理,这一篇就够了!

    前言 说起MySQL的查询优化,相信大家收藏了一堆奇技淫巧:不能使用SELECT *.不使用NULL字段.合理创建索引.为字段选择合适的数据类型..... 你是否真的理解这些优化技巧?是否理解其背后的 ...

  3. plsql 执行批量文件

    plsql 执行批量文件 plsql>command window @c:\a.sql;@c:\b.sql;@c:\c.sql;

  4. J2SE 8的注解

    1. 注解概念 (1) 注解格式 modifiers @interface AnnotationName { type elementName(); type elementName() defaul ...

  5. Python之类属性的增删改查

    #类属性又称为静态变量,或者是静态数据,这些数据是他们所属的类对象绑定的,不依赖于任何类实例 class ChinesePeople: country = 'china' def __init__(s ...

  6. centos6.8 安装python2.7 or python3.6

    from:https://danieleriksson.net/2017/02/08/how-to-install-latest-python-on-centos/ 准备 # Start by mak ...

  7. Erlang/OTP:基于Behaviour的回调函数

    原始链接:https://blog.zhustec.me/posts/erlang-otp-1-callback-based-on-behaviour OTP 是什么 OTP 的全称是开源电信平台 ( ...

  8. one by one 项目 part 6

    package Controllerservlet; import java.io.IOException; import java.io.PrintWriter; import java.util. ...

  9. node集成mysql——pool连接池

    安装 mysql npm install mysql or cnpm install mysql 创建db.js,实现mysql操作模块 var mysql = require('mysql'); v ...

  10. Linux就业技术指导(一):简历撰写及面试筹备要领

    一,开场 二,模型 三,目标选材 3.1 什么是目标选材 简单说就是确定一个候选人是否符合某一个工作岗位要求的整个流程.这是对招聘方的一个培训,应聘方如果掌握了,就知道应该怎样正确的去应聘工作. 3. ...