Category Archives: Frontend

区别各种IE浏览器和火狐的css写法

  1.区别IE和非IE浏览器代码如下:#tip {background:blue;background:red \9;}2.区别IE6,IE7,IE8,FF【区别符号】：「\9」、「*」、「_」【示例】：代码如下:#tip {background:blue;background:red \9;*background:black;_background:orange;}【说明】：因为IE系列浏览器可读「\9」，而IE6和IE7可读「*」(米字号)，另外IE6可辨识「_」(底线)，因此可以依照顺序写下来，就会让浏览器正确的读取到自己看得懂得CSS语法，所以就可以有效区分IE各版本和非IE浏览器(像是Firefox、Opera、Google Chrome、Safari等)。3.区别IE6、IE7、Firefox (方法 1)【区别符号】：「*」、「_」【示例】：代码如下:#tip {background:blue;*background:black;_background:orange;}【说明】：IE7和IE6可读「*」(米字号)，IE6又可以读「_」(底线)，但是IE7却无法读取「_」，至于Firefox(非IE浏览器)则完全无法辨识「*」和「_」，因此就可以透过这样的差异性来区分IE6、IE7、Firefox4.区别IE6、IE7、Firefox (方法 2)【区别符号】：「*」、「!important」【示例】：代码如下:#tip {background:blue;*background:green !important;*background:orange;}【说明】：IE7可以辨识「*」和「!important」，但是IE6只可以辨识「*」，却无法辨识「!important」，至于Firefox可以读取「!important」但不能辨识「*」因此可以透过这样的差异来有效区隔IE6、IE7、Firefox。5.区别IE7、Firefox【区别符号】：「*」、「!important」【示例】：代码如下:#tip {background:blue;*background:green !important;}【说明】：因为Firefox可以辨识「!important」但却无法辨识「*」，而IE7则可以同时看懂「*」、「!important」，因此可以两个辨识符号来区隔IE7和Firefox。6.区别IE6、IE7 (方法 1)【区别符号】：「*」、「_」【示例】：代码如下:#tip {*background:black;_background:orange;}【说明】：IE7和IE6都可以辨识「*」(米字号)，但IE6可以辨识「_」(底线)，IE7却无法辨识，透过IE7无法读取「_」的特性就能轻鬆区隔IE6和IE7之间的差异。7.区别IE6、IE7 (方法 2)【区别符号】：「!important」【示例】：代码如下:#tip {background:black !important;background:orange;}【说明】：因为IE7可读取「!important;」但IE6却不行，而CSS的读取步骤是从上到下，因此IE6读取时因无法辨识「!important」而直接跳到下一行读取CSS，所以背景色会呈现橘色。8.区别IE6、Firefox【区别符号】：「_」【示例】：代码如下:#tip {background:black;_background:orange;}【说明】：因为IE6可以辨识「_」(底线)，但是Firefox却不行，因此可以透过这样的差异来区隔Firefox和IE6，有效达成CSS hack。 区别不同浏览器，CSS hack写法： 区别IE6与FF：        background:orange;*background:blue; 区别IE6与IE7：        background:green !important;background:blue; 区别IE7与FF：        background:orange; *background:green; 区别FF，IE7，IE6：        background:orange;*background:green !important;*background:blue; 注： IE都能识别*;标准浏览器(如FF)不能识别*； IE6能识别*，但不能识别 !important, IE7能识别*，也能识别!important; FF不能识别*，但能识别!important; 另外再补充一个，下划线"_", IE6支持下划线，IE7和firefox均不支持下划线。 于是大家还可以这样来区分IE6，IE7，firefox background:orange;*background:green;_background:blue; —————————————- HACK对照表 —————————————-                   IE6 IE7 FF  _                 √   ×  × *                  √   √  ×  !important          ×   √  √  —————————————- 注：不管是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面。  

Web的UI框架 X-Tag

X-Tag 是一个对浏览器默认的HTML元素外观进行重写的UI框架。 在线演示：http://mozilla.github.com/x-tag/demo.html 官网:http://x-tags.org/

Dojo Mobile

Dojo Mobile 框架是一套移动终端的Web应用开发框架，是 Dojo 的一个子项目。Dojo Mobile主要面向手持设备上的Web富客服端应用开发，提供了iPhone和android两套主题，使得基于iPhone或者Android的Web应用具有手机本地应用的外观和效果，而同时也给了开发者更多的主导权。下面是在Android下基于Dojo Mobile开发的Web应用Demo图，如果不是看得到地址栏，可能会以为是iPhone和Android的原生程序呢。 Dojo Mobile开发框架有这么几个特点： 1.轻量级，dojo mobile框架在压缩之后仅有100k，在同类js框架中算是体积相当小的，对移动设备来说十分合适。2.大量使用CSS3实现iPhone和Android本地程序的特效，动画效果流畅3.跨浏览器平台，dojo mobile同时也支持非webkit内核的手机浏览器，使用dojo自带的dojo.animateProperty与dojox.gfx模拟特效 Dojo Mobile 的标准网页模板

官网:http://dojotoolkit.org/features/mobile

迷你表单美化框架 Ideal Forms

deal forms，这个表单美化架构简单，基于jQuery框架，能够帮助web开发人员快速创建漂亮和界面友好的表单组件。 这个框架将普通的<input>表单元素改变为圆角的外观，并且加入非常吸引人的特效。并且其它的单选框和多选框也可以方便的定制。 这些特效没有使用任何图片，只需要简单的HTML并且完全可以定制CSS，架构本身自带3个主题可供选择。 官网:http://elclanrs.github.io/jq-idealforms/

