HTML5&CSS3 - 随笔分类(第2页) - Joanna Qian

Modernizr的介绍和使用

摘要：传统浏览器目前不会被完全取代，令你难以将最新的 CSS3 或 HTML5 功能嵌入你的网站。 Modernizr 正是为解决这一难题应运而生，作为一个开源的 JavaScript 库，Modernizr 检测浏览器对 CSS3 或 HTML5 功能支持情况。 Modernizr 并非试图添加老版本浏览器不支持的功能，而是令你通过创建可选风格配置修改页面设计。它也可以通过加载定制的脚本来模拟老版本浏览器不支持的功能。什么是Modernizr？Modernizr是一个开源的JS库，它使得那些基于访客浏览器的不同（指对新标准支持性的差异）而开发不同级别体验的设计师的工作变得更为简单。它使得设计师可阅读全文

posted @ 2013-08-26 08:49 Joanna Qian 阅读(11917) 评论(0) 推荐(3) 编辑

基于物理尺寸的响应式设计(转)

摘要：两种Queries之间的细微区别比较如下两个media-query声明：@media (min-resolution:341dpi) and (min-width:767px) > { }与@media (max-resolution:131dpi) and (min-width:767px) > { }乍一看，是不是没啥子区别？当然不是了。第一段声明是针对HTC Windows Phone 8X，而第二段针对iPad2。通过使用resolution query，可以将大小不同的设备区分开来。目前看来，@media (min-width: 767px){ }对HTC和iPad而言没阅读全文

posted @ 2013-06-18 00:56 Joanna Qian 阅读(561) 评论(0) 推荐(0) 编辑

响应式Web设计的优化（转）

摘要：1、轻量级的Javascript库：针对PC端网页当然会首选jQuery来作为前端javascript库，但是针对移动端来说，jQuery太重，而现在针对移动端来说，有很多优秀的框架可供使用，jQuery Mobile、YUI、XUI等是不错的框架，但是个人比较倾向于zepto。不过zepto预定义的一些事件，比如触屏滑动的swipe事件，在ios 上完美支持，但是在android上，有些浏览器确实不支持的，这时候就需要寻求与一些第三方的javascript插件库，好在现在网上有很多优秀的第三方javascript插件库可供使用，所以各位按需索取吧。2、减少HTTP请求次数：一个页面的阅读全文

posted @ 2013-05-07 10:10 Joanna Qian 阅读(322) 评论(0) 推荐(0) 编辑

HTML5开发-在你的游戏应用中加入广告(转)

摘要：如何利用lufylegend.js开源引擎在游戏中加入广告。利用lufylegend.js引擎1.7.2版中的新功能LStageWebView，可以在html中加入一个iframe用来显示一个外部页面，我们可以利用这个功能来显示广告。lufylegend.js引擎官网http://lufylegend.com/lufylegend我使用了google adsense广告，当然你也可以使用其他广告，方法一样，好了现在开始。第一步，你要有一个网站。第二步，要在google adsense申请注册一个广告。注：会根据你网站的内容进行审核，申请不通过的话，可以好好看一下google adsense的协阅读全文

posted @ 2013-04-27 22:26 Joanna Qian 阅读(559) 评论(0) 推荐(0) 编辑

25个HTML5和JavaScript游戏引擎库（转）

摘要：1. The GMP JavaScript Game EngineGMP是一个基于精灵2-D游戏，它可以很容易地设计复古风格的街机游戏。它也非常适合于制作拼图，数独或gogopop。GMP已经提供了一些实用游戏原型，减少游戏开发周期。项目地址2. PlaycraftThe Playcraft Engine equips you with a completeHTML5game engine toolset that gives you everything you need to build your game and take it directly to market. The Playc 阅读全文

posted @ 2013-03-20 21:33 Joanna Qian 阅读(1569) 评论(0) 推荐(0) 编辑

网页中Google Map的使用

摘要：要在自己的网页中嵌入地图，常用的方法可以归纳为以下几种：1、最简单的方法 ——使用谷歌地图主页的"链接" 如果你只需要在自己的页面上显示某个特定范围的地图，比如你的公司所在地，但是不需要在地图上添加任何额外的内容，比如标记、折线等等，那么，使用这个方法来嵌入谷歌地图是最简单的。登录谷歌地图主页，定位你需要显示的范围后，点击地图左上角的“链接”，会出现一个信息框，给出两个输入框，把第二个输入框中的内容拷贝到你的页面上就可以了。其实，这段嵌入代码就是一个iframe的声明，所以，虽然地图主页提供一个自定义地图并预览的功能，但是只能自定义地图的大小，如果需要的话，我们完全可以阅读全文

