一起CSS - 青色's Blog

一起CSS - 青色's Blog http://www.17css.com 专注于Web前端开发与用户体验 Mon, 09 Nov 2009 06:49:45 +0000 http://backend.userland.com/rss092 en css hack css hack 是个很有争议的东西，一开始我也很讨厌，因为我觉得可以饶过 css hack，通过另外的方法解决问题。但是，随着工作中的不断实践，改变了我的观点，css hack 虽然不能通过 w3c 标准认证，但适当是使用很有可能会使你的 HTML 结构更紧凑、有效的减少无语义标签或带来其他好处。在公司，电脑里的浏览器是 ie6，除了开发部和技术部外，其他部门的同事很少装其他浏览器（不过有小部分可能会升级到 ie7/ie8）。而开发部和技术虽然会装 ff，但装好之后一般不会升级，因为他们不一定是前端开发人员，他们装 ff 的目的也只是看看自己做的东西在 ff 下是否正常，所以这就导致了公司里有各个版本的 ie 和 ff 都有。其实这不是最严重的，因为我做的东西除了在 op 下可能会有些差异外，在上面所有浏览器和 sa 、ch 下都表现的很好。最严重的是之前的有些东西他们做的时候可能只考虑到 ie6，所以如果要修复的话，会把我给郁闷坏，因为我不仅要针对浏览器修复，还有可能要针对浏览器版本修复。如果是你的话，你会头疼吗？所以我收集了一些我认为是比较简单方便的 css hack，一来是自己在工作可能需要，二来算是分享吧。这些 css hack 注意顺序一起使用，能区分不同的浏览器和版本。当然，如果你没必要考虑这么复杂的情况，就挑选需要的用咯。通过实例来体现吧。 html 代码 <body> <p>您的浏览器是</p> </body> css hack 代码 p { margin:0; padding:0 55px 0 0; height:30xp; line-height:30px; font-size:14px;} p { background:url(llq.gif) 90px -170px no-repeat;} ... http://www.17css.com/css-hack/ 修改：自动播放的 jQuery 幻灯片一位读者在《自动播放的jQuery幻灯片》中反映了一个问题，就是鼠标在缩略图上快速反复移动的时候，会出大图和缩略图不一致、鼠标输出缩略图幻灯片仍在快速切换和 CPU 占用飙涨等问题。因为幻灯片切换的时候有一个动画过程，鼠标每经过一张缩略图都会执行这个动画过程，如果上一个动画过程还没执行完鼠标就移到另一张缩略图上，那这张幻灯片的切换动画会等到上一个动画执行完成才会执行。如果鼠标在这些缩略图上来回移动，那将会“累积”很多动画，它们会一个接一个的执行，所以引发上上面那些问题。要修复上面的问题，加上一条判断语句即可：如果有动画正在执行，鼠标移到缩略图上就不执行动画函数。具体代码如下（和原来的相比就多了一句判断）： var theInt = null; var curclicked = 0; $(function(){ $('#transparence').css('opacity','0.4'); $('#pic_list img').css({'opacity':'0.6'}); $('#pic_list img:eq(0)').css({'top':'0','opacity':'1'}); $('#pic_list a').click(function(){return false}); t(0); $('#pic_list img').mouseover(function(){ if($('#this_pic').attr('src') == $(this).attr('src')) return; if(!$(this).is(':animated')){ t($('#pic_list img').index($(this))); } }) }) t = function(i){ clearInterval(theInt); if( typeof i != 'undefined' ) curclicked = i; $('#this_pic').fadeOut(0).fadeIn(500).attr('src',$('#pic_list img').eq(i).attr('src')); $('#this_a').attr('href',$('#pic_list img').eq(i).parents('a').attr('href')); $('#this_a').attr('title',$('#pic_list img').eq(i).parents('a').attr('title')); $('#pic_list img').eq(i).parents('li').nextAll('li').find('img').animate({top:18,opacity:0.6},500); $('#pic_list img').eq(i).parents('li').prevAll('li').find('img').animate({top:18,opacity:0.6},500); $('#pic_list img').eq(i).animate({top:0},500).css('opacity','1'); theInt = setInterval(function (){ i++; if (i > $('#pic_list img').length - 1) {i = 0}; $('#this_pic').fadeOut(0).fadeIn(500).attr('src',$('#pic_list img').eq(i).attr('src')); $('#this_a').attr('href',$('#pic_list img').eq(i).parents('a').attr('href')); $('#this_a').attr('title',$('#pic_list img').eq(i).parents('a').attr('title')); $('#pic_list img').eq(i).parents('li').nextAll('li').find('img').animate({top:18,opacity:0.6},500); $('#pic_list img').eq(i).parents('li').prevAll('li').find('img').animate({top:18,opacity:0.6},500); $('#pic_list ... http://www.17css.com/amend-auto-play-jquery-slide/ 用 js 模拟 css 属性选择器 CSS 的属性选择器是很有用的，它能有效的减少类的使用，但众所周知，IE6 是不支持 CSS 属性选择器的，为了兼容 IE6 ，一般的做法还是给需要的元素额外加类。如果是静态页面，那还好处理，直接在需要的元素上加上类，但如果是动态内容或其他因素影响，不能确定要在哪个元素上加类，那就比较棘手了。这个时候用 js 来处理应该是比较好的，方法也许您也想到了，就是：获取元素属性的值，然后判断值是否包含指定的字符串，如果包含就加上类。做一个列子吧，就拿最近做的一个东西来做吧，是一个列表，如果这个列表中的某个连接是直接打开 pdf 文件，就给这个链接后面加上 pdf 的小图标，以示提醒作用。看代码吧，XHTML 和 CSS 代码就省略了，看主要的 JS 代码： window.onload = function(){ var list = document.getElementById('list'); var listA = list.getElementsByTagName('a'); for(var i = 0; i < listA.length; i++){ var href = listA[i].href; if(href.indexOf('pdf') != -1){ listA[i].className = 'haspdf'; } } } 查看Demo 因为这段代码主要针对 IE6 及以下版本，所以可以加上 IE 条件注释。 http://www.17css.com/js-simulation-css-attribute-selectors/ CSS Expressions 有多可怕 CSS Expressions 俗称 CSS 表达式，避免使用 CSS Expressions 是前端开发的一个重要指南，为什么要避免使用 CSS Expressions 呢？我们看看雅虎YUI的说明：表达式的问题就在于它的计算频率要比我们想象的多。不仅仅是在页面显示和缩放时，就是在页面滚动、乃至移动鼠标时都会要重新计算一次。给CSS表达式增加一个计数器可以跟踪表达式的计算频率。在页面中随便移动鼠标都可以轻松达到10000次以上的计算量。从上面可以看出 CSS Expressions 是如此的可怕。但也许单纯的文字说明还不能使你深入的明白 CSS Expressions 的可怕，那就引用子鼠的例子来实际说明吧： XHTML 和 JS 代码： <body> 计算了<input id="c" />次 <script type="text/javascript"> var k = 0; function test() { k++; document.getElementById('c').value = k; return; } </script> <div> <ul> <li><a href="11111111111111111111">22222</a></li> <li><a href="11111111111111111111">22222</a></li> <li><a href="11111111111111111111">22222</a></li> <li><a href="11111111111111111111">22222</a></li> </ul> </div> </body> JS 代码是用来计算 CSS Expressions 的计算次数。 CSS Expressions 表达式代码： body { font-size:12px; font-family:Verdana; line-height:1.9 } div a { display:block; border:1px solid ... http://www.17css.com/how-terrible-the-css-expressions/ 自动播放的 jQuery 幻灯片读者“辣椒”在《jQuery写的一个幻灯片》中留言说幻灯片没有自动播放效果，其实写好之后不久就觉得少了点什么，看来看去，最后发现就是缺少自动播放效果，想找个时间把自动播放的效果加上，但似乎总是没有时间。今天就乘读者“辣椒”提出了这个问题，就抽时间写一下吧。结构和样式都没有变，只有 jQuery 代码有变，具体的代码如下： var theInt = null; var curclicked = 0; $(function(){ $('#transparence').css('opacity','0.4'); $('#pic_list img').css({'opacity':'0.6'}); $('#pic_list img:eq(0)').css({'top':'0','opacity':'1'}); $('#pic_list a').click(function(){return false}); t(0); $('#pic_list img').mouseover(function(){ if($('#this_pic').attr('src') == $(this).attr('src')) return; t($('#pic_list img').index($(this))); }); }); t = function(i){ clearInterval(theInt); if( typeof i != 'undefined' ) curclicked = i; $('#this_pic').fadeOut(0).fadeIn(500).attr('src',$('#pic_list img').eq(i).attr('src')); $('#this_a').attr('href',$('#pic_list img').eq(i).parents('a').attr('href')); $('#this_a').attr('title',$('#pic_list img').eq(i).parents('a').attr('title')); $('#pic_list img').eq(i).parents('li').nextAll('li').find('img').animate({top:18,opacity:0.6},500); $('#pic_list img').eq(i).parents('li').prevAll('li').find('img').animate({top:18,opacity:0.6},500); $('#pic_list img').eq(i).animate({top:0},500).css('opacity','1'); theInt = setInterval(function (){ i++; if (i > $('#pic_list img').length - 1) {i = 0}; $('#this_pic').fadeOut(0).fadeIn(500).attr('src',$('#pic_list img').eq(i).attr('src')); $('#this_a').attr('href',$('#pic_list img').eq(i).parents('a').attr('href')); $('#this_a').attr('title',$('#pic_list img').eq(i).parents('a').attr('title')); $('#pic_list img').eq(i).parents('li').nextAll('li').find('img').animate({top:18,opacity:0.6},500); $('#pic_list img').eq(i).parents('li').prevAll('li').find('img').animate({top:18,opacity:0.6},500); $('#pic_list ... http://www.17css.com/auto-play-jquery-slide/ HTML4和浏览器默认样式 HTML 4 标签：h1-h6,p,ul,ol,dl…即使没有给他们定义样式属性值，他们在浏览器中显示时，也会具有各种样式属性(主要是字体大小和各种间距)。这是因为它们各自有自己的默认样式，或者是浏览器给它定义了默认样式。各种版本的浏览器给他们定义的默认样式可能略有差别，下面列举的一些常见标签自身默认样式和在 Firefox 1.5 和 IE6/7 中的默认样式。 HTML样式 html, address,blockquote,body, dd, div,dl, dt, fieldset, form,frame, frameset,h1, h2, h3, h4,h5, h6, noframes,ol, p, ul, center,dir, hr, menu, pre { display: block } /*以上均为块状显示，未列出为内联元素显示，部分元素在XHTML1中将废弃*/ li { display: list-item }/*默认以列表显示*/ head { display: none }/*默认不显示*/ table { display: table }/*默认为表格显示*/ tr { display: table-row }/*默认为表格行显示*/ thead { display: table-header-group }/*默认为表格头部分组显示*/ tbody { display: ... http://www.17css.com/default-style-sheet-for-html-4-and-browser/ 语义化的HTML结构到底有什么好处？相信大家都知道html和css，知道html结构和css表现分离，知道html语义化，这些都是这几年的热门关键字。语义化的html在国内也是一两年前才开始被追捧的，看看现在群里谈论的html结构，关于html结构的面试题，语义化的html占据了很大一部分。那么为什么要使用语义化的HTML？语义化的HTML到底有什么好处呢？ HTML是提供网页文档内容的上下文结构和含义；html本身是没有表现的，我们看到例如<h1>是粗体，字体大小2em，加粗；<strong>是加粗的，不要认为这是html的表现，这些其实html默认的css样式在起作用，所以首先我们要知道html和页面的表现是没有关系的，这些是css的事情。HTML在页面中的作用就是结构和含义，通俗点说就是划分内容，这里放什么，我们放的是什么。语义化的HTML结构首先要强调HTML结构 HTML结构是页面的骨架，一个页面就好像一幢房子，HTML结构就是钢精钢筋混泥土的墙，一幢房子如果没有钢精钢筋混泥土的墙那就是一堆费砖头，不能住人，不能办公。css是装饰材料，是原木地板，是大理石，是油漆，是用来装饰房子的，CSS的强大就不用多说了，css如果没有html结构那就是一堆木板，一同油漆，没有了实际使用价值。CSS完全依靠引用它的(X)HTML文档。如果你想使CSS的能力充分发挥到极致，提供一个用既干净又有结构的内容的html是非常必要的，“HTML是在互联网上发布超文本的通用语……HTML使用标签来对文本结构化” 语义化的HTML结构怎么写？ HTML是一种对文本内容进行结构和意义（或者说“语义”）进行补充的方法。它会告诉我们说：“这行是一个标题，这几行组成了一个段落。这些文字是项目列表，这些文字是链接到互联网上另一个文件的超链接。”值得注意的是，不应该让HTML来告诉我们：“这些文字是蓝色的，这些文字又是红色的。这部分内容是最最靠右的一栏，这行内容是斜体字。”这些和表现相关的信息是CSS的工作。在做前端开发的时候要记住：HTML告诉我们一块内容是什么（或其意义），而不是它长的什么样子。当我们提到“语义标记”的时候，我们所说的HTML应该是完全脱离表现信息的，其中的标签应该都是语义化地定义了文档的结构。写语义化的HTML结构其实很简单，首先掌握html中各个标签的语义，<div>是一个容器；<strong>是表示强调；<ul><li>是一个无序列表等等…在看到内容的时候想想用什么标签能更好的描述它，是什么就用什么标签。语义化的HTML结构到底有什么好处？我们知道HTML5新增的标签，比如<header>和<footer>，html正在朝着更加健壮的语义化的HTML结构发展，xhtml2在这点上没html5先进，这也是xhtml2死亡的一个原因，这一点也说明了语义化的HTML结构是html的发展趋势。 1.去掉或样式丢失的时候能让页面呈现清晰的结构 html本身是没有表现的，我们看到例如<h1>是粗体，字体大小2em，加粗；<strong>是加粗的，不要认为这是html的表现，这些其实html默认的css样式在起作用，所以去掉或样式丢失的时候能让页面呈现清晰的结构不是语义化的HTML结构的优点，但是浏览器都有有默认样式，默认样式的目的也是为了更好的表达html的语义，可以说浏览器的默认样式和语义化的HTML结构是不可分割的。 2.屏幕阅读器（如果访客有视障）会完全根据你的标记来“读”你的网页例如,如果你使用的含语义的标记,屏幕阅读器就会“逐个拼出”你的单词,而不是试着去对它完整发音。 3.PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页（通常是因为这些设备对CSS的支持较弱）使用语义标记可以确保这些设备以一种有意义的方式来渲染网页.理想情况下,观看设备的任务是符合设备本身的条件来渲染网页. 语义标记为设备提供了所需的相关信息,就省去了你自己去考虑所有可能的显示情况（包括现有的或者将来新的设备）.例如,一部手机可以选择使一段标记了标题的文字以粗体显示.而掌上电脑可能会以比较大的字体来显示.无论哪种方式一旦你对文本标记为标题,您就可以确信读取设备将根据其自身的条件来合适地显示页面. 4.搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重过去你可能还没有考虑搜索引擎的爬虫也是网站的“访客”,但现在它们他们实际上是极其宝贵的用户.没有他们的话,搜索引擎将无法索引你的网站,然后一般用户将很难过来访问。 5.你的页面是否对爬虫容易理解非常重要,因为爬虫很大程度上会忽略用于表现的标记,而只注重语义标记因此,如果页面文件的标题被标记,而不是,那么这个页面在搜索结果的位置可能会比较靠后.除了提升易用性外,语义标记有利于正确使用CSS和JavaScript,因为其本身提供了许多“钩钩”来应用页面的样式与行为。SEO主要还是靠你网站的内容和外部链接的。 6.便于团队开发和维护 W3C给我们定了一个很好的标准，在团队中大家都遵循这个标准，可以减少很多差异化的东西，方便开发和维护，提高开发效率，甚至实现实现模块化开发。如有不同观点，补充，欢迎留言讨论。文章转载自：WEB前段开发原文地址：http://www.css88.com/archives/1668 http://www.17css.com/semantics_html/ jQuery写的一个幻灯片最近做一个网站，需要用上一个大幅点的幻灯片，幻灯片这东西网上一搜一大把，所以就想去“淘”一个，省点工夫，但"淘"了好一些都不满意，不是太老土、不美观，就是不兼容或到不到想要的结果等等，最后决定自己就写了一个。看看代码咯。 XHTML 代码： <div id="slide"> <a href="#" id="this_a"><img src="images/1.jpg" id="this_pic" alt="" /></a> <ul id="pic_list"> <li><a href="http://www.qq.com"><img src="images/1.jpg" alt="" /></a></li> <li><a href="http://www.sina.com"><img src="images/2.jpg" alt="" /></a></li> <li><a href="http://www.163.com"><img src="images/3.jpg" alt="" /></a></li> <li><a href="http://www.baidu.com"><img src="images/4.jpg" alt="" /></a></li> <li><a href="http://www.17css.com"><img src="images/5.jpg" alt="" /></a></li> </ul> <span id="transparence"></span> </div> 说明：#slide是最外面的容器，#this_pic是要显示的大图，#pic_list是图片缩略图，#transparence是一个半透明的层，因为想给#pic_list和里的缩略图应用半透明效果，但半透明效果会继承，无法更改，所以模拟了这个层。 CSS 代码： #slide { position:relative; width:740px; height:240px; margin:20px auto; } #pic_list { position:absolute; left:0; bottom:0; width:100%; list-style: none; overflow:hidden; z-index:2; } #pic_list li { float:left; width:100px; height:52px; padding-top:10px; } #pic_list li img { position:absolute; top:18px; width:65px; height:35px; margin:0 20px; border:1px solid #fff; } #this_pic { position:absolute; width:100%; height:100%; border:none; } #transparence { position:absolute; left:0; bottom:0; width:100%; height:50px; border-top:1px solid #fff; background:#000; z-index:1; } jQuery ... http://www.17css.com/a-jquery-slide/ margin叠加原理 margin 叠加是什么？就是当垂直外边距相遇时，它们将叠加，叠加的高度取较大的。下面按各种情况及附图来说明。当一个元素出现在另一个元素上面时，第一个元素的底边界与第二个元素的顶边界发生叠加，如图：元素的顶边界与前面元素的底边界发生叠加。当一个元素包含在另一个元素中时（假设没有填充或边框将边界分隔开），它们的顶和/或底边界也发生叠加，如图：元素的顶边界与父元素的顶边界发生叠加。尽管初看上去有点儿奇怪，但是边界甚至可以与本身发生叠加。假设有一个空元素，它有边界，但是没有边框或填充。在这种情况下，顶边界与底边界就碰到了一起，它们会发生叠加，如图：元素的顶边界与底边界发生叠加。如果这个边界碰到另一个元素的边界，它还会发生叠加，如图：空元素中已经叠加的边界与另一个空元素的边界发生叠加。边界叠加初看上去可能有点儿奇怪，但是它实际上是有意义的。以由几个段落组成的典型文本页面为例。第一个段落上面的空间等于段落的顶边界。如果没有边界叠加，后续所有段落之间的边界将是相邻顶边界和底边界的和。这意味着段落之间的空间是页面顶部的两倍。如果发生边界叠加，段落之间的顶边界和底边界就叠加在一起，这样各处的距离就一致了，如图：边界叠加在元素之间维护了一致的距离。 margin 叠加只发生在普通文档流中块框的垂直，行内框、浮动框或绝对定位框之间的边界不会叠加。 margin 叠加虽然是合理的，但如果处理不当，会产生不期望的效果，解决的办法有以下几种：用外元素的 pading 代替元素的 margin；给外元素加透明边框，即：border:1px solid transparent; 也就是有分隔的时候不会产生 margin 叠加；元素绝对定位；外元素设置 overflow:hidden； …… http://www.17css.com/margin-uperposition/ 用jQuery去除链接虚线链接点击后会出现虚线框，因为链接一般都有跳转页面，所以不容易看出来。如果没有跳转或阻止了这个行为的话，就能很明显的看到虚线。这个虚线在某些情况下会影响美观，所以可以考虑把它去掉。虽然在《去除点击链接时出现的虚线框》中说了几种方法，而且一起使用也能兼容 IE 和 FF ，但未免麻烦了点。前两天看到使用 jQuery 解决这个问题问题的方法，很简单，而且兼容性很好，所以把它“拿”过来了。具体代码如下： $(function(){ $('a').bind('focus',function(){ if(this.blur){ //如果支持 this.blur this.blur(); }; }); }); 细心的您可能发现了按钮点击后也会出现虚线框，那就一起把它去掉吧： $(function(){ $('a,input[type="button"],input[type="submit"]').bind('focus',function(){ if(this.blur){ //如果支持 this.blur this.blur(); }; }); }); 查看Demo 很简单吧，简单的都没有什么技术含量了。。。 http://www.17css.com/%e7%94%a8jquery%e5%8e%bb%e9%99%a4%e9%93%be%e6%8e%a5%e8%99%9a%e7%ba%bf/ 超过宽度显示省略号（无js全兼容）曾经发表过《我看超过部分自动隐藏或显示省略号》，表达了用 CSS 处理“超过宽度显示省略号”不合适的一些观点，然而前段时间在逛蓝色理想经典论坛的时候，发现了一种用 CSS 处理此问题的不错的办法，似乎反驳了我的观点，作者[14px ]突破了传统，以“范围底线”为思路创造了一种更好的办法，具体的思路请看以下的详细分析：思路：我们要达到的效果是：当“字符超过额定宽度”，则“显示三个小点”。 1、当“字符超过额定宽度”，对于页面来说可能发生的一个改变就是：换行！ 2、换行将导致该范围的底线降低。 3、那么，我们的目的则可以换算成：该范围的底线降低时显示三个小点。图片说明：查看效果上图是经过我（即29楼的“xfcmamb”）的优化之后，作者发布的第二个方案，要看作者的第一个方案及我第二次优化的方案请点击下面相应的链接： 1、原作者的方案： http://bbs.blueidea.com/thread-2915238-1-2.html 2、第二次优化的方案： http://bbs.blueidea.com/thread-2916138-1-1.html 在目前我所知道的方法中，我认为这种方法是最好的方法，但缺点还是有的，比如：要更具具体的行高制作合适的背景图片，也就是说如果图片做的不合适，“省略号”的显示位置可能会不合理。如果您有什么观点或更好的办法，欢迎发表留言。 http://www.17css.com/%e8%b6%85%e8%bf%87%e5%ae%bd%e5%ba%a6%e6%98%be%e7%a4%ba%e7%9c%81%e7%95%a5%e5%8f%b7%ef%bc%88%e6%97%a0js%e5%85%a8%e5%85%bc%e5%ae%b9%ef%bc%89/ 网页版"Firebug" Firebug 可以说是 FF 最强大的插件之一，它不但可以查看 xhtml 代码、CSS 代码、JS 代码、DOM 结构，还可以临时修改这些代码，是开发不可缺少的利器。这也许您早已知道，但网页版的 "Firebug" 你听说吗？其实也不是 Firebug 了，而是类似于 Firebug ，功能也没有真正的 Firebug 那么强大，仅可以用来查看网页 DOM 结构和一些 CSS 样式。虽然功能不多，但在某些情况下、某些时候已经够了，特别值得一提的是：它可以在多种浏览器：IE 、FF 、Chrome 中正常运行，除了 Opera ，所以在某些时候还是用的上滴。看看效果吧：那这东西在哪呢？下面的代码就是了： javascript:function%20loadScript(scriptURL)%20{ %20var%20scriptElem%20=%20document.createElement('SCRIPT'); %20scriptElem.setAttribute('language',%20'JavaScript'); %20scriptElem.setAttribute('src',%20scriptURL); %20document.body.appendChild(scriptElem);} loadScript('http://westciv.com/xray/thexray.js'); 用法： 1、复制上面的代码（并把它改成一行，我把它换行是为了防止代码过长而自动隐藏了）； 2、打开个网页，等它加载完； 3、在地址栏粘贴刚才复制的代码； 4、出来一个黑框框了吧，OK，可以用了，用鼠标点击某个地方，就能显示DOM 结构和一些 CSS 样式。 http://www.17css.com/web-page-version-of-firebug/ IE6支持PNG透明(alpha通道)的4种方法想特别说明一下，IE6与生俱来就支持png8的索引色透明度，但不支持png的 alpha 透明度。而我们一直要解决的是让IE6支持PNG的 alpha 透明度。下面我收集整理了4种方法，但都是以滤镜、Js、css 等作为基础模拟还原效果，虽然没有真正的解决alpha透明度问题，但也总算解决了燃眉之急。 IE6支持png8透明: IE6与生俱来就支持png8的索引色透明度，但不支持png或8位以上的 alpha 透明度。而对于非动画的GIF建议你使用PNG8，因为体积会更小。测试实例：http://blog.gulu77.com/demo/200809/test_IE6png8/ 1、AlphaImageLoader 筛选器使用简介：在每个标签样式中插入： filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’image.png’, sizingMethod=’scale’) 官方原文：http://support.microsoft.com/kb/294714/zh-cn go 测试实例：http://blog.gulu77.com/demo/200809/test_AlphaImageLoader/ 2、PNG Transparency in IE 使用简介：相对来说比较简洁，使用一段包含滤镜的JavaScript 就可以模拟图片或背景 PNG alpha 透明度。官方原文：http://codingforums.com/archive/index.php?t-80555.html go 测试实例：http://blog.gulu77.com/demo/200809/test_PNGTransparncyinIE/ 3、IE PNG Fix v1.0 / 2.0 Alpha 2 使用简介：页面标签使用behavior:url(”iepngfix.htc”);来调用外部包含js、css的iepngfix.htc文件來修正PNG alpha 透明度。官方原文：http://www.twinhelix.com/css/iepngfix/ go 测试实例：http://blog.gulu77.com/demo/200809/test_iepngfix/ 4、IE7/IE8 JavaScript library 使用简介：ie7/ie8-js是一个解决IE与W3C标准的冲突的JS库，使微软的IE的行为像一个Web标准兼容的浏览器，支持更多的W3C标准。官方原文：http://code.google.com/p/ie7-js/ go 测试实例：http://blog.gulu77.com/demo/200809/test_ie7-js/ 全部实例打包下载：http://blog.gulu77.com/demo/200809/test_png.rar 以上内容转自：Gulu77 原文地址：http://blog.gulu77.com/?p=147 还发现一个方法：belatedPNG 。具体方法是将下面的代码插到<head></head>之间：  此方法能同时解决图片和背景问题。所用到的 js 文件您可以到作者的博客上下载，地址是： http://www.dillerdesign.com/experiment/DD_belatedPNG/ http://www.17css.com/ie6%e6%94%af%e6%8c%81png%e9%80%8f%e6%98%8ealpha%e9%80%9a%e9%81%93%e7%9a%844%e7%a7%8d%e6%96%b9%e6%b3%95/ 百度有啊CSS圆角方案百度有啊的 CSS 圆角写法，原理和《一张图片实现圆角》差不多，也是用背景定位实现的。看代码吧： XHTML 代码： <div class="box1"> <span class="tl"></span><span class="tr"></span> <div class="cc"> <p>圆角一</p> </div> <span class="bl"></span><span class="br"></span> </div> CSS 代码： .box1 { background:url(images/bg1.gif) repeat-x #1d6cb7; margin-top:1em; position:relative; zoom:1; width:778px; } .box1 .tl, .box1 .tr, .box1 .bl, .box1 .br { width:5px; height:5px; position:absolute; background:url(images/bg3.gif) no-repeat; overflow:hidden; } .box1 .cc { height:40px; padding:5px; } .box1 .tl { left:0; top:0; } .box1 .tr { right:0; top:0; background-position:0 -5px; } .box1 .bl { left:0; bottom:0; background-position:0 -10px; } .box1 .br { right:0; bottom:0; background-position:0 -15px; } 查看效果（上面的代码是第一个圆角的）看看上面代码所用到的图片能更好的理解（下面）：第一部分是左上角的，第二部分是右上角的，第三部分是左下角的，第四部分是右下角的。 http://www.17css.com/youa-css-rounded-rectangle/ 真正的CSS等高布局为了让网页更美观、协调，有的时候需要用到左右等到布局，传统的等高布局是用 javascript 实现的，现在来看看 silence 发明的真正的 CSS 实现的等高布局，其方法主要是采用“隐藏容器溢出”、“正内补丁”和“负外补丁”结合的方法实现的。下面来看看实际的例子（三列等高），以下面的 XHTML 代码为例： <div id="wrap"> <div id="left"> <p>left</p> <p>left</p> <p>left</p> <p>left</p> <p>left</p> </div> <div id="center"> <p>center</p> ……（20个或更多个） <p>center</p> </div> <div id="right"> <p>right</p> <p>right</p> <p>right</p> </div> </div> CSS 代码： * { margin:0; padding:0; } #wrap { overflow:hidden; width:1000px; margin:0 auto; } #left, #center, #right { margin-bottom:-10000px; padding-bottom:10000px; } #left { float:left; width:250px; background:#00FFFF; } #center { float:left; width:500px; background:#FF0000; } #right { float:right; width:250px; background:#00FF00; } 查看效果从效果中可以看到，左右两列虽然内容少，但高度和内容最多的中间列等高。其核心代码（拿本例来说）是： #wrap { overflow:hidden; } #left, #center, #right { margin-bottom:-10000px; padding-bottom:10000px; } 其中的 10000px 可以修改为其他值，但不能小于最高列的高度。经测试，此方法兼容 IE6/IE7/IE8 beta 2/FF/Opera/Chrome 。方法很简单吧。从这里可以看出：看似简单的 CSS,其实并不简单。 ======= 华丽的分割线（2009/02/18） ================================== 前两天做网页的时候运用这样方法发现一个问题：如果子列有边框 border 属性的话，下边框不会将不显示（查看效果）。因为他们下面还有很长一部分，都被隐藏了，看图理解： ... http://www.17css.com/%e7%9c%9f%e6%ad%a3%e7%9a%84css%e7%ad%89%e9%ab%98%e5%b8%83%e5%b1%80/ 作品之每天物流平台每天物流平台是一个网上物流平台，在这个平台里车主和货主可以自由发布所需的信息，可以在地图上看到自己的车或者货当前所在的位置，还可以用手记发送指令进行相关的操作。该平台预计 5 月 15 号发布第一版测试版，域名目前未知。因为该公司没有提供logo，所以用了一个临时的，该平台所属广州华正道物流有限公司，德立物流有限公司好像其公司在香港开的分公司，具体什么关系不清楚，反正就是这么一个平台了。查看大图查看网页 http://www.17css.com/%e4%bd%9c%e5%93%81%e4%b9%8b%e6%af%8f%e5%a4%a9%e7%89%a9%e6%b5%81%e5%b9%b3%e5%8f%b0/ HTML标签strong和em的区别 HTML 标签 strong 和 em 都表示强调，在合适的地方使用这两个标签往往能给网站带来良好的效果。但他们有什么区别呢？ HTML 标签 strong 和 em 的区别，可以从三个层次上来谈：首先看 HTML 4.01 中的说明： EM: Indicates emphasis. STRONG: Indicates stronger emphasis. em 表示强调，strong 表示更强烈的强调。言简意赅，表明了 em 和 strong 的命名来历。并且在浏览器中，em 默认用斜体表示，strong 用粗体表示。这是第一个层次上的区别。 em is for local emphasis. You see? Local emphasis. If you would emphasize a word in speech, use em. strong is for global highlighting. When somebody looks at your document, at a glance, certain words ... http://www.17css.com/the-distinction-between-strong-and-em/ 你是一个职业的页面重构工作者吗？做为一个专职的页面重构者，我们从事的工作简单的说就是“将设计稿转换成WEB页面”，这一过程可以很简单到直接把PSD从PS里导出成网页；也可复杂到需要考虑页面中每个标签的使用，考虑“页面性能”。以“前端工程师”为目标的同学可能会不愿承认将页面重构这块分出来，但随着工种的细分，加上页面重构本身的专业性，独立为一个职业也不是不可能，至少我现在从事的就是一个专职的职位。如果你觉得一个前端工程师必须去画设计稿，可以不理会下面的内容。单纯的页面重构，所涉及到的工作内容一般是“分析设计稿=>切图=>写HTML和CSS”，虽然看起来很少，但要做好这份工作，绝非所想的那么容易。原因很简单：工作内容单一，在时间和工作量上必会很苛刻，往往跟设计师的工作时间是3:1，即设计师给三天的时间，制作只给一天的时间完成；在这种工作强度下，很多人都是靠着对这份工作的喜爱在维持着，一旦工作热情消失，很容易就会变得枯燥，保持热情也成了重构工作者（也许是所有参加工作的人）应该具备的能力。跟“前端工程师”所要求的有所不同，“页面重构”虽然也是“前端工程师”的一个范畴，在职业化中，对专职的页面重构者，要求当然也更高。不单是做出页面，而是做出好页面。又引出另一个话题，“何为好页面？”，一般包括下面几点：结构完整，可通过标准验证标签语义化，结构合理充分考虑到页面在站点中的“作用和重要性”，并对其进行有针对性的优化很多同学多少都遇到过方向不明，不知道自己应该提高些什么，我们可以从“分析设计稿=>切图=>写HTML和CSS”这个工作内容，针对每一点提出一些要求，以方便我们分析自己的能力水平，为继续提高确定个方向：一，设计稿的分析设计稿的分析是指对设计稿如何制作成页面的分析，即哪一块的内容可以做为公共的部分、哪一块的内容结构可以如何实现等。对设计稿的分析能力可以划分成下面的几个阶段：能分清设计稿中的公共与私有的部分在1的基础上对各部分的实现方式有一个初步的方案（包括如何切图、写结构、写样式）在1的基础上，准确的给出各部分的实现方案（包括如何切图、写结构、写样式）在3的基础上，能同时考虑方案的扩展性、复用性及页面性能（包括如何切图、写结构、写样式）在4的基础上，考虑整站的结构分布（包括文件分布、目录结构）上面这些都是在还没开始动手制作之前所要做的。二，切图切图是指将设计稿切成便于制作成页面的图片。都有个误区，觉得切图就是把图片切出来，其实并不完全是这样，还包括把切出来的图片合并到一起，怎么切、从哪切才能将性能最大化，说“切图是一门艺术”完全不为过。切图也可以划分成几个阶段：切成所需要的图片（如何将需要的部分切出来）在1的基础上，对切出来的图片进行一些优化（包括压缩文件大小、选择图片类型）在2的基础上，规划切出来的图片（包括文件分布）在3的基础上，考虑整体的性能（包括合并图片、压缩文件大小） HTML和CSS的编写 HTML和CSS的编写是指将上面完成的内容，通过HTML和CSS的编写，将设计稿转换成WEB页面最重要的一块，也是我们所要重点掌握的内容，把它们放在一起，是因为它们相互的关联性太强，HTML的写法会影响到CSS的写法，它又可以划分成下面几个阶段：还原设计稿视觉效果，并通过标准验证（HTML）在1的基础上，实现多浏览器的兼容（HTML）在2的基础上，标签语义化（HTML）在3的基础上，选择较优的实现方式（包括模块化结构，方便程序脚本使用，HTML和CSS）在4的基础上，考虑到扩展性、复用性和可维护性（HTML和CSS）在5的基础上，考虑到整站的样式分布（包括如何实现分布）在6的基础上，样式写法的优化（包括技巧的应用）是对所遇到问题的解决能力，这一点在不同的阶段都可能会遇到，所以没有写到上面。如果你已经达到或超过3、4、5，恭喜你，你已经是一个职业的“页面重构工作者”了。为了我们自身的发展，关注新技术、技术创新、提高用户体验、审美观、程序脚本的实现方式等，也是十分必要的。大家一起进步吧。文章转自：Webteam 原文地址：http://webteam.tencent.com/?p=133 http://www.17css.com/%e4%bd%a0%e6%98%af%e4%b8%80%e4%b8%aa%e8%81%8c%e4%b8%9a%e7%9a%84%e9%a1%b5%e9%9d%a2%e9%87%8d%e6%9e%84%e5%b7%a5%e4%bd%9c%e8%80%85%e5%90%97%ef%bc%9f/ 我看超过部分自动隐藏或显示省略号文章列表或类似文章列表的区域，如果宽度不是很长，为了防止标题字数过多而换行或撑破容器，使布局错位，我们一般会让超过部分自动隐藏或显示成省略号。用程序很容易控制，但不利于 SEO ，所以很多人选择了 CSS 。但用 CSS 就没有问题了吗？我看未必。由于各个浏览器对 CSS 的支持不一样，所以出现了很多不兼容的情况，在这个问题上也一样。那到底会出现什么问题呢？ 1、设置的是自动隐藏自动隐藏，那肯定有一个参考的宽度。如果这个宽度不能正好的容纳标题，那么后面的字就会被“剪掉”，只显示半部分。也许你会说：那就设一个正好的宽度。但是你有没有想过：如果标题中有标点符号、英文字母或数字呢？标点符号还好解决，中文的标点符号和汉字的宽度一样。但英文字母和数字就不好解决了，英文和数字的宽度会因为字体、个数的不同而不同。这就使原本“正好的宽度”变成“不是正好的宽度”。 2、设置的是显示省略号设置显示省略号就不会出现文字被“剪掉”的情况。但有的浏览器不兼容，不兼容的浏览器仍然可能出现换行或撑破容器的情况。 3、自动隐藏于显示省略号一起用一般情况下都是自动隐藏于显示省略号一起用，但不显示省略号的浏览器仍然有可能出现文字被“剪掉”的情况。下面看一个例子，请点击这里，这个例子出现了上面三种情况。下图是该例在能显示省略号和不能显示省略号的浏览器中的效果：从效果图可以看到：能显示省略号的浏览器效果还不错，但不能显示省略号的浏览就出现了文字被“剪掉”的情况，而且“剪”的部分都不一样。另：如果加上 -o-text-overflow:ellipsis ，Opera 也可以显示省略号。虽然 IE6 、IE7 、Opera 、Chrame 都能显示省略号，但还是有一些不同。比如截取的字数不一样、链接下划线长度不一样。所以，由于目前种种情况，我认为用 CSS 并不合适。 http://www.17css.com/%e6%88%91%e7%9c%8b%e8%b6%85%e8%bf%87%e9%83%a8%e5%88%86%e8%87%aa%e5%8a%a8%e9%9a%90%e8%97%8f%e6%88%96%e6%98%be%e7%a4%ba%e7%9c%81%e7%95%a5%e5%8f%b7/ IE 8 beta 2 不识滤镜 alpha ？前几天《CSS制作仿image menu效果》的第二个有提示的例子（点击这里查看），为了防止图片与文字颜色一样是，文字难以看清，所以使用了滤镜和属性 opacity 制作了半透明效果，然而用 IE 8 beta 2 浏览时却没有效果，如下图：我又用 IE 8 beta 2 查看以前《制作半透明效果》的例子，也是没有效果。其他浏览器都没有问题，为何 IE 8 beta 2 却没有效果？难道 IE 8 beta 2 连自家的滤镜都不认识？但是我曾经看过一个也使用了 alpha 滤镜例子，在 IE 8 beta 2 里有效果。难道是我的例子不兼容 IE 8 beta 2 ？于是我试图修改代码，然而无论我增加或删除某些属性，始终没有效果。最后来了个狠的——把 DOCTYPE （最顶上的那行）声明删掉，终于，IE 8 beta 2 里有效果了。效果是有了，但 DOCTYPE 声明是不能删的啊。删了的话，兼容就是个问题了，最起码盒子模型的解释都不一样（详情请查看《用标准W3C盒子模型》）。就为了 IE 8 beta 2 ，而使例子在 IE ... http://www.17css.com/ie-8-beta-2-%e4%b8%8d%e8%af%86%e6%bb%a4%e9%95%9c-alpha-%ef%bc%9f/ CSS制作仿image menu效果 image meun 是一种很不错的效果，让菜单以图片的形式呈现，给网页增色不少。这种效果一般由 js 制作，今天我们用 CSS 来制作类似的效果，先看下效果图：基本思路其实很简单。把 img 标签放到 a 标签里面，给 a 标签设置一个较小的宽度，并且设置超过部分隐藏。当鼠标经过 a 标签时，把 a 标签的宽度改变为与图片大小相同。代码实现 XHTML 代码： <ul> <li><a href="#"><img src="images/sky.jpg" alt="" /></a></li> <li><a href="#"><img src="images/flow.jpg" alt="" /></a></li> <li><a href="#"><img src="images/tree.jpg" alt="" /></a></li> <li><a href="#"><img src="images/bord.jpg" alt="" /></a></li> </ul> CSS 代码： * { margin:0; padding:0; } img { width:240px; height:300px; border:none; display:block; } ul { width:384px; margin:20px auto; list-style:none; background:#e6e6e6; border:7px solid #e6e6e6; overflow:hidden; } li { float:left; } a { position:relative; display:block; width:48px; text-decoration:none; color:#000; overflow:hidden; cursor: default; } a:hover { width:240px; } a:hover { background:no-repeat; } 查看Dome 当然，和 js 制作的相比，还是差点，比如 ... http://www.17css.com/css-image-menu/ 别说IE6不认识!important 别说IE6不认识 !important ,它们只是不够默契。 IE6 对 !important 的支持存在 bug ，有很多人因此作为 IE6 的 hack 。用多了，传多了，很多人就说 IE6 不支持 !important ，给新人带来一些影响。在《IE6下!important的bug》中已经说了这个问题，现在再举几个例子说明这个问题，以下面的 XHTML 代码为例： <ul id="list"> <li class="first">这里是第一行文字</li> <li>那这里就是第二行文字咯</li> <li>这里应该是第三行里吧</li> <li>这里绝对是第四行了</li> </ul> 第一个例子的 CSS 代码： ul{ margin:20px auto; padding:0; width:500px; list-style:none; line-height:24px; } #list li{ color:blue; } .first{ color:red !important; } 点击这里查看效果在 IE6 里，第一行文字为红色，!important 起作用了。如果 .first 不加 !important ，那么在所有浏览器中第一行都显示蓝色，因为 #list li 的权重比 .fisrt 高。当然 .first 改写成 #list .first 会更好，但为了举例子，所以不这样写。第二个例子的 CSS 代码： ul{ margin:20px auto; padding:0; width:500px; list-style:none; line-height:24px; } .first{ color:red !important; } .first{ color:blue; } 点击这里查看效果同样，!important 在 IE6 里起效果了。再看第三个例子的 CSS ... http://www.17css.com/%e5%88%ab%e8%af%b4ie6%e4%b8%8d%e8%ae%a4%e8%af%86important/ CSS3圆角属性和浏览器私有圆角属性随着网络的发展，CSS 也在不断的完善，充分吸取多年来 Web 发展的需求，提出了很多新颖的 CSS 特性，例如很受欢迎的圆角矩形 border-radius 属性，但很可惜，此属性目前没有得到任何浏览器的支持。对于一些浏览器，它们有其私有的圆角属性。如 FF 的 -moz-border-radius ，Safari 和 Chrome 的 -webkit-border-radius 。效果见下图： FF 的圆角 Safari 和 Chrome 的圆角(Safari 和 Chrome 使用的是同一种内核，这里就只附 Chrome 的效果了) IE 和 Opera 就没有私有的圆角属性了，如果有的话，那制作圆角应该就简单多了，把各自的私有属性全部写上，让各个浏览器“对号入座”，就达到了“兼容”的效果。 http://www.17css.com/css3%e5%9c%86%e8%a7%92%e5%b1%9e%e6%80%a7%e5%92%8c%e6%b5%8f%e8%a7%88%e5%99%a8%e7%a7%81%e6%9c%89%e5%9c%86%e8%a7%92%e5%b1%9e%e6%80%a7/ 用CSS滤镜制作圆角今天来用 CSS滤镜来制作圆角效果。正如你所知道的，CSS滤镜只有 IE 浏览器支持，所以这种方法不能真正的用到实际当中，所以就当做是了解一下咯。首先来看一个例子，点击这里查看（用 IE 浏览器喔）。看了上面的例子，也许你就知道制作的原理了。我们只用《一张图片实现圆角》例子中圆圈图片的1/4（左上部分）：，放 4 张，对相应的图片进行相应的翻转，然后定位到父容器的相应位置，就实现了圆角。代码实现 XHTML代码： <div id="box"> <h3>CSS滤镜制作圆角</h3> <img class="img1" src="images/yuan9.jpg" /> <img class="img2" src="images/yuan9.jpg" /> <img class="img3" src="images/yuan9.jpg" /> <img class="img4" src="images/yuan9.jpg" /> </div> CSS代码： *{ margin:0; padding:0; } #box{ position:relative; width:400px; margin:20px auto; border:1px solid #000; } img{ position:absolute; } .img1{ left:-1px; top:-1px; } .img2{ right:-1px; top:-1px; filter:fliph;/*水平翻转*/ } .img3{ bottom:-1px; left:-1px; filter:flipv;/*垂直翻转*/ } .img4{ right:-1px; bottom:-1px; filter:fliph flipv;/*水平垂直翻转*/ } h3{ padding:20px 0; text-align:center; } 查看效果和《一张图片实现圆角》一样，如果父容器的高度为基数，圆角在 IE6 里下方也会出现一条横线。 http://www.17css.com/%e7%94%a8css%e6%bb%a4%e9%95%9c%e5%88%b6%e4%bd%9c%e5%9c%86%e8%a7%92/ hoverbox 前两天在的 Nathan Smith 的博客上看到他的 hoverbox ，觉得非常的精彩。这是一个图片集，当鼠标移动到每张小图片上，就会有一张大图片出现。他的制作原理是：在标签 a 里放两张一样的图片，第一张图片设置成较小的尺寸，第二张先隐藏，当鼠标移动到第一张图片上时，就让第二张图片显示。原文地址和例子地址如下：原文地址：http://sonspring.com/journal/hoverbox-image-gallery 例子地址：http://host.sonspring.com/hoverbox/ 效果预览：从上面的例子可以看到，为了兼容 IE6 ，用了两张样式表。我在想：能不能只用一张样式表？我把他的两张样式表合在一起后，在 IE6 、IE7 、FF 、opear 中浏览没有任何问题，然而在 Chrome 中去没有效果了。我就在想：能不能修改修改，只用一张样式表，并且能在上述所有浏览器中实现效果。经过多次修改实验后，终于实现了。我给第二张图片套了一个 span 标签，CSS 代码也做了一定的修改。详细例子请点击这里查看。原先我一直都认为 CSS 没有逻辑性，所以不会有太大的灵活性或可变性（不知道用词是否恰当），但现在却越来越觉得：CSS 虽然是死的，但人是活的。活生生的人有各种各样不一样的想法。就如的这个例子，要制作这种效果，我们一般会想到 javascript ，但他却突破常规，完全只用 CSS 。 =======华丽的分割线========================================= 读者“老鼠”提出上面修改的例子不兼容 IE8 beta 2 ，所以特意装上了 IETester 进行查看，看到确实不行。在 IE8 beta 2 里的效果是：鼠标第一次移动到小图片上的时候，效果正常，大图片出现在了指定的位置。然而第一次之后，大图却跑到浏览器左上角去了，似乎第一次之后，大图的绝对定位是以浏览器窗口为基准。经过检查之后，发现是 .img1{display:block} 导致的，原本此属性是为了修复 img 3px bug 的，没想到却导致在 IE8 beta 2 里出现异常（不知道这算不算 IE8 的 bug），让人不能理解。既然这条属性有问题，那就换一种解决办法，改成 ... http://www.17css.com/hoverbox/ 一张图片实现圆角一张图片就能实现圆角？是什么样的图片？怎样实现？其实这张图片是一个小圆圈，如下面的例子将要使用的图片为 10 * 10 大小的图片：，太小了是吧，不过已经够了。基本思路准备四个小容器，分别放小圆圈图片的左上、右上、左下、右下四个部分，然后再分别定位到父容器的四个角上。图片示意：代码实现 XHTML代码： <div id="container"> <h1>一张图片实现圆角</h1> <b class="lt"></b> <b class="rt"></b> <b class="lb"></b> <b class="rb"></b> </div> 四个 b 为小容器，不要管它们，放上去就是了。 CSS代码： *{ margin:0; padding:0; } #container{ position:relative; margin:20px auto; padding:20px; width:400px; height:50px; border:1px solid #000; } b{ position:absolute; width:5px; height:5px; font-size:0; background-image:url(images/yuan8.jpg); background-repeat:no-repeat; } .lt{ left:-1px; top:-1px; background-position:left top; } .rt{ right:-1px; top:-1px; background-position:right top; } .lb{ left:-1px; bottom:-1px; background-position:left bottom; } .rb{ right:-1px; bottom:-1px; background-position:bottom right; } h1{ text-align:center; font-size:24px; } 查看效果这种方法似乎很完美，但遗憾的是：如果父容器（本例为 #container）的高度为基数时，在 IE6 里下方会出现一条横线，如下图：所以，如果使用这种方法，就要控制好父容器，使它的高度为偶数。另外：由于 IE 默认行高，b{height:5px} 会没有效果，所以加上了 font-size:0 消除了这个 bug ，虽然 overflow:hidden 也可以消除这个 bug ，但本例中不适合用这种方法，否则在 IE 中下半部分的圆角会没有效果或效果不完美（IE bug 真多 -_-!）。 http://www.17css.com/%e4%b8%80%e5%bc%a0%e5%9b%be%e7%89%87%e5%ae%9e%e7%8e%b0%e5%9c%86%e8%a7%92/ 让搜索更友好站内搜索功能是网站必不可少的，它可以帮助浏览者搜索指定的或感兴趣的内容。搜索是由文本框和按钮组成，默认的情况下，在各个浏览器的效果不一样，甚至计算机系统主题的不同，也会使他们的效果不一样。这对访问者显然不友好。为了使搜索更友好，我们对它进行“加工”，让它在各种环境下都显示一致的效果，而且还给访问者提示。搜索功能的 XHTML 代码一般如下： <form id="form1" name="form1" method="post" action=""> <label> <input type="text" name="keyword" id="keyword" /> </label> <label> <input type="submit" name="put-in" id="put-in" value="搜索" /> </label> </form> 默认情况下，在各个浏览中的效果如下图：给它加上样式： *{ margin:0; padding:0; } form{ position:relative; margin:20px; } input{ position:absolute; border:1px solid #00CCFF; background:#fff; } #keyword{ width:150px; height:24px; padding-left:2px; line-height:24px; color:#bbb; } #put-in{ width:50px; height:26px; left:150px; } 加上样式之后，在各个浏览器中的效果都如下图：我们再给它添加提示：在 XHTML 代码中，给文本框加上默认的文字 value="请输入关键字" ，然后再加上 javascript 代码，使用户用鼠标点击文本框时，默认的文本消失，能够直接输入关键字。 javascript代码： window.onload = function(){ var wordinput = document.getElementById("keyword"); wordinput.onfocus = function(){ this.value = ""; this.style.color = "#000" } wordinput.onblur = function(){ if(this.value == ""){ this.value = "请输入关键字"; this.style.color = "#bbb" } } } 相关解释： onfocus —— 元素聚焦时触发的事件 onblur —— 元素失去焦点时触发的事件至此，制作完成。查看效果。 http://www.17css.com/%e8%ae%a9%e6%90%9c%e7%b4%a2%e6%9b%b4%e5%8f%8b%e5%a5%bd/ 上下两张图片CSS圆角与无图 CSS 圆角相比，上下两张图片 CSS 圆角就比较容易制作了，即用切图软件把圆角的上半部分、下半部分分别切出来，然后放到网页中。效果图如下：圆角上半部分和下半部分图片：上下两张图片和中间元素的左右边框就组成了完整的圆角。例子代码 XHTML代码： <div id="box"> <div id="top"></div> <div id="content"><h1>有图CSS圆角</h1></div> <div id="bottom"></div> </div> XHTML代码不一定要这样写，您可以根据您的实际情况写出更有语义的XHTML代码，这里这样写是为了更好的理解这种制作方法。 CSS代码： *{ margin:0; padding:0; } #box{ width:415px; margin:20px auto; } #top{ height:5px; overflow:hidden; background:url(images/top.gif); } #bottom{ height:5px; overflow:hidden; background:url(images/bottom.gif); } #content{ border-left:1px solid #000; border-right:1px solid #000; } h1{ font-size:16px; padding:20px; text-align:center; } 查看效果 #top 放圆角上半部分图片，#bottom 放圆角下半部分图片，#content 设置左右边框，合起来就成了完整的圆角。 http://www.17css.com/%e4%b8%8a%e4%b8%8b%e4%b8%a4%e5%bc%a0%e5%9b%be%e7%89%87css%e5%9c%86%e8%a7%92/ 3D效果CSS圆角先看效果吧：这种3D效果CSS圆角和《流行的CSS圆角》制作方法是一样的，只是左右上下边框颜色不一样，左上浅，右下深，看上去有阴影，因此就产生了这种3D效果。既然制作方法和《流行的CSS圆角》一样，这里就不啰嗦了，下面给出相应的代码。 XHTML代码： <div class="box"> <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b> <div class="content"> <h1>3D效果CSS圆角</h1> </div> <b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b> </div> CSS代码： *{ margin:0; padding:0; } .box{ width:400px; margin:20px auto; } h1{ font-size:2em; color:#fff; padding:20px; text-align:center; } b{ display:block; overflow:hidden; height:1px; background:#96C2F1; border-width:0 1px; border-style:solid; } .b1{ margin:0 5px; background:#fff; border:none; } .b2{ border-right:#eee; } .b3{ border-right:#ddd; } .b4{ border-right:#aaa; } .b4b{ border-left:#eee; } .b3b{ border-left:#ddd; } .b2b{ border-left:#aaa; } .b2,.b3,.b4{ border-left-color:#fff; } .b4b,.b3b,.b2b{ border-right-color:#999; } .b2,.b2b{ margin:0 3px; border-width:0 2px; } .b3,.b3b{ margin:0 2px; } .b4,.b4b{ height:2px; margin:0 1px; } .b1b{ margin:0 5px; background:#999; border:none; } .content{ background:#96C2F1; border-left:1px solid #fff; border-right:1px solid #999; } 查看效果由于不同的边框要设置不同的颜色，所以 CSS 代码较多，容易混淆，请多看几遍。更多例子： 3D效果CSS圆角2 3D效果CSS圆角3 3D效果CSS圆角4 http://www.17css.com/3d%e6%95%88%e6%9e%9ccss%e5%9c%86%e8%a7%92/ 流行的CSS圆角这是比较流行的CSS圆角，制作方法和理解都有困难，但看完这篇文章，就能掌握这种方法。先看效果：制作方法为了更好的理解，先用简单的代码为例。 XHTML代码： <b class="top"> <b class="b1"></b> <b class="b2"></b> <b class="b3"></b> <b class="b4"></b> </b> CSS代码： b{ display:block; } .b1,.b2,.b3,.b4{ overflow:hidden; height:1px; border-left:1px solid #000; border-right:1px solid #000; } .b1{ margin:0 5px; background:#000; } .b2{ margin:0 3px; border-width:0 2px; } .b3{ margin:0 2px; } .b4{ height:2px; margin:0 1px; } 这段代码效果如下图： .top 是一个容器，.b1 是圆角顶部的横线，.b2 .b3 .b4 分别是设置递减的左右 margin 和相应的 border ，他们便组成了圆角圆弧中的几个点。合在一起，就组成了上半部分的圆角。看下面的动态图就能很好的理解了。为了看的更清楚，图中用了较粗的“线”和“点”，看起来锯齿比较明显，而网页上设置的 1px、2px 就不容易看出锯齿了。下半部分和上半部分的原理是一样的，只是“倒”过来了。完整的代码 XTHML代码： <div id="box"> <b class="top"> <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b> </b> <div id="content">内容区</div> <b class="bottom"> <b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b> </b> </div> CSS代码： b{ display:block; } .b1,.b2,.b3,.b4{ overflow:hidden; height:1px; border-left:1px solid #000; border-right:1px solid #000; } .b1{ margin:0 5px; background:#000; } .b2{ margin:0 3px; border-width:0 2px; } .b3{ margin:0 2px; } .b4{ height:2px; margin:0 1px; } #content{ border:solid #000; border-width:0 1px; } 查看效果注意各个数值的设置。 http://www.17css.com/%e6%b5%81%e8%a1%8c%e7%9a%84css%e5%9c%86%e8%a7%92/ 用js让“footer”处于底部当一个网页比较简单，内容比较少使得网页不足浏览器高的时候，为了显示更合理，我们希望让 footer 部分显示在浏览器的底部。先前介绍了《使用CSS定位页面的“footer”》，现在来用 javascript 来实现这种效果。基本思路以常见的架构来为例，容器 #container 内有上中下三部分，分别为 #header 、#content 、#footer。首先分别获取容器 #container 和浏览器的实际高度，如果容器 #container 的高度小于浏览器的高度，就让 #footer 绝对定位到底部。代码实现 XHTML 代码： <div id="container"> <div id="header">header</div> <div id="content">content</div> <div id="footer">footer</div> </div> javascript 代码： <script language="javascript" type="text/javascript"> window.onload = function(){ var containerHeight = document.getElementById("container").scrollHeight; var footer = document.getElementById("footer") var allHeight = document.documentElement.clientHeight; if(containerHeight < allHeight){ footer.style.position = "absolute"; footer.style.bottom = "0" } else{ footer.style.positong = ""; footer.style.bottom = ""; } } </script> 解释一下两个重要的属性 scrollHeight 和 clientHeight： scrollHeight 层的实际高度，实际有多高就多高，与当前网页高度无关； clientHeight 层在当浏览器屏幕的高度，非该层的实际高度。为了让例子效果更明显，再加上一些 ... http://www.17css.com/%e7%94%a8js%e8%ae%a9%e2%80%9cfooter%e2%80%9d%e5%a4%84%e4%ba%8e%e5%ba%95%e9%83%a8/ 使用CSS定位页面的“footer” 基本思路首先考虑外层设置一个容器 div ，id 设为 #container ，使他的高度为浏览器窗口的高度，然后将 #footer 这个 div 设置为 #container 的子 div，并使用绝对定位的方式，使他固定到 #container 的底端，以实现希望的效果。点击这里察看案例页面效果。改变浏览器的高度和宽度，可以看到 Footer 部分的效果。代码实现下面先考虑HTML结构，这个演示页面的HTML代码非常简单。 <div id="container"> <div id="content"> <h1>Content</h1> <p>请改变浏览器窗口的高度，以观察footer效果。</p> <p>这里是示例文字，………，这里是示例文字。</p> </div> <div id="footer"> <h1>Footer</h1> </div> </div> 然后设置CSS， body,html { margin: 0; padding: 0; font: 12px/1.5 arial; height:100%; } #container { min-height:100%; position: relative; } #content { padding: 10px; padding-bottom: 60px; /* 20px(font-size)x2(line-height) + 10px(padding)x2=60px*/ } #footer { position: absolute; bottom: 0; padding: 10px 0; background-color: #AAA; width: 100%; } #footer h1 { font: 20px/2 Arial; margin:0; padding:0 10px; } 1：首先要给 html 和 body 元素设置高度（height属性）为100% ... http://www.17css.com/%e4%bd%bf%e7%94%a8css%e5%ae%9a%e4%bd%8d%e9%a1%b5%e9%9d%a2%e7%9a%84%e2%80%9cfooter%e2%80%9d/ ie img 3px bug ie img 有 3px 的缝隙也是 ie 的经典 bug 之一，相信已经不陌生了，但还是先看看效果吧（也许你并没有见过）：效果1 效果2 效果1 图片下方有缝隙，这是最常见的；效果2 则不但下面有，右边也有，并且在 FF 和 opera 里，下方也有缝隙。这是因为效果2 图片的父元素是内联元素。这个缝隙的大小网上说是 3px ，其实在 ie 里是 4px （你可以设置图片父元素的负 margin 测试），而效果2 在 FF 里下方有 3px 的缝隙，在 opera 里下方有 2px 的缝隙。这个小缝隙在有些情况并不会造成太大的影响，不修复也没有关系；但如果对有些情况影响较大，那就不得不修复了。修复方法有很多： 1、改变XHTML排版，让 img 的后面紧跟标签（若没有文字的话），如： <div><img src="" alt="" /></div> 而不是： <div> <img src="" alt="" /> <div> 2、为 img 设置 display:block ； 3、为父元素设置 font-size:0 ； 4、为 img 设置 ... http://www.17css.com/ie-img-3px-bug/ 用CSS制作彩色文字网页上的文字和美观的图片相比似乎显得比较单调，因为文字只有颜色、字体、大小等效果。那如何才能让文字更有特点呢？那就让文字变成彩色的吧，不过不是每个文字设置不同的颜色（当然也有这样的，比如google的logo，虽然用的并不是文本，但用文本也可以实现），是文字的上半部分和下半部分颜色不用。先看一下效果吧：其实这里有两个相同的但颜色不同文本，他们重叠在一起了，一个显示上半部分，一个显示下半部分，合在一起就达到了彩色的效果。所用到的关键属性是 clip ,此属性 CSS手册上的说明是：语法： clip : auto | rect ( number number number number ) 取值： auto : 默认值。对象无剪切 rect ( number number number number ) : 依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值，其中任一数值都可用 auto 替换，即此边不剪切说明：检索或设置对象的可视区域。可视区域外的部分是透明的。此属性定义了绝对(absolute)定位对象可视区域的尺寸。必须将 position 属性的值设为 absolute ，此属性方可使用。我们一步一步来做。先做上半部分的文字： XHTML代码： <a href="#" class="textTop">多彩文字 multicolor</a> CSS代码： .textTop{ color:#cc0000; font-size:24px; clip:rect(auto auto 15px auto); position:absolute; } 查看效果，效果如下图左边所示。下半部分： XHTML代码（除了 class ，其他和上面相同）： <a href="#" class="textBottom">多彩文字 multicolor</a> CSS代码： .textBottom{ color:#3399ff; font-size:24px; clip:rect(15px auto auto auto); position:absolute; } 查看效果，效果如下图右边所示。把代码合在一起，就达到了最终的效果： XHTML代码： <div class="container"> <a href="#" class="textTop">多彩文字 multicolor</a> <a ... http://www.17css.com/%e7%94%a8css%e5%88%b6%e4%bd%9c%e5%bd%a9%e8%89%b2%e6%96%87%e5%ad%97/ 制作半透明效果半透明效果越来越常见，如果应用的好的话，能给网页带来很美观的效果。由于各个浏览器差异，所以半透明效果实现起来还是有一点麻烦的。 IE 使用滤镜，即 filter:alpha(opacity=x) ，x 取值范围为 0 - 100 。默认值为 100 ，不透明。 0 为完全透明。 FF 使用其私有属性：-moz-opacity ，其后直接加数值，取值范围为 0.0 - 1.0 。默认值为 1 ，不透明。 0 为完全透明。 CSS3 半透明属性 opacity ，其后也是直接加数值，取值范围同样为 0.0 - 1.0 。虽然 IE 和其他浏览器实现的方法不一样，但一起用，就都有效果了。看例子： XHTML代码： <div id="wrap"> <br /> <br /> <div id="box"> <br /> <br /> </div> <br /> <br /> </div> CSS代码： #wrap{ background:#FF0000; } #box{ background:#fff; filter:alpha(opacity=60); /* for ie */ opacity:0.6; /* for ff or other */ width:100%; } 虽然 ... http://www.17css.com/%e5%88%b6%e4%bd%9c%e5%8d%8a%e9%80%8f%e6%98%8e%e6%95%88%e6%9e%9c/ 纯css下拉菜单详解下拉菜单由于实用，所以受到人们的欢迎。下拉菜单通常是由javascript来实现的，也应该由 javascript 来实现，因为这属于行为层范围。然而大家知道，使用 CSS 的 :hover 伪类也可以制作下拉菜单，比起javascript来，使用CSS制作更简单，且更容易理解。但由于 IE6 只有 a 标签支持 :hover 伪类，所以又给这种带来了“阻碍”。不过大家还是比较喜欢纯CSS下拉菜单，现在我们就利用 IE条件注释来制作一个纯CSS下拉菜单。为了便于理解，选择了很很简单的代码，至于更复杂的，大家可以触类旁通、举一反三。 XHTML代码： <dl> <dt>一级菜单</dt> <dd>二级菜单</dd> <dd>二级菜单</dd> <dd>二级菜单</dd> </dl> CSS代码： dd{ display:none; } dl:hover dd{ display:block; } 查看效果在 IE7 和 FF 等标准浏览器中，下拉菜单可以正常使用，但 IE6 中却没有效果。既然 IE6 只有 a 标签才支持 :hover，那就加上 a 标签。XHTML代码改写成:  <dl> <dt>一级菜单</dt> <dd>二级菜单</dd> <dd>二级菜单</dd> <dd>二级菜单</dd> </dl>  CSS代码改写成： dd{ display:none; } dl:hover dd,a:hover dd{ display:block; } 查看效果然而在 IE6 中依然没有效果，为什么呢？难道代码有错？其实代码没有错，这是 IE6 的 BUG，关于次 BUG 你可以参看《:hover伪类在IE6中的BUG》。可以加上一些属性来消除此 BUG，这里给 a:hover 加 border:0，即CSS代码再次改写成： dd{ display:none; } dl:hover dd,a:hover dd{ display:block; } a:hover{ border:0; } 查看效果此时在 ... http://www.17css.com/a-detailed-explanation-of-the-css-drop-down-menu/ IE条件注释续上次发表的《IE条件注释》一直都觉得不完整，还存在一个问题，即：如何让非 IE 浏览器显示 IE 条件注释里的内容。曾经在嗷嗷的博客里看到相关方法，可今天再去已经没有了（难道我记错了？）。还好又在蓝色理想里一种方法（似乎比嗷嗷的更好些），这种方法是把 IE 条件注释和 HTML 的注释一起使用，以达到“欺骗”浏览器的效果。具体看例子： XHTML代码：  这段文字非IE浏览器可以显示  以上代码 IE 浏览器识别 IE 条件注释，其解释为：如果不是 IE 浏览器则显示其中的内容，所以 IE 浏览器不显示其中的内容；而非 IE 浏览器则只识别 HTML 注释，即“”之间的会被看成是注释，并且是完整的解释，所以非 IE 浏览器显示了其中的内容。 http://www.17css.com/ie-conditions-of-the-notes-2/ 用标准W3C盒子模型盒子模型是CSS中一个重要的概念，理解了盒子模型才能更好的排版。其实盒子模型有两种，分别是 IE 盒子模型和标准 W3C 盒子模型。他们对盒子模型的解释各不相同，先来看看我们熟悉的标准盒子模型：从上图可以看到标准 W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。 IE 盒子模型从上图可以看到 IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading。例：一个盒子的 margin 为 20px，border 为 1px，padding 为 10px，content 的宽为 200px、高为 50px，如果用标准 W3C 盒子模型解释，那么这个盒子需要占据的位置为：宽 20*2+1*2+10*2+200=262px、高 20*2+1*2*10*2+50=112px，盒子的实际大小为：宽 1*2+10*2+200=222px、高 1*2+10*2+50=72px；如果用IE 盒子模型，那么这个盒子需要占据的位置为：宽 20*2+200=240px、高 20*2+50=70px，盒子的实际大小为：宽 200px、高 50px。那应该选择哪中盒子模型呢？当然是“标准 W3C 盒子模型”了。怎么样才算是选择了“标准 W3C 盒子模型”呢？很简单，就是在网页的顶部加上 DOCTYPE 声明。如果不加 DOCTYPE ... http://www.17css.com/%e7%94%a8%e6%a0%87%e5%87%86w3c%e7%9b%92%e5%ad%90%e6%a8%a1%e5%9e%8b/ wordpress中文工具箱使用方法 wordpress 中文工具箱是用来解决官方 WordPress 没有照顾到的中文相关问题。使用这个插件，你可以显示随机文章，最新留言，留言最多文章，发表评论最多的网友，以及真正的文章摘要（如果你的模板里使用的是the_excerpt()来调用内容的话）等等，真正截断，没有乱码。这个插件由 WordPress 随机文章和 WordPress 评论插件合并增强而来。在激活这个插件之前，请务必先停用这两个插件，不然的话会有冲突。下载：mulberrykit.zip 安装：解压缩，把 mulberrykit.php 上传至 /wp-content/plugins/ 在管理界面里激活中文 WordPress 工具箱插件（如果你在使用 WordPress 随机文章和 WordPress 评论插件，务必先停用这两个插件。）使用说明： 1、最新回响 <?php get_recent_comments(); ?> 调用方式：get_recent_comments($no_comments = 5, $before = '<li> ', $after = '</li>', $show_pass_post = false) $no_comments：显示回响数，缺省为5条 $before：每条记录前显示的文字，缺省<li> $after：每条记录后显示的文字，缺省</li> $show_pass_post：是(true)/否(false)显示保护了的文章，缺省否(false) 补充： kdolphin 在回应里提出，希望在最新回响里不显示自己的回应。这很容易做到。在get_recentcomments() 这个函数里找到这一句： post_status = 'publish' 在后面加上 AND comment_author != '你的名字或你的帐号' 注意：最好在wp的插件编辑窗口下改，以免乱码的问题。根据网友的建议加上了两个相关的函数：仅显示留言，不包括引用 <?php get_recent_comments_only (); ?> 仅显示引用（包括trackback和pingback）<?php get_recent_trackbacks(); ?> 调用方式与<?php get_recent_comments(); ?>相同。 2、最新文章 <?php get_recent_posts(); ... http://www.17css.com/wordpress%e4%b8%ad%e6%96%87%e5%b7%a5%e5%85%b7%e7%ae%b1%e4%bd%bf%e7%94%a8%e6%96%b9%e6%b3%95/ css2高级选择器用 css 控制页面，必须用好选择器，否则可能会因为 css 的继承及权重等特性而得不到想要的效果。常用的 css 选择器有：标签选择器、类选择器、ID选择器。我们所见到的选择器几乎都是这三种。然而 css2 还有其他选择器，如：子选择器、相邻选择器、属性选择器，用好这些选择器，能少定义 class 或 id。那么这些 css 高级选择器怎么使用呢？ 1、子选择器子选择器，顾名思义就是选择一个元素的子元素，不包括子元素的子元素。它的符号是大于号“>”。如： XHTML代码： <p><a href="#">链接1</a><span><a href="#">链接2</a></span></p> CSS代码： p>a{ color:#ff0000; } 你可以点击这里查看效果。显示效果为“链接1”是红色，而“链接2”则不受影响。如果把“>”换成空格的话，那么css的继承特性会使两个 a 应用样式；如果不用子选择器的话，那就不得不给第一个 a 定义 class 或 id。 2、相邻选择器相邻选择器就是选择相邻的标签，它的符号是“+”。这里会出现两中情况： 1）如果相邻的两个标签不同，则应用到后一个标签的第一个的标签； 2）如果相邻的两个标签相同，则应用到该标签的除第一个以外的标签（语句有点拗口，看实例能更好的理解）。以下面的XHTML为例子： <h2>这是标题</h2> <p>这是第一个段落</p> <p>这是第二个段落</p> <p>这是第三个段落</p> 针对第一种情况： h2+p{ color:#ff0000; } 查看效果。效果是第一个p为红色。针对第二种情况： p+p{ color:#ff0000; } 查看效果。效果是除第一个p外的p为红色。 3、属性选择器属性选择器是针对HTML标签中的属性进行选择的。例： XHTML代码： <ul> <li><a href="http://17css.com" title="home">网站首页</a></li> <li><a href="#" title="about">关于本站</a></li> <li><a href="#" title="links">友情链接</a></li> </ul> CSS代码： a[title]{ text-decoration:none; } a[title="home"]{ color:#ff0000; } 查看效果 a[title] 是选择定义了 title 属性的 a 标签，a[title="home"] 是选择定义了 title="home" 的a标签。另：属性可以不加双引号，也可以是单引号，如 a[title="home"] 也可以写成 a[title=home] 或 a[title='home'] 。从例子中可以看到这三个选择器确实能减少网页中的class或id，但遗憾的是 IE6 均不支持。万恶的 IE6 。不过 IE6 的使用者正在减少，虽然速度比较慢，但这个趋势是不可避免的。 http://www.17css.com/css2%e9%ab%98%e7%ba%a7%e9%80%89%e6%8b%a9%e5%99%a8/ 仿淘宝UED主题imitate tb-ued发布淘宝UED的主题我觉得很不错，想用他的主题，但不好意思问人家要。所以我就“拿”了他的图片，仿着做了这么一个主题。本主题已经通过CSS2.1标准的验证，在 IE6 、IE7、FF2 中测试通过（其他浏览器未测试）。为了增强SEO，头部加了meta（虽然效果已不如从前，但比没有好），即网页关键字和描述。你可以添上相应的内容，不添加也没影响。如果觉得不需要也可以删掉。由于第一次做主题，技术不够成熟，没有把插件集成到主题里，所以为了显示正常，请安装分页插件WP-PageNavi和wordpress中文工具箱。另：如有其他bug或问题，请留言。主题下载 http://www.17css.com/%e4%bb%bf%e6%b7%98%e5%ae%9dued%e4%b8%bb%e9%a2%98imitate-tb-ued%e5%8f%91%e5%b8%83/ 再谈overflow清除浮动 overflow是一种很好的清除浮动的方法（至少我这么认为），先前发表的《三种有效的清除浮动的方法》里介绍了这种方法，从发表到现在也有一段时间了，这期间在其他地方也看到介绍overflow清除浮动文章，但和《三种有效的清除浮动的方法》里面的不太一样，下面就再说说overflow清除浮动。以下面的XHTML代码为例： <div id="container"> <div id="left"></div> <div id="right"></div> </div> 我以前用的方法是（CSS代码）： #container{ width:1000px; overflow:hidden; background:#999999; } #left{ width:70%; height:500px; float:left; background:#ff0000; } #right{ width:28%; height:500px; float:right: background:#0000ff; } 这种方法有效的清除了浮动，但 IE6 里没有效果，所以为了兼容 IE6 ，需要为父元素设了一个宽度，并且是一个合适的宽度。再一种方法是把 overflow:hidden 换成 overflow:auto ，但 IE6 仍然没有效果，为了兼容 IE6 ，还是要做“手脚”，可以为父元素加上 height:1% 或 zoom:1 ，有人说 height:1% 应该写成 _height:1% ，但我并没有发现不加_符号有什么影响。而 zoom:1 则不能通过W3C验证。总结一下：清除浮动可以用 overflow:hidden 或 overflow:auto ，在比较标准的浏览器里没有问题，但 IE6 没有效果，为了兼容 IE6 ，可以为父元素： 1、设置一个合适的宽度，但“合适的宽度”有的时候不好掌握； 2、加上 height:1% ，什么都不用管，加上就有效，我还没有发现缺点； 3、加上 zoom:1 ，不能通过W3C验证。为了兼容 IE6 的这三种方法根据自己的实际情况和个人喜好选择吧。 http://www.17css.com/%e5%86%8d%e8%b0%88overflow%e6%b8%85%e9%99%a4%e6%b5%ae%e5%8a%a8/ :hover伪类在IE6中的BUG :hover 是我们在 CSS 设计中最常运用的伪类之一，许多绚丽效果的实现离不开伪类 :hover，比如我们常见的纯 CSS 菜单、相册效果等等。或许用了这么久的伪类 :hover，还有部分朋友还不完全了解 hover 的规则：在 CSS1 中此伪类仅可用于 a 对象。且对于无 href 属性（特性）的 a 对象，此伪类不发生作用。在 CSS2 中此伪类可以应用于任何对象。但目前 IE5.5、IE6 仅支持 CSS1 中的 :hover，不过新出的 IE7 是支持 CSS2 中的 :hover。当我们用伪类 :hover 做某些特殊效果时，依据 CSS2 很好完成，但为了现在占据主流浏览器的 IE6 ，我们又不得不做很多工作，比如给添加a元素等来模拟完成最终的效果。或许这样讲太空洞，请看下面一个常见的触发显示的例子（仅选择IE6为例讲解）。我们先用 CSS2 的写法来实现： XHTML部分： <ul> <li>鼠标移过来触发我吧！<a href="#" title="">哈哈，终于被你发现了！</a></li> </ul> CSS部分： *{ margin:0; padding:0; } ul{ list-style:none; margin:100px; } li{ height:100px; width:100px; background:#000; font-size:12px; color:#fff; position:relative; }li a{ display:none; } li:hover a{ display:block; text-decoration:none; width:100px; height:100px; background:#c00; position:absolute; top:50px; left:50px; color:#fff; } 大家可以测试发现在 Firefox 等对 CSS2 支持很好的浏览器中，可以显示我们所要达到的效果，但在 IE6 中却无法实现。下面让我们换一种思维，所用 CSS1 的写法来看看，这个时候由于无法支持 ... http://www.17css.com/hover-of-the-bug-in-ie6/ 门户网站与大型网站的CSS架构与组织对于大型门户，海量信息平台及多模块，多区域化网站，更需要对CSS，XHTML的标准化，符合语意的HTML框架，复用性强的CSS代码，这些才能保障你的网站，具有很好的“地基”。第一部：关于构建CSS框架我们要实现的目的： 1.实现标准化，具备主流平台适应性的前端实现； 2.快速开发，在站点风格确定后，前端不应该成为整个项目里瓶颈； 3.重构的需求，尽可能的让类和区块样式可重用； 4.分离结构和表现的需求，遵守了语义化结构的约定; 5.构架完全符合金融网特色的CSS框架。 6.对代码进行必要的搜索引擎优化。第二部：关于CSS命名的一些约定： 1.不使用大写形式的类名和id名; 2.尽可能使用描述性的英文单词的组合作为类名和id名; 3.id名及类名的多个英文单词之间使用“_”短横线分隔; 4.按区域进行描述编号例：main01_div01_ul01 (可以理解为主体第一区域第一DIV下的第一个UL) 下来我们要对整个网站及设计稿进行分析，去做符合自己门户结构特色的CSS框架。我们以新浪网为例子进行站点结构分析，整个页面分为：首页，更多页，内容页，专题页，数据中心，新闻中心，频道页，广告…… 我们对这些页面进行整理，去发现他们的公共部分：CSS的样式,及区域，模块的碎片。我们需要做的是把这些公有的部分提出来，我们可以把CSS分以下几类：主体样式表：sjweb.css font(字体样式，字号，颜色的集合) layout(框架结构集合) global(全局默认样式集合) component（组成页面部分样式表，模块碎片集合）这些讲统统的被import到sjweb.css主体样式表里，主体样式表做为一个loader加载新的外来样式，比如广告样式表。这样这些页面只需要写一点点属于自己特殊要求的CSS样式代码就可以了。在构建这个CSS框架的时候有很多细节的东西最好能统一化，比如：行间距，模块之间间隔距离等。下面是某门户网的首页结构图：规则： 1.所有area之间，模块之间，间距上下左右为：8 Pixel ; 2.新闻列表颜色#333 ; 3.新闻列表行间距20 pixel； ……等等调整环境：IE7,ff,IE6,IE5.x,Opera。 PS：其实更多是你在构建的时候细节上的问题，好了不多说了。呵呵。文章摘自：http://www.sjweb.cn/ http://www.17css.com/%e9%97%a8%e6%88%b7%e7%bd%91%e7%ab%99%e4%b8%8e%e5%a4%a7%e5%9e%8b%e7%bd%91%e7%ab%99%e7%9a%84css%e6%9e%b6%e6%9e%84%e4%b8%8e%e7%bb%84%e7%bb%87/ wordpress自动升级成功开始使用wordpress是的版本是2.5.1，现在已经更新到2.6.2，由于不太懂wordpress，又没有升级过wordpress，在论坛上又看到很多wordpress在升级过程中或升级之后遇到这样那样的问题，所以我迟迟没有升级。前两天偶然知道Wordpress Automatic Upgrade这个插件，据说是一个可以让wordpress自动升级的插件。我很惊讶，我在怀疑这个插件到底行不行，是不是真的有这么神奇。怀疑归怀疑，为了不麻烦自己，我抱着试试的态度装上了这个插件。装上之后按常规的方法启用插件，可是到设置里却没有看到这个插件。怎么搞的？难道就是这样的？难道它就正在帮我升级了？然而浏览我的wordpress却依然可以访问（如果正在升级，会出现网站正在维护的提示），查看源代码提示版本也仍是2.5.1。继续捣鼓了几下，还是没有任何反应，就没有理它了。今天登陆wordpress后台，突然发现管理导航下比以前多了一行英文提示，又看到Upgrade这个单词，我就怀疑是Wordpress Automatic Upgrade插件的作用，我点击“Click me”后转到一个英文页面，由于不上很懂英文，所以找了个在线翻译，翻译了几句，知道这确实就是Wordpress Automatic Upgrade开始升级的页面，于是我就开始自动升级起来。为了防止升级过程中出现问题，所以我小心翼翼的进行着。一遇到看不懂的地方就进行翻译。最终，我的wordpress升级成功，整个过程不超过5分钟。有了这个插件，wordpress升级就不那么麻烦了，太好了。 http://www.17css.com/wordpress%e8%87%aa%e5%8a%a8%e5%8d%87%e7%ba%a7%e6%88%90%e5%8a%9f/ 更具亲和力的文字隐藏方法文字隐藏应用广泛，但常用的方法没有什么亲和力。常用文字隐藏方法的缺陷： 1、display:none 这种方法搜索引擎可能认为被隐藏的文字属于垃圾信息而被忽略；屏幕阅读器会忽略被隐藏的文字。 2、visibility: hidden 这种方法隐藏了文字却仍然占据物理空间。更好的方法： overflow:hidden .class{ display:block;/*统一转化为块级元素*/ width:0; height:0; overflow:hidden; } 从代码似乎就可以看出更具亲和力，因为它是自动隐藏，而不是强制隐藏。相关链接 http://www.mattcutts.com/blog/seo-mistakes-unwise-comments/ http://sonspring.com/journal/accessible-display-none http://www.456bereastreet.com/archive/200510/google_seo_and_using_css_to_hide_text/ http://www.17css.com/%e6%9b%b4%e5%85%b7%e4%ba%b2%e5%92%8c%e5%8a%9b%e7%9a%84%e6%96%87%e5%ad%97%e9%9a%90%e8%97%8f%e6%96%b9%e6%b3%95/ 密码保护：我的简历这是一篇受密码保护的文章。您需要提供访问密码：密码： http://www.17css.com/resume/ web设计辅助利器——FF必备插件 1、firebug 1.05中文版可以说是FF最强大的插件之一，无论是查看DOM结构、调节样式、调试JavaScript，Firebug都无愧是“拿莫温（NO.1）”。 2、web developer1.1.6中文版仅次于Firebug的网页开发设计者工具。功能众多而且强劲。看着这令人眼花缭乱的插件设置窗口，就能一窥它的强大。推荐网页开发者和网页设计者使用，能够帮助你方便的对页面进行调整和完善。 3、cssviewer 1.0.3中文版也是一个很强的CSS查看插件。 4、Aardvark 可以查看网页上鼠标出的元素的类型，id和应用的class。 5、ColorZilla 网页取色工具。 6、JavaScriptDebugge javascript调试工具，在这方面比FireBug更强大些。 7、JSView 可以查看当前页面的外部js和css，对开发者来说很有有帮助。 http://www.17css.com/web%e8%ae%be%e8%ae%a1%e8%be%85%e5%8a%a9%e5%88%a9%e5%99%a8%e2%80%94%e2%80%94ff%e5%bf%85%e5%a4%87%e6%8f%92%e4%bb%b6/ web标准的开始——DOCTYPE 今天在论坛上解决一个问题时，又看到他的网页没有加上DOCTYPE，于是在回复里加了一句提醒。我们浏览的大多数网站，或者用Dreamweaver创建一个新的网页文档时，源码的顶部都会有DOCTYPE声明，但是很多人没有注意它，甚至在创作时候直接将它删掉，其实这往往就是噩梦的开始，很有可能会引发一系列的问题。我在制作过程中就遇到很多因为没有加DOCTYPE声明而引发的奇怪问题，这些问题说都说不清楚。就拿行内元素来说，在加有DOCTYPE声明的文档中，它是没有高度和宽度的（这个是正确的），但不加DOCTYPE声明，给它定义高度和宽度是有效的。不加上DOCTYPE声明，那么各个浏览器会以各自默认的DOCTYPE解释文档，这就出现了差异，不兼容。所以DOCTYPE声明是很重要的。下面具体认识一下DOCTYPE：一、什么是DOCTYPE DOCTYPE是Document Type（文档类型）的简写，在页面中，用来指定页面所使用的XHTML（或者HTML）的版本。要想制作符合标准的页面，一个必不可少的关键组成部分就是DOCTYPE声明。只有确定了一个正确的DOCTYPE，XHTML里的标识和CSS才能正常生效。二、DOCTYPE的规则 DOCTYPE声明的写法遵循一定的规则，它指出阅读程序应该用什么规则集来解释文档中的标记。在Web文档的情况下，“阅读程序”通常是浏览器或者校验器这样的一个程序，“规则”则是w3c所发布的一个文档类型定义（dtd）中包含的规则。每个dtd都包括标记、attributes、properties等内容，它们用于标记web文档的内容；此外还包括一些规则，它们规定了哪些标记能出现在其他哪些标记中。每个web建议标准（比如html 4 frameset和xhtml 1.0 transitional）都有自己的dtd。以下是从手册上摘抄的规则：语法： HTML 顶级元素可用性 "注册//组织//类型标签//定义语言""URL" 可能值： - 顶级元素：指定 DTD 中声明的顶级元素类型。这与声明的 SGML 文档类型相对应。 HTML 默认。HTML。 - 可用性：指定正式公开标识符(FPI)是可公开访问的对象还是系统资源。 PUBLIC 默认。可公开访问的对象。SYSTEM 系统资源，如本地文件或 URL。 - 注册：指定组织是否由国际标准化组织(ISO)注册。 + 默认。组织名称已注册。 - 组织名称未注册。Internet 工程任务组(IETF)和万维网协会(W3C)并非注册的ISO组织。（组织：指定表明负责由 !DOCTYPE 声明引用的 DTD 的创建和维护的团体或组织的名称，即 OwnderID、IETF、W3C） - 类型：指定公开文本类，即所引用的对象类型。 DTD 默认。DTD。 - 标签：指定公开文本描述，即对所引用的公开文本的唯一描述性名称。后面可附带版本号。 - 定义：指定文档类型定义。 1、Frameset 框架集文档； 2、Strict 排除所有 W3C 专家希望逐步淘汰的代表性属性和元素，因为样式表已经很完善了； 3、Transitional 包含除 frameSet 元素的全部内容。 - 语言：指定公开文本语言，即用于创建所引用对象的自然语言编码系统。该语言定义已编写为 ISO 639 语言代码(大写两个字母)。 EN 默认。英语。 - URL：指定所引用对象的位置。为了获得正确的DOCTYPE声明，关键就是让dtd与文档所遵循的标准对应。例如，假定文档遵循的是xhtml 1.0 strict标准，文档的doctype声明就应该引用相应的dtd。另一方面，如果doctype声明指定的是xhtml ... http://www.17css.com/web%e6%a0%87%e5%87%86%e7%9a%84%e5%bc%80%e5%a7%8b%e2%80%94%e2%80%94doctype/ IE的条件注释从IE 5开始，有了IE条件注释。既然是“IE”条件注释，所以只有IE中才有效果。 IE条件注释是用来判断IE浏览器版本的。其基本结构和HTML的注释()是一样的，因此IE以外的浏览器将会把它们看作是普通的注释而完全忽略它们，而IE则会根据条件显示。所以IE条件注释常用于CSS hank。 IE条件注释的基本语法是：  之间的内容在IE浏览器中能显示，而其他浏览器则会把它当作注释忽略。 IE条件注释还可以加上浏览器版本：     IE条件注释还有几个特殊语法： 1、lte Less than or equal to的简写，也就是小于或等于的意思； 2、lt Less than的简写，也就是小于的意思； 3、gte Greater than or equal to的简写，也就是大于或等于的意思； 4、gt Greater than的简写，也就是大于的意思； 5、! 不等于的意思，跟javascript里的不等于判断符相同。举个例子：  有一点需要注意的是：IE条件注释只适用于HTML，对CSS则没有用。不过我们可以换一个思路解决这个问题：  这个方法就可以使需要的CSS只在IE里有效果。举一个综合的例子： XHTML代码：  <p>如果你使用的是IE浏览器，那么你会看到上面还有一行红色的文字；如果你使用的不是IE浏览器，那么你只能看到这段蓝色的文字。</p> CSS代码： <style type="text/css"> p{ color:#00f; } </style> <!--[if ie]> <style ... http://www.17css.com/ie%e7%9a%84%e6%9d%a1%e4%bb%b6%e6%b3%a8%e9%87%8a/