Joanna Qian - 博客园

2012年8月29日

摘要： 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 阅读(986) 评论(0) 推荐(0)

常用的Jquery插件介绍

摘要：一、Jquery UIJqueryUI是Jquery官方制作的插件，它的功能非常强大，内容涵盖也很广，包括日期选择、颜色选择、Tab标签切换、拖动层、索引排序、弹出对话框层、滑动门效果、进度条等等，而且还支持多种颜色样式和多种滤镜效果。可以说，只要用了JqueryUI就不怎么需要其他插件了，但是它的缺点也是功能太庞大，有的时候不一个功能需要引用4-5个JS文件，加在会变慢。二、jQuery EasingjQuery Easing是动画效果扩展插件，它加强了Jquery中动画的效果。比如slideUp、slideDown、toggle、show、hide等等，还有Animate。使用起来也阅读全文

posted @ 2012-08-29 05:41 Joanna Qian 阅读(696) 评论(0) 推荐(1)

Javascript开发框架和常用工具

摘要：一、Javascript开发框架Extjs：Extjs的特长在于它创建了一套完整的前端用户界面，即Web UI 。包括用Css很难改变的复选框checkbox 、单选框radiobutton和下拉框select等等，它都进行了很好的美化，并加以非常炫的Ajax特效。但是这个框架对新手来说学习起来较难，并且已经开始收费了。详情可以到他们的官网了解更多，http://www.ajaxjs.com/。Prototype：prototype较之Extjs更易于学习使用。它封装并简化和扩展一些在Web开发过程中常用到JavaScript方法与Ajax交互处理过程。他的官网：http://... 阅读全文

posted @ 2012-08-29 05:25 Joanna Qian 阅读(384) 评论(0) 推荐(0)

2012年8月28日

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)

2012年8月27日

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)

2012年8月26日

jQuery Mobile开发1-UI components

摘要：一、jQuery Mobile现在支持的UI components二、List views基础List views<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>Intro to jQuery Mobile</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.mi 阅读全文

posted @ 2012-08-26 10:46 Joanna Qian 阅读(721) 评论(0) 推荐(0)

jQuery Mobile开发1-基本框架

摘要： HTML 页眉部分加载三个重要的 jQuery Mobile 组件：jQuery Core 库 — 核心 jQuery 库jQuery Mobile 库 — jQuery 框架特定于移动的部分jQuery Mobile CSS — 定义核心 jQuery Mobile UI 元素的 CSS，它定义过渡和不同的 UI 小部件，比如滑块和按钮，大量使用 Webkit 变形和动画。jQuery Mobile theme CSS — 可选项$.mobile and supported methods and eventsjQuery Mobile新增加的tag属性ComponentHTML5 data 阅读全文

posted @ 2012-08-26 10:42 Joanna Qian 阅读(895) 评论(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)