HTML5移动应用开发框架 Mobello

Mobello 是一个高性能的 JavaScript 框架用于构建基于 HTML5 的移动应用。你可以构建跟本地App外观无异的HTML5 应用程序，支持智能手机和平板。Mobello 是一个可伸缩的可靠的框架用来创建富用户界面。并提供一个集成开发环境Mobello Studio。 官网:http://mobello.github.io

HTML5移动页面框架 Junior

Junior 是一个前端的框架，用来构建 HTML5 的移动 Web 应用，外观跟原生应用一致，特点： 为移动性能优化的 CSS3 转换 使用 flickable.js 的可滑动旋转效果 集成 backbone.js 视图和路由 CSS UI 组件 官网:http://justspamjustin.github.io/junior/#home

7 个效果震憾的 HTML5 应用组件

在HTML5的世界里，任何文本、图像都可以变得令人难以想象，很多HTML5应用也都已经随着浏览器的升级而变得运行飞速，而且兼容性也越来越好。下面为大家介绍7款效果震憾的HTML5应用组件，HTML5是强大的，是WEB的未来。 1、HTML5实时动态数据图表 HTML5实时动态数据图表，这是一款基于HTML5技术的网页图表插件，该图表插件功能十分强大，支持区域范围选择、鼠标拖动自定义区域、显示坐标点数据等功能。 在线演示   /   图表下载 2、jQuery/CSS3水平图片悬停效果 这是一款基于jQuery和CSS3的图片悬浮特效，鼠标滑过图片后，图片将悬浮突出显示，并且，整个图片相册是自定义滚动条，非常漂亮，支持滚轮。 素材演示    /    素材下载 3、jQuery书本翻页动画效果 这是一款基于jQuery的书本翻页特效，这款翻页插件非常适合你应用在在线阅读上，这个翻页插件可以让用户有真实的阅读感觉。 素材演示    /    素材下载 4、jQuery网页背景自由切换插件justParallax justParallax是一款基于JavaScript的网页背景切换插件，该插件允许你随时切换背景图片，并且可以设置网页滚动时背景的移动方式和移动方向。 素材演示    /    素材下载 5、CSS3/jQuery圆盘时钟 这款CSS3时钟是根据你本地的时间而实时走动的，结合jQuery完美的实现了仿真实圆盘时钟的效果。 在线演示    /    素材下载 6、jQuery翻页插件simplePagination simplePagination是一款基于jQuery的内容分页插件，simplePagination自定义3种不同的风格，你也可以自己定义CSS代码来获取自己风格的分页导航。 在线演示    /    素材下载 7、CSS3鼠标悬停动画按钮 这是一款用纯CSS3制作的鼠标悬停动画按钮，该款CSS3按钮有9组不同的鼠标悬停动画，也分别有9中不同的按钮风格，按钮整体干净大气。 在线演示    /    素材下载 转自：http://www.oschina.net/news/41941/7-html5-apps

50+ 个在网页中使用内容滑块的惊艳案例

少废话，直接上图！ Ludlow Kingsley – MORE INFO Sven Prim – MORE INFO Kyan – MORE INFO Team Viget – MORE INFO Mathieu Clauss – MORE INFO Marco Rotoli – MORE INFO Fitz FitzPatrick – MORE INFO Jackson and Kent – MORE INFO Jérôme Détraz  – MORE INFO Filtered – MORE INFO TravelBuzz – MORE INFO Studio Breakfast – MORE INFO Purple, Rock, Scissors – MORE INFO Gen 3 Creative – MORE INFO Mark Dearman – MORE INFO LQDI – MORE INFO Dux Design – MORE INFO Guns N Roses […]

强大的绘图类库d3js

今天发现一个强大的绘图js类库：d3 官网：http://d3js.org/ 示例：https://github.com/mbostock/d3/wiki/Gallery 文档：https://github.com/mbostock/d3/wiki/CN-Home

HTML <script> 标签的 charset 属性

定义和用法 charset 属性规定在外部脚本文件中使用的字符编码。 如果外部文件中的字符编码与主文件中的编码方式不同，就要用到 charset 属性。 默认的字符编码是 ISO-8859-1。 src 和 charset 属性 对特别长的 JavaScript 程序或者经常重复使用的程序来说，你可以希望将这些代码存放到一个单独的文件中。在这样的情况下，让浏览器通过 src 属性来载入那个单独的文件。 src 的值是包含这个 JavaScript 程序的文件的 URL。保存的文件的 MIME 类型应是 application/x-javascript，但如果文件名的后缀为 .js，也能够被正确配置了的服务器进行恰当的处理。 例如下面的语句：

上面的例子告诉支持 <script> 的浏览器从服务器上下载名为 abc.js 的 JavaScript 程序。 重要事项：请注意，尽管<script> 标签没有内容，结束的 </script> 标签也是必需的。 charset 属性与 src 属性一起使用，告诉浏览器用来编码这个 javascript 程序的字符集。它的值是任何一个 ISO 标准字符集编码的名称。 实例 定义外部脚本文件中所使用的字符编码：

语法

属性值 值 描述 character_encoding 外部脚本文件的字符编码方式。常用的字符集有： UTF-8 – Unicode 字符编码 ISO-8859-1 – 拉丁字母表的字符编码 如需查看所有可用的字符集，请访问我们的 字符集参考手册。