走在技术的前沿，做好web前端。改变世界，改变自己。
/* * Author: http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries/ */ /* Smartphones (portrait and landscape) ———– */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } /* Smartphones (landscape) ———– */ @media only screen and (min-width : 321px) { /* Styles */ } /* Smartphones (portrait) ———– */ @media only screen and (max-width [...]
本文转载自http://uecss.com/mobile-platform-web-front-end-development-skills-summary.html 留下以后做移动开发学习用 －－－－－－－－－－－华丽的分割线－－－－－－－－－－－－－ 您或许正在或准备参与一个WepApp项目，您或许正在Google搜索mobile development相关的文章，您或许是一名专业的WEB前端工程师，您或许想学习Mobile前端开发方面的技术，如果您被我说中了，呵呵那么这篇文章将为您带来意想不到的惊喜！当您看到这篇文章时，哥已经默认认为您是一名资深的WEB前端工程师，如果您不是，可能您会遇见许多不理解或听不懂的专业术语或前端技术（包括WEB、Mobile）。但是这没有关系，给自己一点信心吧，用心的阅读下去…… 自Iphone和Android这两个牛逼的手机操作系统发布以来，在互联网界从此就多了一个新的名词-WebApp(意为基于WEB形式的应用程序，运行在高端的移动终端设备)。 开发者们都知道在高端智能手机系统中有两种应用程序：一种是基于本地（操作系统）运行的APP；一种是基于高端机的浏览器运行的WebApp，本文将主要讲解后者。 WebApp与Native App有何区别呢？ Native App： 开发成本非常大一般使用的开发语言为JAVA、C++、Objective-C 更新体验较差、同时也比较麻烦每一次发布新的版本，都需要做版本打包，且需要用户手动更新（有些应用程序即使不需要用户手动更新，但是也需要有一个恶心的提示）。 非常酷因为native app可以调用IOS中的UI控件以UI方法，它可以实现WebApp无法实现的一些非常酷的交互效果 Native app是被Apple认可的Native app可以被Apple认可为一款可信任的独立软件，可以放在Apple Stroe出售，但是Web app却不行。 Web App： 开发成本较低使用web开发技术就可以轻松的完成web app的开发 升级较简单升级不需要通知用户，在服务端更新文件即可，用户完全没有感觉 维护比较轻松和一般的web一样，维护比较简单，它其实就是一个站点 Webapp说白了就是一个针对Iphone、Android优化后的web站点，它使用的技术无非就是HTML或HTML5、CSS3、JavaScript，服务端技术JAVA、PHP、ASP。 当然，因为这些高端智能手机（Iphone、Android）的内置浏览器都是基于webkit内核的，所以在开发WEBAPP时，多数都是使用HTML5和CSS3技术做UI布局。当使用HTML5和CSS3l做UI时，若还是遵循着一般web开发中使用HTML4和CSS2那样的开发方式的话，这也就失去了WEBAPP的本质意义了，且有些效果也无法实现的，所以在此又回到了我们的主题–webapp的布局方式和技术。 在此说明一下，在此所说的移动平台前端开发是指针对高端智能手机（如Iphone、Android）做站点适配也就是WebApp，并非是针对普通手机开发Wap 2.0，所以在阅读本篇文章以前，你需要对webkit内核的浏览器有一定的了解，你需要对HTML5和CSS3有一定的了解。如果你已经对此有所了解，那现在就开始往下阅读吧…… 1、首先我们来看看webkit内核中的一些私有的meta标签，这些meta标签在开发webapp时起到非常重要的作用 <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" /> <meta content="yes" name="apple-mobile-web-app-capable" /> <meta content="black" name="apple-mobile-web-app-status-bar-style" /> <meta content="telephone=no" name="format-detection" /> 第一个meta标签表示：强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览； 第二个meta标签是iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览； 第三个meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式； 第四个meta标签表示：告诉设备忽略将页面中的数字识别为电话号码； 2、HTML5标签的使用 [...]
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> .wrapper { width:200px; height: 200px; border:1px solid #ccc; display:table-cell; vertical-align:middle; *position:relative; } .outer { width:100%; *position:absolute; display:inline-block; *top:50%; } .inner { *position:relative; top:-50%; background: #eee; } </style> </head> <body> <div class="wrapper"> <div class="outer"> <div class="inner"> ie7,ie6用了hack<br /> hack是一种精神 <br /> hack是一种态度 </div> </div> </div> </body> </html> function [...]
完全由css3制作的radio和checkbox,前面这个纯属个人练习，理论上可以完美支持ie10,safria3,opera,chrome等高级浏览器，详细完整的请往下面看原创作者的内容。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>完全由css3制作的radio和checkbox</title> <style type="text/css"> *{margin:0;padding:0; list-style:none;} .content{width:900px;margin:0 auto;padding:20px;} .checkbox li{width:100px;height:30px; position:relative;margin:5px;} .checkbox li label{display:inline-block; cursor:pointer;} .checkbox li input{ position:absolute;} .checkbox li span{ position:absolute;top:0;width:100px;height:30px;border-radius:4px;-ms-border-radius:4px;color:#fff;text-indent:-999px;} .checkbox input[type=checkbox] + span{ border:1px solid #ccc; background-color:transparent; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#C8C8C8", endColorstr="#F3F3F3"); background:-moz-linear-gradient(top , #C8C8C8, #F3F3F3) repeat scroll 0 0 transparent; background:-webkit-linear-gradient(top , #C8C8C8, #F3F3F3) repeat [...]
以下代码测试环境xp: ie 6/7/8 FF 3.6/4.0 safria 5 opera 11(注：在opera11下图片居中的没有通过，其它都可以)
首页顶部登陆模块
常常看到有些页面里的登陆的地方文字和input框总是无法对齐的现象，有些就是对齐了也不能做到每个浏览器兼容，也有一些做的特别麻烦，让每个元素都float来解决问题，个人感觉用太多的float来解决这些问题终究是不太好的。下面是我经过一些尝试，自我感觉好点的处理方法
<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS：target 伪类练习</title> <meta name="author" content="令昔"> <meta name="description" content=""> <meta name="keywords" content=""> <style type="text/css"> div,body,ul,li{margin:0;padding:0;} body{ font:normal 12px/24px Arial, Helvetica, sans-serif;} ul,li{ list-style:none;} .bodyer{width:500px;height:200px;margin:0 auto; border:1px solid #ccc;} header{height:37px; position:relative;} nav ul{height:36px;border-bottom:1px solid #ccc;} nav ul li{float:left;margin:10px 10px 0 10px;border:1px solid #ccc; border-bottom:none;width:80px; line-height:26px; text-align:center; background:#ebebeb;} nav ul li:hover{ background:#fff;} [...]
CSS代码
filter: Alpha(opacity=10);
-moz-opacity:.1;
opacity:0.1;
标签嵌套关系到语义化的问题，同时也会导致浏览器解析不正常，有时可能嵌套错误在浏览器里也可以正常显示，浏览器实际解析后的代码也与源代码有所不同。
今天遇到了一个p标签嵌套form标签出错的问题。如果按照理论上来讲的话是不应该出现问题的。form标签应该也可以嵌套在p标签里面，p是块级元素，form也是块级元素。块级元素嵌套在块级元素也无可厚非的。
但是往往我们在form外面嵌套标签，是为了一些样式而加的。。。。。不说那么多了。直接看demo吧：
无意间终于又找到了那个调试在线页面的firebuglite特放出来给大家共享，这下就全了： 1，在线调用 <a href="javascript:(function(){var d=document, s=d.getElementById(‘firebug-lite’);if(s!=null)return;s=d.createElement(‘script’);s.type=’text/javascript’;s.src=’https://getfirebug.com/firebug-lite.js’;d.body.appendChild(s);})();void(0);">firebug-lite</a> function changeTsize(){document.getElementById(“runcode_f8G7Wx”).style.height = document.getElementById(“runcode_f8G7Wx”).scrollHeight + “px”;}window.setTimeout(changeTsize,0); 提示：你可以先修改部分代码再运行。 将以上代码放在页面中运行，右键添加firebug-lite到收藏夹中，用的时候打开收藏夹点击firebug-lite链接就行了。这个方法是最方便的了。 另外还有以下两种方法可供大家选择 1.远程调用 <script src="https://getfirebug.com/firebug-lite.js"></script> function changeTsize(){document.getElementById(“runcode_L9fGUT”).style.height = document.getElementById(“runcode_L9fGUT”).scrollHeight + “px”;}window.setTimeout(changeTsize,0); 提示：你可以先修改部分代码再运行。 将以上代码加入页面head部分就可以了。 2，本地操作 javascript:(function(F,i,r,e,b,u,g,L,I,T,E){if(F.getElementById(b))return;E=F[i+'NS']&&F.documentElement.namespaceURI;E=E?F[i+'NS'](E,’script’):F[i](‘script’);E[r](‘id’,b);E[r](‘src’,I+g+T);E[r](b,u);(F[e](‘head’)[0]||F[e](‘body’)[0]).appendChild(E);E=new%20Image;E[r](‘src’,I+L);})(document,’createElement’,'setAttribute’,'getElementsByTagName’,'FirebugLite’,’4′,’firebug-lite.js’,'releases/lite/latest/skin/xp/sprite.png’,'https://getfirebug.com/’,'#startOpened’); function changeTsize(){document.getElementById(“runcode_EnlrRx”).style.height = document.getElementById(“runcode_EnlrRx”).scrollHeight + “px”;}window.setTimeout(changeTsize,0); 提示：你可以先修改部分代码再运行。 打开需要调试的页面，在浏览器地址栏输入以上代码，回车即可。
令昔（王亚森）