在开发日常落地页的时候,每当碰到一些很酷炫的宣传图用css实现很复杂且耗时的时候,一般采取切图然后将其放在页面中,在这个过程中发现<img/>标签中图片下方会有一行小空白,影响了与后一部分内容的衔接。

经查其原因是内联元素<img/>的默认vertical-align是baseline,可从以下几种方式解决这个问题:

1、设置此img元素的vertical-align为bottom;

2、设置此img元素的display:block;

3、设置图片的浮动属性,img {float:left;}。如果要实现图文混排,这种方法是很好的选择。

4、设置此img元素的父元素的行高为较小值,或者设置其font-size:0,不过这种方式会影响div内的其他inline元素,不推荐。

还有就是清楚浮动的常用的几种方法,网上教程五花八门很多很杂,整理了几种常见的兼容性好的方法留待以后参考:

1、添加新元素,应用clear:both;

2、使用伪类元素作用于浮动元素的父亲,这种方法清除浮动是现在网上最拉风的一种清除浮动,他就是利用:after和:before来在元素内部插入两个元素块,从面达到清除浮动的效果。其实现原理类似于clear:both方法,只是区别在于:clear在html插入一个div.clear标签,而outer利用其伪类clear:after在元素内部增加一个类似于div.clear的效果。

3、父级div定义 overflow: auto,使用overflow属性来清除浮动有一点需要注意,overflow属性共有三个属性值:hidden,auto,visible。我们可以使用hiddent和auto值来清除浮动,但切记不能使用visible值,如果使用这个值将无法达到清除浮动效果,其他两个值都可以,其区据说在于一个对seo比较友好,另个hidden对seo不是太友好。

最后是关于meta标签的一些用法:

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

width:设置viewport的宽度为一个正整数或字符串'device=width',device-width 为设备的宽度,

height:设置viewport的高度,一般设置了宽度会自动解析出高度,可以不用设置

initial-sacle:默认缩放比例,为一个数字,可以带小数

minimum-scale:允许用户最小缩放比例,为一个数字,可以带小数

maximum-scale:允许用户最大缩放比例,为一个数字,可以带小数

user-scalable:是否允许手动缩放

针对IOS的Safari顶端状态条的央视(可选default/black/black-translucent)

<meta name="apple-mobile-web-app-status-bar-style" content="black"/>

IOS中禁用将数字识别为电话号码/忽略Android平台中对邮箱地址的识别

<meta name="format-detection" content="telephone=no,email=no" />

APP落地页开发中的一些小经验~的更多相关文章

  1. Android开发中实现桌面小部件

    详细信息请参考原文:Android开发中实现桌面小部件 在Android开发中,有时候我们的App设计的功能比较多的时候,需要根据需要更简洁的为用户提供清晰已用的某些功能的时候,用桌面小部件就是一个很 ...

  2. Android开发的16条小经验总结

    Android开发的16条小经验总结,希望对各位搞Android开发的朋友有所帮助. 1. TextView中的getTextSize返回值是以像素(px)为单位的, 而setTextSize()是以 ...

  3. JAVA开发中遇到的小白点

    这里主要是自己个人开发中遇到的一些小问题,自己攒起来,来弥补自己薄弱的JAVA基础,大神不要见笑 1. DateFormat格式化的HH和hh区别: public static boolean com ...

  4. APP在实际开发中应注意的关键点

    在APP开发过程中,开发者比较注重的是功能模块的实现,从而忽略了APP的设计问题,特别是企业开发APP,但是,APP设计是APP开发中非常重要的一个环节,APP界面设计直接影响到APP用户的感官,因此 ...

  5. 使用 App Inventor 2 开发简单的安卓小游戏

    App Inventor2 是一个简单的在线开发安卓应用程序的工具,通过此工具,我们可以很轻松地开发安卓应用. 这里介绍的是笔者自己写的一个小游戏,游戏中玩家通过左右倾斜手机控制“水库”的左右移动,收 ...

  6. RS开发中的一些小技巧[不定期更新]

    从9月份一直忙到了现在,项目整体的改版工作也完成了十有八九了,有些事情只有你自己真正的做了,你才能明白:哦,原来还可以这个样子,这样做真的好了很多呢,接下来我就分享一些最近遇到的RS开发的一些小技巧, ...

  7. 如何理解直播APP源码开发中的音视频同步

    视频 直播APP源码的视频的播放过程可以简单理解为一帧一帧的画面按照时间顺序呈现出来的过程,就像在一个本子的每一页画上画,然后快速翻动的感觉. 但是在实际应用中,并不是每一帧都是完整的画面,因为如果直 ...

  8. Java开发中经典的小实例-(二分法)

    public int binarySearch(int[] data,int aim){//以int数组为例,aim为需要查找的数 int start = 0; int end = data.leng ...

  9. Weex开发中的应用小笔记

    内容: 获取输入或其他操作使得值一直改变并在一段不改变的时间后执行下一步操作(输入搜索关键字并执行搜索) https://vuejs.org/v2/guide/computed.html?spm=a2 ...

随机推荐

  1. url rewrite

    http://www.microsoft.com/taiwan/technet/iis/expand/URLRewrite.aspx http://www.iis.net/learn/extensio ...

  2. 牛顿方法(Newton-Raphson Method)

    本博客已经迁往http://www.kemaswill.com/, 博客园这边也会继续更新, 欢迎关注~ 牛顿方法是一种求解等式的非常有效的数值分析方法. 1.  牛顿方法 假设\(x_0\)是等式的 ...

  3. sap IRfcTable 转成 DataTable

    public DataTable GetDataTableFromRFCTable(IRfcTable myrfcTable) { DataTable loTable = new DataTable( ...

  4. datagrid 动态列

    var options={}; $(function(){ var myNj = 9; //初始化 $("#disgrid").datagrid({ type: 'POST', n ...

  5. 轻量级IOC框架:Ninject (下)

    一,创建依赖链(Chains of Dependency) 当我们向Ninject请求创建一个类型时,Ninject会去检查该类型和其他类型之间的耦合关系.如果有额外的依赖,Ninject也会解析它们 ...

  6. 关于导出Excel

    Asp.Net 在刚毕业那会,做项目全是服务器控件.导出Excel的代码也很简单,在button触发后台事件后,后台生成一个excel文件,然后读取成字节,输出到客户端. Response.AddHe ...

  7. Linux常用命令回顾

    文件操作:ls 查看文件ls -a 查看全部文件,包括隐藏文件(以.开头)ls -l 查看文件的详细信息(ll同样的效果)ls -lh 查看文件的详细信息,人性化显示,文件大小标注单位文件权限-代表文 ...

  8. [前端]分享一个Bootstrap可视化布局的网站

    如果你像我一样:是个前端渣,能看懂css和html,略懂Bootstarp,懒! 当你每次都想独立完成一个web页面而不知道从哪里下手的时候,那么下面的这个网站,就是你所以需要的! http://ww ...

  9. .Net魔法堂:log4net详解

    一.作用 提供一个记录日志的框架,可以将日志信息记录到文件.控制台.Windows事件日志和数据库(MSSQL.Acess.Oracle.DB2和SQLite等). 二.先看看示例,感受一下吧   c ...

  10. 后缀数组 --- HDU 3518 Boring counting

    Boring counting Problem's Link:   http://acm.hdu.edu.cn/showproblem.php?pid=3518 Mean: 给你一个字符串,求:至少出 ...