存档
-
CSS居然可以这样用
睡觉前，NT给我发了两个网址，是老外的，那个家伙暴强，居然用纯CSS在页面上画出房子来，平面的、3D的，都画出来了。 看了一下他的CSS代码，一开始以为是这样用： .class{ width:100px; width:60px; height:200px; height:160px;} 后来发现其实一些特殊图形的绘制跟上面的这个怪异的用法没关系，而是用边框来实现的，比如： 这三个形状除了Div，没有任何其它的元素或者文本，更不用说图形了。这是充分利用了border的显示特性。因为当我们同时设置四个方向的border时，浏览器自动会把交叉的部分叠加或者相互剪除。当border足够大的时候，我们就看到了上面这样的特殊效果。谁能想象到这是4个200像素的边框形成的效果呢？ 代码如下： <div style="BORDER-RIGHT: #ff0 50px ridge; BORDER-TOP: #f00 50px ridge; FLOAT: left; MARGIN: 10px; BORDER-LEFT: #0f0 50px ridge; WIDTH: 1px; BORDER-BOTTOM: #00f 50px ridge; HEIGHT: 1px"> </div><div style="BORDER-RIGHT: #ff0 50px groove; BORDER-TOP: #f00 50px groove; FLOAT: left; MARGIN: 10px; BORDER-LEFT: #0f0 50px groove; WIDTH: [...]
阅读：2,725 | 5 条评论2006年4月16日 | 归档于 所谓技术 -
动态实现指定图片半透明及鼠标事件
说明：在不改变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++ ){ [...]
阅读：1,812 | 没有评论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> [...]
阅读：2,295 | 没有评论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 快速链接 二外新闻
阅读：3,035 | 1 条评论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的经验还不够丰富，所以上面的样式规则肯定难免有一些冗余的地方。 [...]
阅读：2,944 | 3 条评论2005年11月29日 | 归档于 所谓技术
最新评论