用W3C标准建造的网站，从理论上来说可以做到完全的表现与结构相分离。打个比方，就是可以在不动骨架（结构，XHMTL）和肌肉（行为，Javascript）的前提下，彻彻底底地换一身皮（表现，CSS）。 当然，换皮之前你需要先按W3C标准建好你的网站，并且为它准备两套表现不一样的CSS。“换皮”实质上就是“换CSS”，我们要做的，只是用某种方法让浏览器载入另一套CSS，重新渲染页面。方法有很多种，我就介绍最常见的三种。 方法一：什么也不...
最典型实用的上中下，并且中间分三列的布局，这个例子有2个特点： 1. 中间三列效果，可以任意实现单列背景色。2. 整体最窄770px，最宽1024px，也就是说窗口小于770xp就出底部滚动条，如果大于1024px自动屏幕居中。效果浏览：http://www.rexsong.com/blog/attachments/200512/29_154158_minmax_3col.htm 分析： 最外层的wrapper把所有内容都嵌套在里边，整体相对定位。max min已经很好的控制了最窄最宽值，但对IE没有作用。如果没有...
随着网页标准化观念深入人心，越来越多的网站采用了CSS架构。CSS架构的网页不但符合W3C标准，并且还非常美观。标准化网页从漂亮的CSS菜单开始。众所周知，CSS菜单都是一段代码、一段代码的编写出来，生成漂亮菜单，今天给大家介绍一款小的软件：CSS Tab Designer！ CSS Tab Designer是一款使用CSS来设计导航菜单的可视化软件，软件内置60多种不同风格的样式，只需修改现成样式模版，就能快速生成CSS菜单。特别值 得一提的是，软件生...
Web标准是越来越突出了，现在建站都讲究个符合标准，通过W3C的XHTML和CSS验证，那么怎样才能做出一个符合标准的站点呢，下面是我在BLOG重构和制作OSdev Resource过程中的一些经验^_^。 去网页设计师看一些有关Web标准方面的文章 虽然w3.org更权威，但对于母语是中文的我们来说，这个更容易看懂：）个人觉得比去w3.org看那些满屏的E文舒服。可以在这里找到很多有关XTHML，DIV+CSS布局，CSS技巧等的文章。还有站长阿捷写的《循序渐进...
本翻译并未得到作者或网站授权。一切权利都归原作者及原网站所有。 如果你得到原作者或原发表网站的授权，可以自由使用本翻译。 1.CSS字体属性简写规则 一般用CSS设定字体属性是这样做的： font-weight:bold; font-style:italic; font-varient:small-caps; font-size:1em; line-height:1.5em; font-family:verdana,sans-serif; 但也可以把它们全部写到一行上去： font: bold italic small-caps 1em/1.5em verdana,sans-serif; 真不...
在IE下，位于该标记下的代码是不会显示在页面中，这对于用来隐藏一些HTML代码非常有用。 但在非IE浏览器下，该标记的无效；可分别在IE和FF下测试一下下面这段代码，就知道效果了。 代码如下: 测试：隐藏内容 alert(document.getElementById("CnLei").innerHTML); 解决方法： 在CSS中定义 comment {display:none;} 就可变成在各浏览器下通用的。 代码如下: comment {display:none;} 测试：隐藏内容 alert(document.ge...
Top Right Banner Style #topright { position: absolute; right: 0; top: 0; display: block; height: 125px; width: 125px; background: url(TRbanner.gif) no-repeat; text-indent: -999em; text-decoration: none;} Top Left Banner Style #topleft { position: absolute; left: 0; top: 0; display: block; height: 125px; width: 125px; background: url(TLbanner.gif) no-repeat; text-indent: -999em; text-decoration: n...
Fastcompany是simplebits.com站长的全CSS+Div布局作品.网站导航采用的是CSS图片翻转.不用多想肯定是利用a:link和a:hover等不同状态下利用显示不同的background-images制作而成.我认为作者的独到之处在于CSS中的a:hover...#nav a:hover {background-position: 0 -20px;}#nav a:active {background-position: 0 -40px;}导航的背景图片在a:link和a:hover,a:active的三种状态下不是三张而是用了同一张图片~通过css对背景纵向定位使得按...
在阿捷的w3cn中，他说： 引用内容在以前，我们通常采用2种方法使用样式表：页面内嵌法：就是将样式表直接写在页面代码的head区。类似这样： 外部调用法：将样式表写在一个独立的.css文件中，然后在页面head区用类似以下代码调用。在符合web标准的设计中，我们使用外部调用法，好处不言而喻，你可以不修改页面只修改.css文件而改变页面的样式。如果所有页面都调用同一个样式表文件，那么改一个样式表文件，可以改变所有文件的样式。...
1.怎样定义网页语言(字符集)? 在制作网页过程中,你首先要定义网页语言,以便访问者浏览器自动设置语言,而我们用所见即所得的HTML工具时,都没有注意到这个问题,因为它是默认设置。要设置的语言可以在HTML代码状态下找到: 把charset=gb2312改换成其它语言代码即可,比如英文harset=en. 2.怎样防止别人把你的网页放到框架里? 因为框架(frame)的缘故,有许多人把别人的网页放置到自己的框架里,使之成为自己的一页。如果你要...
A:link,A:visited ,A:active {TEXT-DECORATION: none} A:hover {text-decoration : none; position : relative; top : 1px; left : 1px} 把鼠标放上来看看效果--- 脚本之家[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
在cnbruces blog上看到这个即时换STYLE的代码,觉得不错就COPY过来备用.在见的例子就是:一个站点上有多个页面样式提供浏览者选择.同时,在选择了某样式后,再次打开该页面时,将仍然保持该样式.自然会想到了Cookie技术。 程序代码换肤技术function SetCookie(name,value){var argv=SetCookie.arguments;var argc=SetCookie.arguments.length;var expires=(2var path=(3var domain=(4var secure=(5document.cookie=name+"="+escape(valu...
css元素定位 1. position:static|无定位position:static是所有元素定位的默认值, 一般不用注明，除非有需要取消继承的别的定位 example:#div-1 { position:static;} 2. position:relative|相对定位使用position:relative，就需要top,bottom,left,right4个属性来配合，确定元素的位置。如果要让div-1层向下移动20px,左移40px: example:#div-1 { position:relative; top:20px; left:40px;} 如果用到相对定位，紧随他的层divafter是不...
网页的色彩搭配往往是网友们感到头疼的问题，尤其是那些完全没有美术基础的网友。到底用什么色彩搭配好看呢？ 一、红色的色感温暖，性格刚烈而外向，是一种对人刺激性很强的色。红色容易引起人的注意，也容易使人兴奋、激动、紧张、冲动、还是一种容易造成人视觉疲劳的色。 1、在红色中加入少量的黄，会使其热力强盛，趋于躁动、不安。 2、在红色中加入少量的蓝，会使其热性减弱，趋于文雅、柔和。 3、在红色中...
非常高兴地看到很多设计师开始关注和尝试使用web标准制作网页。但从网友们的问题和制作中发现几个问题，在这里特别提醒一下： 1.不是为了通过校验才标准化。web标准的本意是实现内容(结构)和表现分离，就是将样式剥离出来放在单独的css文件中。这样做的好处是可以分别处理内容和表现，也方便搜索和内容的再利用。 W3C校验仅仅是帮助你检查XHTML代码的书写是否规范，CSS的属性是否都在CCS2的规范内。代码的标准化仅仅是第一步，不是...