posted @ 2013-03-12 08:30 Joanna Qian 阅读(3421) 评论(0) 推荐(0) 编辑

几款swf flv flash网页播放器

摘要：项目中需要在网页中嵌入flv视频，这才发现想找一个跨浏览器，并能在各个手机浏览器中也能正常显示的flv网页播放器真是困难啊！先列一些播放器在下面作参考了，但没有时间一个个去检查！ ~~~~(>_<)~~~~1.VideoboxVideobox其实不是播放器，只是用来嵌入播放器的脚本而已，是一个只有6k大小的脚本,用于在页面中显示视频。Videobox使用swfobject来嵌入Flash。视频可以来自Youtube、Metacafe、Google Video、iFilm和自己设置的Flash。2.PandaPanda是一个开源的视频平台，能够处理视频的uploading、encod 阅读全文

posted @ 2013-03-06 03:42 Joanna Qian 阅读(10285) 评论(0) 推荐(1) 编辑

加速Web开发的9款知名HTML5框架(转)

摘要：与手工编码比起来，HTML5框架在准确性和正确率方面给予了保证。大多数HTML5框架都会有一个组合或者包含一些额外的组件，比如jQuery Scripts。CSS3样式表则以改善多媒体特征的功能性和响应式的Web布局为主。如果你有一个根据固定流程进行的特定项目，为了保证项目刚开始就能有较高的正确率，那么你可以利用HTML5框架来提升整个开发过程，并且让网站拥有一致性结构。伴随着智能手机正在席卷整个移动市场，在移动设备上开发出兼容性高的网站已变的非常重要，相信所有的网站所有者都希望自己的网站能够兼容所有的智能手机平台，HTML5框架可以轻松解决这种跨平台问题。如果你是一名Web设计师，你肯定有兴阅读全文

posted @ 2013-02-13 03:07 Joanna Qian 阅读(341) 评论(0) 推荐(0) 编辑

几种浏览器内核（百度百科）-转

摘要：几种浏览器内核（百度百科）浏览器最重要或者说核心的部分是“Rendering Engine”，可大概译为“解释引擎”，不过我们一般习惯将之称为“浏览器内核”。负责对网页语法的解释（如HTML、JavaScript）并渲染（显示）网页。所以，通常所谓的浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同，因此同一网页在不同的内核的浏览器里的渲染（显示）效果也可能不同，这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。Trident：IE使用的内核，是微软在Mosaic代码的基础之上修改阅读全文

posted @ 2013-02-10 07:14 Joanna Qian 阅读(679) 评论(0) 推荐(0) 编辑

Webkit内核的浏览器中用CSS3+jQuery实现iphone滑动解锁效果（译）

摘要：译自：http://css-tricks.com/slide-to-unlock/刚刚看到一篇文章，用css3和jQuery实现了iphone滑动解锁效果，真的很神奇！效果链接源码下载链接一、渐变结构原理HTML结构如下<div id="page-wrap"> <div id="well"> <h2><strong id="slider"></strong> <span>slide to unlock</span></h2> </d 阅读全文

posted @ 2013-02-05 02:04 Joanna Qian 阅读(1050) 评论(0) 推荐(0) 编辑

