摘要:
这是一个陆续完善的文章,记录一些书写css制作页面过程中遇到的兼容性问题,以作记录,可待查阅参考。1、IE6浮动元素双倍边距出现条件:当浮动元素的浮动方向与边距方向一致时出现,比如:float: left;margin-left: 10px; 或者 float: right,margin-right: 10px;没什么好说的,这样设置浮动css类:.left {float: left;fisplay: inline;}.right {float: right;fisplay: inline;}2、复杂的浮动布局中,如果在两个浮动元素之间出现注释,有可能会触发IE6下最后一个文本重复的buga 阅读全文
摘要:
上次我转载了一篇【转】JavaScript最全的10种跨域共享的方法,仔细研读,终于对跨域有了一些些了解,做了几个demo加深印象.1、jsonp 方式跨越:我首先新建一个服务端页面: jsonp.php ,放在 lovefishss.sinaapp.com 下面,具体路径如下:http://lovefishss.sinaapp.com/cross-domain/jsonp.php,jsonp.php代码如下$callback = $_GET['callback'];$key = $_GET['key'];$domain = 'lovefishss.si 阅读全文
摘要:
以前经常发现某些页面的head里面有这样一句代码:<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">一直不明白,但是与自身影响不大,也就没有深入的去了解,今次使用jquery瀑布流插件Wookmark,在其demo文件中又见此meta信息,google之,解释如下:IE=edge告诉IE使用最新的引擎渲染网页,chrome=1则可以激活Chrome FrameX-UA-Compatible是IE8的一个专有属性,它告诉IE8采用何种IE版本去渲染网页,在html的标签中 阅读全文
摘要:
今天想整理一下相关项目的前端代码以及目录结构,故利用svn客户端(TortoiseSVN 1.7.2)从trunk上新建了一个branches,然后checkout到本地.打开Eclipse,点击 File -> Import -> General -> Existing Projects Workspace -> Next -> 选中 select root directory,点击 Browse 浏览,确认项目本地地址,点击 Finish。至此,项目导入完毕。现在项目已经导入进来了,但是,点击导入的项目右键选择 Team,没有相关的Update以及Commit 阅读全文
摘要:
首先感谢原作者:webApp赵海洋附上文章原地址:移动前端工作的那些事---前端制作之自适应制作篇随着移动前端的手机屏幕分辨率越来越多,自适应设计制作显得越来越重要。如何自适应屏高和屏宽是每个设计和制作人员共同需要考虑的事情。设计人员需要考虑N多分辨率的情况,而制作人员则需要考虑如何自适应布局等等。我先从设计的角度来阐述这个问题,首先要考虑如何进行自适应设计。这个需要和制作人员进行沟通后决定,如果制作人员采用响应式布局(稍后会介绍此布局)的制作方案的话,则需要设计人员根据不同的屏宽来设计不同的效果图以便提供给制作人员进行响应式布局制作。如果制作人员采用高宽最大化(稍后会介绍此布局)来进行布局制 阅读全文
摘要:
首先感谢原作者:webApp赵海洋附上文章原地址:移动前端工作的那些事---前端制作篇之框架篇--jQTouch框架移动前端框架有许多,这次简要的介绍jQTouch框架。jQTouch也是轻量级框架、它的语言基于jquery语言。上手容易。加载时间比较快,优点是动画切换很流畅、在Android和IOS上表现都不错。缺点是与其搭配的插件较少,需要一些外包插件来进行某些效果的支持,无法自定义布局样式等。首先,我们先熟悉一下jQTouch的结构代码:<!doctype html><html><head><meta charset="UTF-8&qu 阅读全文
摘要:
首先感谢原作者:webApp赵海洋附上文章原地址:移动前端工作的那些事---前端制作篇之框架篇--jqMobi框架上文中,提到了许多的移动前端框架,这次主要介绍jqMobi框架。jqMobi也是轻量级框架、它的语言基于jquery语言。并对其进行了简化,更有利于在移动设备上进行应用,并且速度很流畅。上手很容易。首先,我们要先部署jqMobi的环境,以下是代码:<!DOCTYPE html><!--HTML5 doctype--><html><head><title>jqmobi精简版本</title><meta ht 阅读全文
摘要:
首先感谢原作者:webApp赵海洋附上文章原地址:移动前端工作的那些事---前端制作篇之框架篇为了更好的提升用户体验,移动端逐渐出了许多的移动端的框架,比如Sencha Touch、JQTouch、Jquery-moblie、jqMobi等等。这些框架都有优缺点,不同的框架应用在不同的项目中。现简单阐述一下各框架的优缺点:一、Sencha Touch框架是一个重量级的框架、它上手较难,代码复杂,并且需要较强的程序基础才能学习,最开始的时候因为一个项目,想使用Sencha Touch框架,后来工期实在太紧张,根本没时间学习它并使用。所以最后转投其他框架。这个框架兼容性很高,运行起来的速度一般,需 阅读全文
摘要:
首先感谢原作者:webApp赵海洋附上文章原地址:移动前端工作的那些事---前端制作篇之javascript篇(二)在互联网中,一般用户都是通过鼠标点击、鼠标悬停、鼠标离开等执行一些前端的事件,但是在移动前端,用户却是通过手指来进行操作。从而衍生出移动前端的手势事件。鼠标中的click事件虽然也可以在移动前端进行触发,但这个事件在移动端会有大约半秒中的延迟。所以一般都不采用。在移动端的手势事件一般有四种情况:touchstart:手指放到屏幕上的时候触发touchmove:手指在屏幕上移动的时候触发touchend:手指从屏幕上拿起的时候触发touchcancel:系统取消touch事件的时候 阅读全文
摘要:
首先感谢原作者:webApp赵海洋附上文章原地址:移动前端工作的那些事---前端制作篇之javascript篇javascript(简称js)语言在移动前端应用很广。可以说必不可少,许多效果都是和js相关的。包括现在移动端的一些框架。jqmobi、jqtouch、sencha touch、jquerymobile等等。这些都是基于js而进行编写的。这篇暂时不讨论这些框架。以后会慢慢介绍其中的一两个框架的具体使用方法。这篇主要讨论一下部分常用的js事件在移动端的使用。举几个例子:1、隐藏地址导航栏:<script type="text/javascript">// 阅读全文
摘要:
首先感谢原作者:webApp赵海洋附上文章原地址:移动前端工作的那些事---前端制作篇之link标签篇上文的meta标签中,提到了部分功能要结合link标签进行使用。下面详细的解释一下移动端的link标签。link标签主要是存放CSS文件的地方,同时还有一些专属的移动端设置在这里体现。结合以下代码进行说明:<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="wi 阅读全文
摘要:
首先感谢原作者:webApp赵海洋附上文章原地址:移动前端工作的那些事---前端制作篇之meta标签篇移动端前端制作有些地方不同于互联网,这篇主要讨论的是meta标签。meta标签位于之间。是主要辅助HTML结构层的。meta标签不管在互联网前端还是在移动端都起了很重要的作用。这里只讨论移动端。附上代码进行说明:<!DOCTYPE html><!--HTML5 doctype--><html><head><title>xxx</title><meta http-equiv="Content-type&quo 阅读全文