分享、学习、提高
构成网页的基本元索
2011/01/14 14:34
Tags: , ,
今天化了点时间,了解了下HTML5,并且试验性的把已有的一个页面转换成html5,其实还是蛮方便的。因为HTML5几乎支持原有的所有内容,只需要调整一下文档申明,结构就行了。IE要支持html5的话,只需要加一段代码。
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

国内几乎没有IE9的用户,因此,taobao是这样写的:
<!--[if IE]>
<script src="http://a.tbcdn.cn/p/fp/2011a/html5.js" type="text/javascript"></script>
<![endif]-->

两个JS的内容是一样的,代码都来自:http://remysharp.com/2009/01/07/html5-enabling-script/

以下是我整理的由原来的html转换到HTML5一些注意点:

文档申明:
<!DOCTYPE html>

原来的根本记不住,每次都需要copy。这种写法还向前向后兼容。

设置页面编码:
旧:<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
新:<meta charset="utf-8">

链接样式表CSS
<link href="/css/comm_v3.css" rel="stylesheet" type="text/css">

可以不写type="text/css"了,浏览器只要看到rel=”stylesheet”就知道你是链接样式表了。
<link href="/css/comm_v3.css" rel="stylesheet">


加载JS
<script src="/js/html5.js" type="text/javascript"></script>

可以不写 type="text/javascript",浏览器默认的脚本语言就是javascript。
<script src="/js/html5.js"></script>



可以简单的把所有内容都包装在一个链接元素中
<h2><a href="/path/to/resource">Headline text</a></h2>
<p><a href="/path/to/resource">Paragraph text.</a></p>

可以改写为:
<a href="/path/to/resource">
<h2>Headline text</h2>
<p>Paragraph text.</p>
</a>


HTML5支持已有的内容,原来的div,img,p不做任何改动,都可以在HTML5里正常使用。

原结构:
<body>
<div id="header">...</div>
<div id="navigation">...</div>
<div id="main">...</div>
<div id="sidebar">...</div>
<div id="footer">...</div>
</body>


可以更改为:
<body>
<header>...</header>
<nav>...</nav>
<section>...</section>
<aside>...</aside>
<footer>...</footer>
</body>


更多推荐阅读:《HTML5设计原理》http://www.cn-cuckoo.com/2010/10/21/the-design-of-html5-2151.html



参考:
拥抱HTML5,《HTML5设计原理》读后随记
2010/07/31 09:23
Tags: , ,
各浏览器的默认CSS原文:http://www.iecss.com/

为以防万一备份了一下,存到了我的空间上了,有时会用得着:http://www.9enjoy.com/code/default-css/

常用浏览器默认样式下载
IE6(下载)
IE7(下载)
IE8(下载)
IE9(下载)
Firefox 3.6.3(下载)

一般写CSS都会在头部会把一些常用的标签重置margin和padding为0,但在某些地方又要恢复原默认的CSS,这些样式就起上作用了:)


2010/04/23 20:45
Tags:
需要下图的效果,你会怎么实现呢?
点击在新窗口中浏览此图片

是不是考虑用这个?
<a href="#">整机</a>|<a href="#">LCD</a>

我们来看看taobao和paipai对这块的实现,这两个站首页罗例产品分类时,都使用了这种样式:

paipai的实现
a{
border-left: 1px solid #D9D9D9;
margin-left: -1px;
padding-left: 5px;
}

taobao的实现:
a{
border-left: 1px solid #B7D0E4;
display: inline-block;
margin-left: -1px;
padding: 0px 0px 0px 3px;
}

现在你会了吗?


这段CSS很巧妙的将margin-left设为-1,将第一个border隐藏了起来,而且兼容所有的主流浏览器。这样,就不用给第一个或者最后一个样式做特殊样式处理了。如果间隔需要大些,可以很方便的通过设置padding-left和padding-right来控制。
2009/12/20 13:07
Tags: ,
      jQuery是一个优秀的Javascrīpt框架,轻量级的js库(压缩后只有21k) 。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。它兼容CSS3,还兼容各种浏览器 (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)。
  jQuery使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互。
  jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。

  先看看几大javascript库的搜索趋势,比较jquery,yui,dojo,prototype:
http://www.google.com/trends?q=jquery%2Cyui%2Cdojo%2Cprototype&ctab=0&geo=all&geor=all&date=all&sort=0
点击在新窗口中浏览此图片点击在新窗口中浏览此图片
国内的情况:
http://www.google.cn/trends?q=jquery%2Cyui%2Cdojo%2Cprototype&ctab=0&geo=cn&geor=all&date=all&sort=0

可以看到,jQuery从创建开始,关注度就不段上升,现在基本已经是NO.1了。

官方:http://www.jquery.com

中文社区:http://bbs.jquery.org.cn/
中文API文档:http://jquery.org.cn/visual/cn/index.xml
jQueryAPI参考文档中文版翻译(包括jQuery 1.3 中文参考文档):http://code.google.com/p/jquery-api-zh-cn/downloads/list

推荐的jQuery相关书:《锋利的jquery》 基于jQuery1.3.1,各大网上书店有售。

英文PDF,30分钟搞定jQuery,jQuery架构的开发者之一Simon Willison在07年讲演的幻灯片learning-jquery-in-30-minutes,这份比其之前做的jQuery in 15 minutes要详细些。http://www.slideshare.net/simon/learning-jquery-in-30-minutes


《精通Javascript+jQuery》视频教程 http://learning.artech.cn/20080621.mastering-javascript-jquery.html


2009/09/24 14:15
Tags: , ,
有朋友问我,同一个表单,但里面有个input的name是action,跟form里面的action会有冲突。

我开始还直接回答:

表单名为form1
input里的action值是document.form1.action.value
form里的action值是document.form1.action
应该不会冲突。

但实践证明,确实会冲突。

当有ipnut的name为action时,通过JS给form里的action赋值时,会提示:Error:Object doesn't support this property or method。

在网上查了下,可以能过form的attributes来罗列form的各项属性,我测试的form名为hx。
  frm = document.hx;
  for(i=0;i<frm.attributes.length;i++){  
    document.write(frm.attributes[i].name+"-------Index:"+i+"<br>");  
  }

发现action的属性是83,通过设置frm.attributes[83].value,就可以更改form中的action值。
不过,在FF和Chrome下,action不是83是2,所以要兼容多个浏览器的话,还得再多判断下。
分页: 1/6 第一页 1 2 3 4 5 6 下页 最后页 [ 显示模式: 摘要 | 列表 ]