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

HTML5设计自适应网页-flexible page

摘要：效果如图，页面可以自适应browser大小，但aside大小不变其中HTML5代码如下：<!doctype html><html lang="en"> <header> <meta charset="utf-8"/> <title>Html5 test website!</title> <link rel="stylesheet" href="main.css"> </header> <body> <d 阅读全文

posted @ 2012-08-28 06:23 Joanna Qian 阅读(3353) 评论(0) 推荐(0)

HTML5设计基本网页-basic frameset

摘要：效果如图其中HTML部分代码如下：<!doctype html><html lang="en"> <header> <meta charset="utf-8"/> <title>Html5 test website!</title> <link rel="stylesheet" href="main.css"> </header> <body> <div id="big_wrapper&quo 阅读全文

posted @ 2012-08-28 05:07 Joanna Qian 阅读(749) 评论(0) 推荐(0)

PDF、ZIP、DOC链接的标注(CSS技巧)

摘要：原文：http://www.maratz.com/blog/archives/2005/01/13/pdf-links-labeling/翻译：http://www.176so.com/past/2007/3/17/pdf_links_labeling/有时候我们希望能明确的用小图标来标明我们的超链接的类型。是一个zip文档还是一个pdf文件。这样访问者就知道他所要点击的这个链接是下载而不是打开另一个页面了。如果所有的人都使用IE7或者FF的话。我们完全可以使用[att$=val]属性选择器，寻找以特定值（比如.zip和.doc）结尾的属性。a[href$=".pdf"] 阅读全文

posted @ 2012-08-27 23:30 Joanna Qian 阅读(413) 评论(0) 推荐(0)

HTML5适应旧的浏览器的使用总结

摘要：一、在HTML页面中加入针对IE浏览器最好在javascript文件中将HTML5的新标示（tag）创建出来如： document.createElement('section');更直接、简单的做法是在HTML页面中加入针对HTML5的Javascript library，如：<!--[if IE]> <script src= "http://html5shiv.googlecode.com/svn/trunk/html5.js"&g 阅读全文

posted @ 2012-08-27 23:09 Joanna Qian 阅读(310) 评论(0) 推荐(0)

自适应网页设计——Responsive Web Design

摘要：”一次设计，普遍适用”，让同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整布局(layout) 一、”自适应网页设计”的概念 2010年，Ethan Marcotte提出了“自适应网页设计”(Responsive Web Design)这个名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计。他制作了一个范例，里面是《福尔摩斯历险记》六个主人公的头像。如果屏幕宽度大于1300像素，则6张图片并排在一行。如果屏幕宽度在600像素到1300像素之间，则6张图片分成两行。如果屏幕宽度在400像素到600像素之间，则导航栏移到网页头部。如果屏幕宽度在400像素以下，则6张图片分成三行.. 阅读全文

posted @ 2012-08-26 06:18 Joanna Qian 阅读(386) 评论(0) 推荐(0)

Firefox必备的24款web开发插件

摘要：转载于无风的博客Web Developer 1.1.8 https://addons.mozilla.org/en-US/firefox/addon/60 以工具栏的形式对网页的(X)HTML、脚本、多媒体、CSS、缓存、图象等多方面的实用工具。使我们能轻易的获得网页的更多信息，使我们进一步的了解当前所浏览的网页。说明：超强的web分析工具，开发人员必装。 Firebug 1.5.0 https://addons.mozilla.org/en-US/firefox/addon/1843 Firebug是firefox下的一个插件,能够调试所有网站语言,如Html,Css等，但... 阅读全文

posted @ 2012-08-25 03:12 Joanna Qian 阅读(253) 评论(0) 推荐(0)

基于HTML5的iPad电子杂志横竖屏自适应方案

摘要：基于HTML5的iPad电子杂志横竖屏自适应方案(转载自：http://www.yeeach.com/?p=1172) 基于HTML5来制作iPad电子杂志，横屏及竖屏自适应是个大问题，查找了半天资料，没有一篇像样的文章可供参考。将思路及例子分享一下。例子并不严谨和规范，仅供参考。大致思路：1、对横屏（portrait）和竖屏（landscape）情况下的页面定义两个不同的HTML5页面文件及图片2、使用iframe来包含横屏（portrait）和竖屏（landscape）时候实际要包含的页面内容，注意此处没有指定iframe的src属性<iframe id=”iframe1″ name 阅读全文

posted @ 2012-08-22 04:26 Joanna Qian 阅读(908) 评论(0) 推荐(0)

随笔分类 - HTML5&CSS3