web集结号 » web2.0

web集结号 » web2.0 http://www.songlecn.com 专注于web表现层技术 Wed, 04 Nov 2009 02:46:32 +0000 en hourly 1 http://wordpress.org/?v=3.0.4 web2.0网页设计常用png小图标素材 http://www.songlecn.com/2009/04/793/ http://www.songlecn.com/2009/04/793/#comments Mon, 20 Apr 2009 02:18:49 +0000 船长 http://www.songlecn.com/?p=793 http://www.songlecn.com/2009/04/793/feed/ 0 web2.0风格文件夹图标png http://www.songlecn.com/2009/04/700/ http://www.songlecn.com/2009/04/700/#comments Wed, 08 Apr 2009 02:18:17 +0000 船长 http://www.songlecn.com/?p=700 http://www.songlecn.com/2009/04/700/feed/ 0 web2.0风格文件夹图标png http://www.songlecn.com/2009/03/621/ http://www.songlecn.com/2009/03/621/#comments Wed, 25 Mar 2009 02:41:44 +0000 船长 http://www.songlecn.com/?p=621 http://www.songlecn.com/2009/03/621/feed/ 0 卷页风格Blog web 2.0应用按钮图标png http://www.songlecn.com/2009/02/357/ http://www.songlecn.com/2009/02/357/#comments Wed, 25 Feb 2009 04:11:46 +0000 船长 http://www.songlecn.com/?p=357 http://www.songlecn.com/2009/02/357/feed/ 0 圆形流行的web2.0网站logo图标png http://www.songlecn.com/2009/02/352/ http://www.songlecn.com/2009/02/352/#comments Tue, 24 Feb 2009 08:01:52 +0000 船长 http://www.songlecn.com/?p=352 http://www.songlecn.com/2009/02/352/feed/ 0 瓶盖主题web2.0应用图标 http://www.songlecn.com/2009/02/307/ http://www.songlecn.com/2009/02/307/#comments Thu, 19 Feb 2009 01:56:44 +0000 船长 http://www.songlecn.com/?p=307 http://www.songlecn.com/2009/02/307/feed/ 0 IE7的web标准之道9：疯了的边框线 http://www.songlecn.com/2009/02/169/ http://www.songlecn.com/2009/02/169/#comments Thu, 05 Feb 2009 02:42:20 +0000 船长 http://www.songlecn.com/2009/02/169/ function runcode_open_new(element) { var code = document.getElementById(element).value; var win = window.open("", "", ""); win.opener = null; win.document.write(code); win.document.close(); } function runcode_copy(element) { var codeobj = document.getElementById(element); var meintext = codeobj.value; try { if (window.clipboardData) { window.clipboardData.setData("Text", meintext); } else if (window.netscape) { netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect'); var clip = Components.classes['@mozilla.org/widget/clipboard;1'] .createInstance(Components.interfaces.nsIClipboard); if (!clip) return; var trans = Components.classes['@mozilla.org/widget/transferable;1'] .createInstance(Components.interfaces.nsITransferable); if (!trans) return; trans.addDataFlavor('text/unicode'); var str = new Object(); var len = new Object(); var str = Components.classes["@mozilla.org/supports-string;1"] .createInstance(Components.interfaces.nsISupportsString); var copytext=meintext; str.data=copytext; trans.setTransferData("text/unicode",str,copytext.length*2); var clipid=Components.interfaces.nsIClipboard; if (!clip) return false; clip.setData(trans,null,clipid.kGlobalClipboard); } } catch (e) {alert('因为安全策略的原因，此项功能已被您的浏览器禁止。关闭此窗口，然后按下“Ctrl+C”组合键完成复制。'); codeobj.focus(); } codeobj.select(); return false; } IE7的web标准之道 IE历来被web标准的拥护者所诟病，而当FireFox横空出世以后，更多的网页制作者开始关注web标准设计。看着FireFox的市场占有率不停的上升，微软终于推出了IE7。但IE7是否真的能够力挽狂澜，是否真的能够得到用户的信任，是否真的能够得到网页设计者的认可呢？且看《IE7的web标准之道》系列文章，和你一起见证IE7的改变！前言非常惭愧和内疚，无论是《阿一web标准学堂》还是《IE7的web标准之道》，都已经很长时间没有写新的文章了。并不是没有东西可以写，只是…… 哎，真是很对不起那些关注我博客的朋友们。没更新博客的理由有很多——“工作太忙”、“没时间”、“这事那事”、“朋友帮忙”……但是最重要的原因还是——“懒”！有神语曰：时间就像乳沟，只要挤，总会有的！但是现在的自己却连“乳沟”都懒的挤。哎～～惭愧、惭愧！《阿一web标准学堂》第四课：HTML和CSS基础知识（1）的ppt和相关资料也已经整理好了，周末的时候抽空录下视频，争取星期一放出来。从这堂课会开始，《阿一web标准学堂》会比较系统的从头开始讲解一些基础知识，其中这堂课会讲到“诡异模式”和“标准模式”（Quirks mode和Standards mode），有兴趣的朋友可以星期一的时候关注一下我的博客更新。好了，没用的话就讲到这里吧，下面开始讲今天的正文—— 边框线疯了！为了能给大家带来比较直观的印象和冲击力，所以决定先把最终效果图给大家看看。结构其实很简单，就是一个大的div（#divInner：3px红色边框）里面，套两个小的div(#testDiv1和#testDiv2)，然后再在最外面套了一个最大的div（#divOuter：5px绿色边框）。其实最外面的那个#divOuter不是必须的，只是为了突出视觉效果而已。先看看在IE7中的正常表现—— 一个非常简单的结构在IE7中正常的表现靠！在IE6中，边框线这孩子疯了！ IE6和IE7显示效果对比图如此简单的结构在IE6的表现只能用一个字来表述，那就是——惨！其实结构真的很简单其实这个网页的结构真的很简单，下面是源码，你可以看一下。 <!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="Keywords" content="YES!B/S!,web标准,杨正祎,博客园,实例代码" /> <meta name="Description" content="这是一个简单YES!B/S!文章示例页面,来自杨正祎的博客,http://justinyoung.cnblogs.com/" /> <title>YES!B/S!文章示例页面</title> <style type="text/css"> .divOuter {/*其实divOuter不是必须的，这里纯粹是为了提升视觉冲击力，你完全可以将其去掉*/ border:5px dashed green; padding:10px; } .divInner { border:3px [...]]]> http://www.songlecn.com/2009/02/169/feed/ 0 IE7的web标准之道8：躲猫猫bug http://www.songlecn.com/2009/02/168/ http://www.songlecn.com/2009/02/168/#comments Thu, 05 Feb 2009 02:32:50 +0000 船长 http://www.songlecn.com/2009/02/168/ function runcode_open_new(element) { var code = document.getElementById(element).value; var win = window.open("", "", ""); win.opener = null; win.document.write(code); win.document.close(); } function runcode_copy(element) { var codeobj = document.getElementById(element); var meintext = codeobj.value; try { if (window.clipboardData) { window.clipboardData.setData("Text", meintext); } else if (window.netscape) { netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect'); var clip = Components.classes['@mozilla.org/widget/clipboard;1'] .createInstance(Components.interfaces.nsIClipboard); if (!clip) return; var trans = Components.classes['@mozilla.org/widget/transferable;1'] .createInstance(Components.interfaces.nsITransferable); if (!trans) return; trans.addDataFlavor('text/unicode'); var str = new Object(); var len = new Object(); var str = Components.classes["@mozilla.org/supports-string;1"] .createInstance(Components.interfaces.nsISupportsString); var copytext=meintext; str.data=copytext; trans.setTransferData("text/unicode",str,copytext.length*2); var clipid=Components.interfaces.nsIClipboard; if (!clip) return false; clip.setData(trans,null,clipid.kGlobalClipboard); } } catch (e) {alert('因为安全策略的原因，此项功能已被您的浏览器禁止。关闭此窗口，然后按下“Ctrl+C”组合键完成复制。'); codeobj.focus(); } codeobj.select(); return false; } IE7的web标准之道 IE历来被web标准的拥护者所诟病，而当FireFox横空出世以后，更多的网页制作者开始关注web标准设计。看着FireFox的市场占有率不停的上升，微软终于推出了IE7。但IE7是否真的能够力挽狂澜，是否真的能够得到用户的信任，是否真的能够得到网页设计者的认可呢？且看《IE7的web标准之道》系列文章，和你一起见证IE7的改变！躲猫猫，你来找我呀！在上一篇文章中，我们曾经提到过这个bug，它的著名来源于它所表现出来的诡异现象。虽然今天是4月1日，但是这些都是真实的。为了大家能够进一步的记住这个诡异的bug，这里我将改变以往的写作方式，而是首先将现象演示给大家看。为了更好的表现出效果，这次我采用了flash的记录方式，点击这个图标即可看到flash映像。如果，你的浏览器不支持flash播放，请你直接下载flash文件，采用其他软件查看，给你带来不便，请谅解。 IE6躲猫猫bug效果截图（点击图片查看完整大图）原来那儿有字呀！如果只看上面的效果截图图片，你可能感觉有些纳闷。这是什么呀？不就是一个普通的没啥字的网页吗，没啥了不起的呀。但是当你看到这个网页的源码的时候，也许就会感到惊讶了—— <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta content="YES!B/S!,web标准,杨正祎,博客园,实例代码" name="Keywords" /><meta content="这是一个简单YES!B/S!文章示例页面,来自杨正祎的博客,http://justinyoung.cnblogs.com/" name="Description" /><style type="text/css"> #holder{ background-color:pink; /***引起bug的重要因素，一种解释就是：那些消失的文字躲到了背景之后***/ /*** width:100%; 对最大的容器设置宽度，相对宽度和绝对宽度都可以，即可修正bug ***/ } #holder a:hover{ background-color:deeppink; /***为了增强视觉效果而已，可以去掉。***/ } #floater{ float:right; /***引起bug的重要因素***/ width:135px; height:310px; /***引起bug的重要因素，高度一定要大于那些文字的高度***/ border:1px solid green; } .clear{ clear:both; /***引起bug的重要因素***/ } #footer{ /***为了增强视觉效果而已，可以去掉。***/ height:50px; border-top:1px solid blue; }</style> [...]]]> http://www.songlecn.com/2009/02/168/feed/ 0 IE7的web标准之道6：置换元素与行距bug http://www.songlecn.com/2009/02/152/ http://www.songlecn.com/2009/02/152/#comments Wed, 04 Feb 2009 02:31:54 +0000 船长 http://www.songlecn.com/2009/02/152/ function runcode_open_new(element) { var code = document.getElementById(element).value; var win = window.open("", "", ""); win.opener = null; win.document.write(code); win.document.close(); } function runcode_copy(element) { var codeobj = document.getElementById(element); var meintext = codeobj.value; try { if (window.clipboardData) { window.clipboardData.setData("Text", meintext); } else if (window.netscape) { netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect'); var clip = Components.classes['@mozilla.org/widget/clipboard;1'] .createInstance(Components.interfaces.nsIClipboard); if (!clip) return; var trans = Components.classes['@mozilla.org/widget/transferable;1'] .createInstance(Components.interfaces.nsITransferable); if (!trans) return; trans.addDataFlavor('text/unicode'); var str = new Object(); var len = new Object(); var str = Components.classes["@mozilla.org/supports-string;1"] .createInstance(Components.interfaces.nsISupportsString); var copytext=meintext; str.data=copytext; trans.setTransferData("text/unicode",str,copytext.length*2); var clipid=Components.interfaces.nsIClipboard; if (!clip) return false; clip.setData(trans,null,clipid.kGlobalClipboard); } } catch (e) {alert('因为安全策略的原因，此项功能已被您的浏览器禁止。关闭此窗口，然后按下“Ctrl+C”组合键完成复制。'); codeobj.focus(); } codeobj.select(); return false; } IE7的web标准之道 IE历来被web标准的拥护者所诟病，而当FireFox横空出世以后，更多的网页制作者开始关注web标准设计。看着FireFox的市场占有率不停的上升，微软终于推出了IE7。但IE7是否真的能够力挽狂澜，是否真的能够得到用户的信任，是否真的能够得到网页设计者的认可呢？且看《IE7的web标准之道》系列文章，和你一起见证IE7的改变！互联网上没有邮局！看看下面这幅图，感觉是不是很亲切呢？有种“信纸”的感觉吧。其实这种感觉真的很不错哦，很怀旧、很小资的味道（突然想起以前我写的那些情书了^_^）。但是，你游遍互联网，便会发现，很少有模拟信纸布局的网页。这到底是为什么呢？难道是大家都没有想到吗？难道是大家真的已经把“信”这种东西忘记了？还是因为互联网上没有邮局来寄出这些信件呢？模拟信纸的网页其实都不是，不是没有人想到，也不是没有人愿意用，而是被一种“虫”咬怕了。而这只“虫”就是我们今天要讲的——“置换元素与行距bug”。臭虫显身！这里有两个测试用的示例页面。第一个是文章主体没有包含置换元素（replaced element）， bug不会作怪的例子。而第二个是文章主体中包含了置换元素（示例中为<img>）时，bug在IE6浏览器下会作怪的例子。在举例之前，先让我们了解一下，什么是置换元素（replaced element）—— “An element for which the CSS formatter knows only the intrinsic dimensions. In HTML, IMG, INPUT, TEXTAREA, SELECT, and OBJECT elements can be examples of replaced elements. For example, the content of the IMG element is often replaced by the image that [...]]]> http://www.songlecn.com/2009/02/152/feed/ 0 IE7的web标准之道5：上去了！终于上去了！ http://www.songlecn.com/2009/02/136/ http://www.songlecn.com/2009/02/136/#comments Tue, 03 Feb 2009 02:09:47 +0000 船长 http://www.songlecn.com/?p=136 function runcode_open_new(element) { var code = document.getElementById(element).value; var win = window.open("", "", ""); win.opener = null; win.document.write(code); win.document.close(); } function runcode_copy(element) { var codeobj = document.getElementById(element); var meintext = codeobj.value; try { if (window.clipboardData) { window.clipboardData.setData("Text", meintext); } else if (window.netscape) { netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect'); var clip = Components.classes['@mozilla.org/widget/clipboard;1'] .createInstance(Components.interfaces.nsIClipboard); if (!clip) return; var trans = Components.classes['@mozilla.org/widget/transferable;1'] .createInstance(Components.interfaces.nsITransferable); if (!trans) return; trans.addDataFlavor('text/unicode'); var str = new Object(); var len = new Object(); var str = Components.classes["@mozilla.org/supports-string;1"] .createInstance(Components.interfaces.nsISupportsString); var copytext=meintext; str.data=copytext; trans.setTransferData("text/unicode",str,copytext.length*2); var clipid=Components.interfaces.nsIClipboard; if (!clip) return false; clip.setData(trans,null,clipid.kGlobalClipboard); } } catch (e) {alert('因为安全策略的原因，此项功能已被您的浏览器禁止。关闭此窗口，然后按下“Ctrl+C”组合键完成复制。'); codeobj.focus(); } codeobj.select(); return false; } IE7的web标准之道 IE历来被web标准的拥护者所诟病，而当FireFox横空出世以后，更多的网页制作者开始关注web标准设计。看着FireFox的市场占有率不停的上升，微软终于推出了IE7。但IE7是否真的能够力挽狂澜，是否真的能够得到用户的信任，是否真的能够得到网页设计者的认可呢？且看《IE7的web标准之道》系列文章，和你一起见证IE7的改变！ select对div说：“小样！就踩着你！” 这个IE6一个很著名且诡异的bug，很简单，也很容易重现，说白了就是：列表框（select）一直把div踩在脚底下。因为这个bug，不知道多少浮动菜单被破坏。下面就模拟了这种情景，你可以运行代码来查看示例页面——   <div id="divMenu" onmouseover="showMenu();" onmouseout="hideMenu();">这个是菜单哦</div> <div id="divUp" onmouseover="showMenu();" onmouseout="hideMenu();"><a title="博客园" href="http://www.cnblogs.com" target="_blank">博客园</a></div> <a title="YES！B/S!" href="http://justinyoung.cnblogs.com/" target="_blank">YES！B/S!博客</a> <a title="web标准小组" href="http://space.cnblogs.com/w3c/" target="_blank">【web标准小组】</a> <select id="ddlTest" multiple="65535" size="0"> <option>下拉列表项1</option> <option>下拉列表项2</option> <option>下拉列表项3</option> [...]]]> http://www.songlecn.com/2009/02/136/feed/ 0 IE7的web标准之道4：歌剧院魅影bug http://www.songlecn.com/2009/02/135/ http://www.songlecn.com/2009/02/135/#comments Tue, 03 Feb 2009 02:05:24 +0000 船长 http://www.songlecn.com/?p=135 function runcode_open_new(element) { var code = document.getElementById(element).value; var win = window.open("", "", ""); win.opener = null; win.document.write(code); win.document.close(); } function runcode_copy(element) { var codeobj = document.getElementById(element); var meintext = codeobj.value; try { if (window.clipboardData) { window.clipboardData.setData("Text", meintext); } else if (window.netscape) { netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect'); var clip = Components.classes['@mozilla.org/widget/clipboard;1'] .createInstance(Components.interfaces.nsIClipboard); if (!clip) return; var trans = Components.classes['@mozilla.org/widget/transferable;1'] .createInstance(Components.interfaces.nsITransferable); if (!trans) return; trans.addDataFlavor('text/unicode'); var str = new Object(); var len = new Object(); var str = Components.classes["@mozilla.org/supports-string;1"] .createInstance(Components.interfaces.nsISupportsString); var copytext=meintext; str.data=copytext; trans.setTransferData("text/unicode",str,copytext.length*2); var clipid=Components.interfaces.nsIClipboard; if (!clip) return false; clip.setData(trans,null,clipid.kGlobalClipboard); } } catch (e) {alert('因为安全策略的原因，此项功能已被您的浏览器禁止。关闭此窗口，然后按下“Ctrl+C”组合键完成复制。'); codeobj.focus(); } codeobj.select(); return false; } IE7的web标准之道 IE历来被web标准的拥护者所诟病，而当FireFox横空出世以后，更多的网页制作者开始关注web标准设计。看着FireFox的市场占有率不停的上升，微软终于推出了IE7。但IE7是否真的能够力挽狂澜，是否真的能够得到用户的信任，是否真的能够得到网页设计者的认可呢？且看《IE7的web标准之道》系列文章，和你一起见证IE7的改变！打倒标题党估计很多的朋友都是因为这个华丽的“歌剧院魅影”一词进来的。其实这纯粹是一个标题党作为，纯粹是吸引眼球而已。其实这个bug和歌剧院半毛钱关系都没有。这个bug在国际上比较获得认可的名字叫做——“IE6重复文字bug”。这是一个非常好玩但是有很令人摸不到头脑的bug。如果，你不知道产生原因的话，将会令人非常头痛。这也是我在现实工作中真正遇到过的情况。这篇文章记载了当时我惊讶而不可奈何的心情——《Ghost in IE6.web标准网页IE6中的幽灵》魅影再现在IE6浏览器下运行下面的代码，便可以重现bug。IE7已经修正了此bug。 <!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="Keywords" content="YES!B/S!,web标准,杨正祎,博客园,实例代码" /> <meta name="Description" content="这是一个简单YES!B/S!文章示例页面,来自杨正祎的博客,http://justinyoung.cnblogs.com/" /> <title>YES!B/S!文章示例页面</title> </head> <body> <div style="width:200px;"> <div style="float:left;"></div>  <div style="float:left;width:200px;">歌剧院的魅影</div> </div> </body> </html> 提示：你可以先修改部分代码再运行。下面是上面测试页面分别在IE6，IE7，FireFox（版本2.0.0，12）和Oepra（版本9.25）中的显示效果截图（IE6和IE7共存的方法，可以参考文章《IE6和IE7共存方法（别人是别人的，我是我的）》）。 “歌剧院魅影bug”重现页面截图，注意IE6中鼠标所指位置通过截图，你会惊讶的看到在IE6中，多出了一个“影”字。下面来讲讲出现这个“影”字的一些条件（bug重现条件）—— 一个容器包含2两个具有“float”样式的子容器。第二个容器的宽度大于父容器的宽度，或者父容器宽度减去第二个容器宽度的值小于3。（说到3，这里稍微多说一句——IE7还修正了IE6中的一个bug，bug名字就叫做“3像素bug”） [...]]]> http://www.songlecn.com/2009/02/135/feed/ 0 IE7的web标准之道3：引起页面布局混乱的祸首 http://www.songlecn.com/2009/02/133/ http://www.songlecn.com/2009/02/133/#comments Mon, 02 Feb 2009 14:33:30 +0000 船长 http://www.songlecn.com/?p=133 http://www.songlecn.com/2009/02/133/feed/ 0 IE7的web标准之道2：更丰富的CSS选择符 http://www.songlecn.com/2009/02/121/ http://www.songlecn.com/2009/02/121/#comments Mon, 02 Feb 2009 03:25:37 +0000 船长 http://www.songlecn.com/?p=121 function runcode_open_new(element) { var code = document.getElementById(element).value; var win = window.open("", "", ""); win.opener = null; win.document.write(code); win.document.close(); } function runcode_copy(element) { var codeobj = document.getElementById(element); var meintext = codeobj.value; try { if (window.clipboardData) { window.clipboardData.setData("Text", meintext); } else if (window.netscape) { netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect'); var clip = Components.classes['@mozilla.org/widget/clipboard;1'] .createInstance(Components.interfaces.nsIClipboard); if (!clip) return; var trans = Components.classes['@mozilla.org/widget/transferable;1'] .createInstance(Components.interfaces.nsITransferable); if (!trans) return; trans.addDataFlavor('text/unicode'); var str = new Object(); var len = new Object(); var str = Components.classes["@mozilla.org/supports-string;1"] .createInstance(Components.interfaces.nsISupportsString); var copytext=meintext; str.data=copytext; trans.setTransferData("text/unicode",str,copytext.length*2); var clipid=Components.interfaces.nsIClipboard; if (!clip) return false; clip.setData(trans,null,clipid.kGlobalClipboard); } } catch (e) {alert('因为安全策略的原因，此项功能已被您的浏览器禁止。关闭此窗口，然后按下“Ctrl+C”组合键完成复制。'); codeobj.focus(); } codeobj.select(); return false; } IE7的web标准之道 IE历来被web标准的拥护者所诟病，而当FireFox横空出世以后，更多的网页制作者开始关注web标准设计。看着FireFox的市场占有率不停的上升，微软终于推出了IE7。但IE7是否真的能够力挽狂澜，是否真的能够得到用户的信任，是否真的能够得到网页设计者的认可呢？且看《IE7的web标准之道》系列文章，和你一起见证IE7的改变！ CSS选择符 IE7最令网页设计者兴奋的改进，便是支持更多、更丰富的CSS选择符（也有翻译为选择器的）了。这样通过CSS便能够，更进一步且方便的控制、定位前端结构元素，从而更丰富、多样的制定样式。因为一直不喜欢套用书本上的那些很“专业”、“晦涩”、“拗口”的名词解释。所以我的博客文章中出现的名词解释都是一种熊样——俗、通俗（忒俗）！用非常直白甚至老土的话来解释这些名词，虽然看上去不专业，甚至有所偏差。但是能够让人一看就明白。因为我相信的一点是：让人看不明白的拽文，就是一陀文字堆成的屎！请原谅这句话的粗俗和无理，也请你原谅我下面这些名词解释的老土。 CSS选择符其实大家都见过，甚至都用过。看看下面的例子，就会自然明白了。 <!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>IE7的web标准之道示例页面</title> <style type="text/css"> #div1{ color:red; } .div2{ color:blue; } </style> </head> <body> <div id="div1"> id选择符示例 </div> <div class="div2"> 类选择符示例 </div> </body> </html> 提示：你可以先修改部分代码再运行。示例中的”#”和”.”就是CSS选择符，正是因为有选择符，红色字体和蓝色字体这两种样式，才准确的定位到了id为“div1”和class为“div2”的两个div标签上。说白了，选择符其实就是CSS为样式找到前台结构元素目标的一种机制。选择符有很多种，上面的示例中，利用“#”符号的称之为“ID选择符”，因为它是根据前台结构元素的id定位的。利用“.”符号的称之为“类选择符”，因为它是根据前台结构元素的class名定位的。其他的还有“通配选择符”、“类型选择符”、“包含选择符”……更详细的资料请查看这篇文章——《CSS基础：CSS选择符》更多高级选择符 IE7与IE6相比，支持了更多的选择符，正是因为支持了这些丰富的选择符，所以使得IE7可以更方便的实现一些，以前在IE6很难实现或者无法实现的效果。下面就让我们看看这些令人兴奋的、IE7新支持的选择符。相邻同胞选择符利用“相邻选择符”，可以根据一个元素定位到与之相邻的另一个元素，并应用样式。说白了，“相邻选择符”就是只对“与自己平行关系的”、“相邻的”、“在我下面的”“哥们元素”起作用。下面的例子，将更有助于你的理解（注意只有处于h1后面的p3，字体颜色发生了变化）。 <!DOCTYPE html public ”-//W3C//DTD XHTML 1.0 Transitional//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”><p id=”p1″>这里是我哥们甲的哥们，“我”和它不太熟。</p> <p id=”p2″>这里是我哥们甲，它在我前面面，“混”的比我好，所以我就不管它了。</p> <h1>这里是“我”</h1> <p id=”p3″>这里是我哥们乙，它在我后面，“混”的还不如我，所以我要照顾它一下。</p> <p id=”p4″>这里是我哥们乙的哥们，“我”和它不太熟。</p> </html> 下面是分别在IE6，IE7，FireFox（版本2.0.0，12）和Oepra（版本9.25）的显示效果截图（IE6和IE7共存的方法，可以参考文章《IE6和IE7共存方法（别人是别人的，我是我的）》）。 [...]]]> http://www.songlecn.com/2009/02/121/feed/ 0 IE7的web标准之道1：前言（兼目录） http://www.songlecn.com/2009/02/120/ http://www.songlecn.com/2009/02/120/#comments Mon, 02 Feb 2009 03:20:44 +0000 船长 http://www.songlecn.com/?p=120 http://www.songlecn.com/2009/02/120/feed/ 0 几种有用的CSS技巧 http://www.songlecn.com/2009/01/57/ http://www.songlecn.com/2009/01/57/#comments Thu, 22 Jan 2009 02:47:40 +0000 船长 http://www.songlecn.com/?p=57 http://www.songlecn.com/2009/01/57/feed/ 0