关于IE7 IE8兼容HTML5和CSS3的一种解决方案 (转）

摘要：转载至:http://blog.csdn.net/ixr_wang/article/details/70552271、添加到head里<!--[if IE 7]><script type='text/javascript' src='js/excanvas.js'></script><link rel="stylesheet" href="css/iefix.css" type="text/css" media="screen" />& 阅读全文

posted @ 2013-01-26 10:35 Joanna Qian 阅读(2162) 评论(0) 推荐(0) 编辑

SASS用法指南（转）

摘要：http://www.ruanyifeng.com/blog/2012/06/sass.html一、什么是SASSSASS是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。本文总结了SASS的主要用法。我的目标是，有了这篇文章，日常的一般使用就不需要去看官方文档了。二、安装和使用2.1 安装SASS是Ruby语言写的，但是两者的语法没有关系。不懂Ruby，照样使用。只是必须先安装Ruby，然后再安装SASS。假定你已经安装好了Ruby，接着在命令行输入下面的命令： gem install sass然后，就可以使用了。2.2 使用SASS. 阅读全文

posted @ 2013-01-08 05:08 Joanna Qian 阅读(257) 评论(0) 推荐(0) 编辑

CSS3学习案例1——超级链接类型标示图标

摘要：效果如图：p{margin:4px;}a[href^="http:"]{ background:url(images/window.gif) no-repeat left center; padding-left:18px; } /*匹配所有的有效超链接*/a[href$="pdf"]{ background:url(images/icon_pdf.gif) no-repeat left center; padding-left:18px; }/*匹配所有的pdf文件*/a[href$="xls"]{ background:url(i 阅读全文

posted @ 2012-10-12 04:45 Joanna Qian 阅读(522) 评论(0) 推荐(0) 编辑

html5游戏开发1-Aptana 3 eclipse 插件安装

摘要：1) InstallingviaEclipsehttp://download.aptana.com/studio3/plugin/install1Fromthe "Help" menu,select "InstallNewSoftware..." toopentheInstallNewSoftwaredialog.2PastetheURLfortheupdatesiteintotheWorkWithtextbox,andhittheEnter(orReturn)key.3Inthepopulatedtablebelow,checktheboxnextto 阅读全文

posted @ 2012-09-08 05:26 Joanna Qian 阅读(1440) 评论(0) 推荐(0) 编辑

自定义基于HTML5的video播放器—Customize your video player

摘要：HTML5提供有新的video标签，可以不用编程直接播放video，只需要写几行简单的代码，如实现以下效果（带有control panel）只需要写如下代码：<body style="background-color:#8EEE5EE;"> <div id="big_wrapper"> <video src="Introduction.mp4" width="640" height="360" poster= "images/me.jpg" lo 阅读全文

posted @ 2012-09-04 03:54 Joanna Qian 阅读(2606) 评论(0) 推荐(0) 编辑

写CSS和CSS3的一些基本原则

摘要：一、设置body标记的 CSS 基础样式body{ background-color:#EEEEEE; color:#000000; margin: 0; padding: 0; text-align: left; font-size: 100%; font-family: sans-serif; }将背景颜色设置为白色 (background-color)，以确保字体颜色是黑色的 (color)。它还可确保所有内容边缘都与浏览器窗口边框相匹配（margin 和 padding），而且标记将文本内容向左水平对齐 (text-align)。最后，该样式将字号设置为浏览器默认字号 (font-si 阅读全文

posted @ 2012-08-31 02:27 Joanna Qian 阅读(555) 评论(0) 推荐(0) 编辑

比较好的Javascript资源学习网站

摘要：1.Ajax RainAjaxRain有很多完美整合AJAX, CSS, DHTML 或 Javascript的实例，有一些Demo的确值得你去看一看，即使你不是网页设计(开发)师。Ajax/Javascript实例: EXT JS Date Picker jQuery Feed Menu jGrowl FastFind Menu - Jquery Spiffy Accordion2.Ajax DaddyAjax Daddy收集了大量漂亮的Web2.0工具，其中一个使用的功能就是，在你把某个Ajax/Javascript实例应用在自己... 阅读全文

posted @ 2012-08-30 10:56 Joanna Qian 阅读(432) 评论(0) 推荐(0) 编辑

开源中Web开发的各种资源

摘要：★HTML5 Rocks : Major Feature Groups 的学习HTML5 的资源(HTML5 演示, 教程 ).源码很不错的HTML5 Dashboard – Mozilla，效果很炫。WhatWG Developers, 一个清楚的 HTML5 技术规格说明书。★StackOverflow : 大名鼎鼎的技术问答式论坛。★Addyosmani, jQuery 和 JavaScript 文章教程Sohtanaka, jQuery 和 JavaScript 文章和教程★Nettuts+ 是一个面对Web开发人员和设计人员的网站，提供各种技术教程和文章，覆盖 HTML, CSS, 阅读全文

posted @ 2012-08-29 07:49 Joanna Qian 阅读(689) 评论(0) 推荐(3) 编辑

IE Bugs 列表和解决方法

摘要：老外的 http://haslayout.net/css/网站上,系统的总结了IE的一些Bugs，分享一下这个网站上包含了 46 个“普通的Bug” ， 5个“布局方面的Bug” ，6 个“可以绕开的Bug” 以及 1 个“IE崩溃的Bug”，所有的这些Bug有58个指南和70个解决方法。IE的CSS Bug：普通Bug这部分IE的 bug 是比较普通的无法归到其它种类，或是同时属于多个种类的Bug。 General Internet Explorer CSS Bugs 解决方法名称IE的版本描述 Image Label Focus Bug(图片label bug)IE... 阅读全文

posted @ 2012-08-29 06:29 Joanna Qian 阅读(472) 评论(0) 推荐(0) 编辑

用Html5制作简单的6列自适应布局

摘要：HTML部分<div id="container"> <h2>6列布局</h2> <div class="cols cols6"> <section class="first col"> <header> <h3>布局单元1</h3> </header> <p>布局单元内容区</p> </section> <section class="col"></se 阅读全文

posted @ 2012-08-29 06:11 Joanna Qian 阅读(978) 评论(0) 推荐(0) 编辑

随笔分类 - HTML5&CSS3