存档
-
关于web标准化的一些误区
“web标准”这个词最近几年在国内的热火程度就好像钱江潮一样一浪高过一浪，随着雅虎、MSN以及国内各大门户网站纷纷抛弃表格布局，现在的网页，要是还没有使用div+css布局，那别人一看就首先从心底鄙视起来。 但是作为一直在web开发这个领域混迹的开发人员，我从网上的文章，还有周围人的讨论中发现，很多人都把“web标准”和“div+css”完全弄混了。包括现在热卖的一些书也是这样，通篇都是“div+css”布局。严重一点的，那更是“万般皆div”。
2009年10月13日 | 归档于 乱七八糟 -
Whatever:hover – 无需javascript让IE支持丰富伪类
绝大部分现代浏览器支持 css 中的 :hover 伪类选择器，可以用于所有 html 元素。这很酷，因为这使你可以仅通过 css 来对表格行(<tr>)应用鼠标滑过事件(mouseover)时的特殊效果。然而，万恶的IE，对 :hover 伪类顶多只提供了有限的支持，具体支持的程度要取决于你的IE浏览器的具体版本。 Whatever:hover 是一个小小的脚本，它可以迅速、自动地为IE6，IE7，IE8添加标准的 :hover、:active 和 :focus 伪类支持。第三版引入了 ajax 支持，意味着通过 javascript 动态添加到文档中的任意html元素也同样可以在IE中响应 :hover、:active 和 :focus 样式。
2009年6月22日 | 归档于 所谓技术 -
来自微软站点的纯CSS下拉菜单
结合JavaScript的下拉菜单，纯CSS的下拉菜单我也写过很多了。不过在微软 Microsoft Expression Web 的相关站点上看到这个纯CSS下拉菜单的时候，我还是觉得很赞赏。这应该是最精简、最干净的纯CSS下拉菜单了。
2009年4月16日 | 归档于 所谓技术 -
简单、通用的JQuery Tab实现
网页上的空间是寸土寸金，虽然显示器的分辨率越来越大，可是直到今天，网页设计中仍然是以至少1024×768 像素的支持为主，也就是说，每一屏页面只有区区 955×600像素 的安全尺寸可以用而已。于是，为了在有限的空间里容纳更多的内容，滑动门式的标签切换（Tabs）方式越来越受欢迎。通过滑动门技术，可以在同一块页面区域内放置数倍的内容。根据用户的选择来决定显示哪一部分。最近我在实际应用中，逐步完善出一种基于 jQuery，但是比 jQuery UI Tabs 插件更小巧也更通用的简单 Tabs 实现。
2009年4月13日 | 归档于 所谓技术 -
动态实现指定图片半透明及鼠标事件
说明：在不改变HTML代码的前提下，通过CSS和JavaScript，对指定的图片实现半透明效果。并为该图片添加鼠标滑过和滑出特效。 具体实现： 1.假设我们要操作的图片放置在一个id="imgbox"的div容器中。如下面的代码： <div id="imgbox" style="width:700px;margin:auto;"><img src="/images/logof.gif"></div> 2.首先，在css中增加两个类定义，为了避免影响到其它图片，最好是用选择限定符加以限定。如下代码： #imgbox img.low{-moz-opacity:0.5;filter:alpha(opacity=50);cursor:hand;}#imgbox img.high{-moz-opacity:1;filter:alpha(opacity=100);cursor:hand;} 3.然后在网页的<head>区域增加JavaScript，JavaScript将在页面载入完成之后，为我们指定的图片添加半透明效果和鼠标事件： <script language="JavaScript" type="text/javascript">window.onload = function() { var imgNode = document.getElementById("imgbox").getElementsByTagName("img")[0]; imgNode.setAttribute("class","low"); imgNode.className = "low"; imgNode.onmouseover = function(){ this.setAttribute("class","high"); this.className = "high"; } imgNode.onmouseout = function(){ this.setAttribute("class","low"); this.className = "low"; }}</script> 补充说明： 在上面的JavaScript中，设置图片的class属性的时候，同时使用了两种方式： imgNode.setAttribute("class","low");imgNode.className = "low"; 第一种方式是针对IE以外的浏览器，按理说设置class属性对所有的浏览器都是有效的。但是IE比较有个性，它通过元素的className来定义class属性。这是IE不符合规范的地方，但是我们不得不考虑到IE占据的广大市场。所以，同时使用两种方式，从而达到跨浏览器兼容的效果。 适合多图片调用的修改 当时做的时候是针对单张图片的情况做的。如果要用于调用的多图片，可以把JS代码做如下修改： <script language="JavaScript" type="text/javascript">window.onload = function() { var imgNodes = document.getElementById("imgbox").getElementsByTagName("img"); for (var i=0; i<imgNodes.length; i++ ){ [...]
2006年4月4日 | 归档于 所谓技术 -
CSS:模拟Windows窗口及DIV居中
利用CSS，尝试做了一个仿Windows窗口的横向纵向均居中的Div效果： 效果图如下： 以下是完整源代码： <!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=gb2312" /><title>动易远程接口中转</title><style type="text/css"><!–body {margin:0px;background:#ccc;height:auto;font: 9pt Tahoma;text-align:center;color: #000;}#outbox {position:absolute;z-index:888;top:50%;left:50%;margin:-120px 0 0 -200px;width:400px;height:auto;background:#D4D0C8;border:1px solid #ccc;}#title,#body,#bottom {border-top:1px solid #ddd;border-bottom:1px solid #999;border-right:1px solid #999;border-left:1px solid #ddd;}#title {line-height:28px;background:#c4c0c8;}#body {height:150px;text-align:left;padding:10px 10px;}#bottom {height:30px;padding:2px}#input {top:0px;bottom:0px;}–></style></head><body><div id="outbox"> <div id="title">正在进行通行证操作</div> <div id="body"> <p>正在进行远程数据同步，请勿刷新页面！</p> <ul> <li id="api">论坛数据同步中</li> <li id="powereasy">本站操作已完成！</li> </ul> </div> [...]
2006年3月28日 | 归档于 所谓技术 -
实践：用Div+CSS重构网页
从接触WEB标准以来，一直在努力实践，近日官方网站的全面改造终于正式展开，由于网站管理系统的WYSWYG编辑器本身不支持WEB规范，也是没办法的事情，但是我还是决定在这次改版的过程要充分利用CSS，在可能的程度上尽量利用Div+CSS的优点，减少维护量和网页大小。 第一批改造的是新闻中心和招生网，在重新制作的几个模版页面中，我们只用了少量的表格和内联代码，之所以没有完全采用Div+CSS，是因为经过WYSWYG编辑器的自动更改，多层嵌套的DIV代码会变得非常不易读，即使我们在制作时把代码写得非常的清晰，缩进和换行用得很好，也最终会得到一个结构混乱的HTML源代码。因此只能适当采用一定数量的表格，但是对表格也尽量采用CSS来控制了。而网页中的任何、、 这类的代码，则完全去掉了。 改完以后，代码总量减少到原来的一半左右，而且网页中的表格都只在很小的范围内使用，尽量避免嵌套，使网页的速度得到了很大的提高，虽然没有实现对WEB规范的支持，但是采用DIV+CSS的效果还是非常明显的。 今天我又重做网站首页，对网站首页，我就完全采用了DIV+CSS来进行网页布局，首页以前的表格更为混乱，嵌套很深，由于原来的代码量就不是很多，所以改完以后，代码减少也还不算太多，只为原来的一半左右。但是访问速度提升很多，而在规划好CSS以后，网页的布局部分真是轻松极了。 我取了其中一部分代码来比较： 重构前的代码（全页大小共计38K）： [code] 1 2 3 4 5 6 二外新闻 新闻中心 | 院 报 | 广 播 台 | 电 视 台 | 媒体二外 6 5 4 3 2 1 [/code] 说明：为了实现在760像素表格（1像素边框）左中右三栏划分(布局)，然后对中栏进行上中下划分（布局），再对中栏进行左中右划分（边距），再对中栏进行左中右划分（内容），加上部分一像素边框和代码不够优化，一共出现了6层嵌套，而且多次编辑以后，还出现了嵌套错误（多出一层结束标记） 重构后的代码（全页大小共计17.8k）： [code] 1 2 3 4 快速链接 二外新闻
2005年12月12日 | 归档于 所谓技术 -
CSS学习之综合运用
以前我也用CSS，不过只是很简单地用它来控制字体大小、链接样式，表格边框而已。要说页面布局和排版，我从来没想过用CSS，毕竟我用表格可以算得上是滚瓜烂熟了，表格+少许CSS，我已经能够实现所有需要的效果了。 直到最近DIV+CSS布局的页面开始成为潮流，我看了一些网站，总体感觉还是不如表格的漂亮。可是当去除CSS以后，看看人家的内容仍然整整齐齐地显示在页面上，而且很少有多余的东西，再看看一个页面里去除了那许多的表格和字体代码后，结构清晰的源代码，我才真正理解很多书上讲的CSS的优点。 买了一本《CSS权威指南》来看，顺便在正在改版的学校网站上“学以致用”，今天为止，不能说熟练掌握，不过总算是基本上掌握了CSS的使用。做了一个融合字体、背景、布局、定位等的例子，算是对自己这段时间学习的总结。 这个标题部分，如果用表格，至少需要两行一共5个单元格。我用了下面的代码来实现： <div class="redtitlebox" style="WIDTH: 300px"> <div class="redtitleleft"></div> <div class="redtitlemain">热门图文</div> <div class="redtitleright"></div> <div class="redtitlerightbody" style="WIDTH: 185px">专题：</div></div> 对应的CSS规则： .redtitlebox { width:100%; position:static; border-bottom:2px solid #900; margin:0px;padding:0px; }.redtitleleft { width:8px; background:url(skin/oldbisu/redtitlebg_left.gif) no-repeat; float:left; height:20px; line-height:20px; margin:0px; font-size:0px; color: #FFF; } .redtitleright { width:7px; background:url(skin/oldbisu/redtitlebg_right.gif) no-repeat; float:left; height:20px; line-height:20px; margin:0px; font-size:0px; color: #FFF; } .redtitlemain { width:100px; text-align:center; background:url(skin/oldbisu/redtitlebg_main.gif) repeat-x; float:left; height:20px; line-height:20px; margin:0px; font-weight: bold; color: #fff; font-size: 12px; }.redtitlerightbody { max-width:645px !important; float:right; height:20px; line-height:20px; background:url(skin/oldbisu/titlebg.gif) repeat-x; margin-bottom:0px; color: #666; font-size: 12px; text-align:right; } 如果只是为了实现一个效果，似乎这个过程比用表格来实现还复杂了，但是考虑到这个效果将被运用在几千个网页里，就会觉得非常划算了。CSS毕竟只需要下载一次，而且这里还有我本身的问题，写CSS的经验还不够丰富，所以上面的样式规则肯定难免有一些冗余的地方。 [...]
2005年11月29日 | 归档于 所谓技术
最新评论