Archive for 十月, 2009

CSS BUG顺口溜

一、IE边框若显若无,须注意,定是高度设置已忘记;

二、浮动产生有缘故,若要父层包含住,紧跟浮动要清除,容器自然显其中;

三、像素文本慢移不必慌,高度设置帮你忙;

四、兼容各个浏览须注意,默认设置行高可能是杀手;

五、独立清除浮动须铭记,行高设无,高设零,设计效果兼浏览;

六、学布局须思路,路随布局原理自然直,轻松驾驭html,流水布局少hack,代码清爽,兼容好,友好引擎喜欢迎。

七、所有标签皆有源,只是默认各不同,span是无极,无极生两仪—内联和块级,img较特殊,但也遵法理,其他只是改造各不同,一个*号全归原,层叠样式理须多练习,万物皆规律。

八、图片链接排版须小心,图片链接文字链接若对齐,padding和vertical-align:middle要设定,虽差微细倒无妨。

九、IE浮动双边距,请用display:inline拘。

十、列表横向排版,列表代码须紧靠,空隙自消须铭记。


一位前辈写的HTML规范

九大原则
原则一:一般要写兼容IE6,IE7和FIREFOX的网页,最省事的方法就先写适合IE7的样式,因为IE7和FIREFOX很接近,这样判断浏览器兼容的工作量就能减小到最少。 

原则二:逐步叠加的方式,如果需要用这个样式的模块很多,并且会存在些许的不同,千万不要把样式一步写到位,最好把框架性的先写好,细节性的留到第二个步骤,甚至第三个步骤,当然最好步骤不要超过三步,这样很不利于维护。由若干个二级定义对一级定义进行补充,这样的既可以减少代码,又可以减少繁多的CLASS命名。

原则三:从总到分。顺序应该是这样:总体需要用到的>>结构>>模块>>二级模块>>细节;并且这个文档最不容易修改的处于最上端,频繁用于修改的在末端。最忌讳即兴发挥,这样写出的东西经不起推敲,稍有变化就要忙得乱成一团。结构性的东西应该慎重精细。 

原则四:尽量把能够放在一组的小图标或者图片放在一个图片文件里,这样的好处有很多。
1、 图片文件的总量会变小;
2、利于下载,太多的小图片下载效果是不理想的,常常会发现这个图片出来,那个没出来,这样在写样式的时候只需要写一个总体的,对于具体的要显示的只需要标一个位置,非常省时间,样式也很精炼;
3、显而易见,这样做非常便于管理,替换或新增的时候工作量很小。 

原则五:切图的原则,应该切大的图绝不切小,应该切小的绝不切大,能够用颜色代替的绝不切图。把一个大图切成很多份并不一定能够加快页面的显示速度,相反会浪费很多不必要的带宽。不光要控制图片文件的多少,还要考虑到这样切会不会造成页面增加许多额外的代码。 

原则六:图片的命名规则,定一个规则,准备用一辈子。这样以后你看CSS文档的时候,你只要看到某个图片名称的时候,你不需要看太多你就知道这个图片的用途、位置;这样可以最大限度的保证样式的重用性。 

原则七:在该不该用表格的问题上,我的态度是,涉及多行多列的特别是列宽有不固定的,坚决用表格,这个没啥好讨论的,千万不要为了DIV而DIV,用一大陀CSS去模仿一个表格是很极端的行为。当然也有例外的,需要灵活处理,但千万别模仿什么表格。 

原则八:尽可能不把样式直接写到元素的标签里(除非这个样式出现的机率特别小,有相当程度的偶然性),把样式直接写到元素标签里是一种工作范畴意义上的无政府行为,非常不负责。

原则九:尽量不要用ID来定义或索引样式,ID的唯一性比较高,且用ID索引样式效率非常低而且兼容性的问题也比较明显。

总之所有的一切都为了精简,为了效率,也为了重用。


整理及优化CSS代码的7个原则

作为网页设计师(前端工程师),你可能还记得曾经的那个网页大小建议:一个网页(包括 HTML、CSS、Javacript、Flash和图片)尽量不要超过30KB的大小,随着互联网的日益庞大,网络带宽也在飞速发展,很多设计师已经不 再考虑这条30KB的理想准则。随着越来越受欢迎的CSS布局和Javascript对网站用户体验的强化,使得这种现象越来越普遍,尤其是对于大型网站 来说,仅仅一个CSS文件就已经超过了30KB的上限。


但是即便如此,现在也有很多准则来帮助你在完成CSS布局后进行CSS代码的压缩和优化。CSS代码优化的目的并不仅仅是减少CSS文件的大小,它还能让你的CSS代码更有条理、更高效。


您还可以参阅暴风彬彬曾经讲解过的《10个CSS简写技巧让你永远受用》。

1.使用简写

Margin、border、padding、background、font、list-style和outline 都是可以进行简写的属性。CSS简写就是不再使用不同的相类似属性的声明…

p { margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px; }

你可以把它们简写成这样:

p { margin: 10px 20px 30px 40px; }

2.避免使用Hack

Hack是一个糟糕的东西,它会为不同浏览器定义一样的代码,使得CSS繁冗。现在我们知道使用条件性注释来代替hack,他们在IE6和IE7中是被认可的,甚至IE团队也推荐这样使用。使用条件性注释服务于符合浏览器特性专用的CSS代码,因此,更小的、核心的CSS代码用来服务于遵从标准的浏览器,只有需求条件出现的时候(比如IE),才会去下载额外的CSS文件!

下面来看看IE6使用条件性注释的代码范例:

<!–[if IE 6]>
<link rel=”stylesheet” type=”text/css” href=”ie6.css” mce_href=”ie6.css”>
<![endif]–>

这段代码使得IE6去下载额外的ie6.css解析它专用的css代码。同样的,如果针对IE7只用把上面的6与7替换就行了。

3.使用留白

无论是为了自己阅读还是二次开发,都要让CSS保持良好的可读性,留白就充当了关键的角色。

我们不鼓励你为了得到一个更小的CSS文件,就去掉所有的空白格式,如tab,换行,空格等。这里推荐嵌套的代码使用一个tab缩进,所有属性独立一行。

4.移除多余的结构(frameworks)和重设(resets)

如果你选择使用CSS framework,包括你自己写的,如果你去检查代码一定会发现该framework包含的一些规则并不适用于你当前的文件,它们是可以被删除的。

由此可以想到的还有reset,YUI Grid CSS使用的reset和Eric Meyer’s 重设(Reset) 目前都很流行, Resets能够移除不同浏览器的默认样式,使得页面在各个浏览器之间的表现一致。但是它们通常包含了一个大的网站需要的所有属性,一些例 如<pre>,<code>,<sub>,<dfn>,<var>等等属性对于普通网站来 说根本不会用上,删掉那些你用不上的。

framework和reset会很好的帮助你的工作,但是如果不去掉那些你用不上的使用,反而会拖累你页面的效率和可读性。

5.让CSS能保证日后的维护

另一种优化CSS代码的方法是按照你的习惯将CSS生命分成清晰的结构块。将CSS文件的声明用注释分隔开并进行排版,可以更方便自己在很长时间以后重新审理这个CSS文件,到那时你的效率会高出许多。

然而,暴风彬彬更崇尚那种拆分布局风格,也就是给每种布局一个单独的CSS文件。Andy Clarke的《超越CSS》(Transcending CSS)一书也是提倡这种方法。

6.记录你的工作

这种工作并不仅仅适用于团队,也同样适用于一个人的设计工作。毕竟,在完整一个设计项目之后,经过一年甚至更长的时间,当你再回来看 到这些曾经自己写的代码时,也一样会觉得很陌生。将来你会通过自己曾经的记录了解到在那些CSS结构是如何让网页表现的,或那个网页对表单按钮的起到副作 用。

记住,一定要养成为CSS写注释的习惯。

7.压缩使用

为了使得浏览器节省更多下载个载入时间,压缩是一个不错的解决方案,但是仅限于发布的时候。YUI CompressorCSSTidy 就是这样方面的专家,他们能够去除多余的代码,校验属性互相覆盖的错误。
许多流行的编辑器,比如BBEdit, TextMate, 和 TopStyle 都能够帮助你格式化你的CSS代码成你想要的样子。你还能通过服务器压缩技术
使用PHP处理你的CSS。你可以找到更多的CSS优化和压缩的CSS工具

有一点,这些程序尽可能会降低错误的发生,但并不是完美的。同样,最好不要用他们去处理包含CSS hack的文件。这也是另一个让那些hack储存在另外的文件里的原因。

总结

整理和优化代码不仅是为了你 的CSS文件大小,还包括了维护性和可读性。以上的原理并不只是针对CSS,它们还能应用到HTML,Javascript以及其他编程语言。CSS文件 不只是为了呈现给你网站的最终用户。上面的原理可以帮助用户体验以及开发者经验。运用这些原则到你未来的项目中,一定能够获得重大的成效。

来源:http://hi.baidu.com/kearseking/blog/item/ea1f5c03afc367e409fa9341.html


HTML中的iframe

虽说iframe对seo不够友好,但也不失为一种没有办法的方法。记得以前从哪里看过一篇文章说Google AdSense就是利用iframe插入到各种各样千奇百怪的网页中去的。
—————————————————-
iframe生成文档中的浮动帧。浮动帧与普通帧不同,是另一HTML文档中可以独立操作的元素。

代码示例:
<IFRAME   align=left   border=0   frameborder=0   framespacing=0
marginheight=0   marginwidth=0   width=774   height=60
noResize   scrolling=no   src=”HTTP://WWW.163.COM”>
</IFRAME

代码示例:
<IFRAME    border=0   frameborder=0   framespacing=0 marginheight=0 marginwidth=0 width=774   height=60  scrolling=no  src=”http://WWW.chesanqi.COM”>
</IFRAME>

属性:
order=”n”                  //指定浮动帧的边框厚度(像素);

BorderColor=”#ccc”    //指定浮动帧的边框颜色(可以是颜色名和16进制代码);

FrameBorder=0   //指定浮动帧是否显示边框,0为不显示,1为显示;

FrameSpacing=”n”       //表示相同浮动帧之间的间距(像素);

Height=”n”                 //指定浮动帧竖直方向的尺寸(像素);

HSpace=”n”               //指定浮动帧内左右边界的大小(像素);

ID=”…”                     //指定<IFRAME>标志实例的唯一ID选择符,可以此ID为它指定样式;

MarginHeight=”n”       //指定浮动帧上下边界的大小(像素);

MarginWidth=”n”        //指定浮动帧左右边界的大小(像素);

Name=”…”            //指定帧的唯一名称,可以在其它帧中向这个帧名装入新文档或操作其属性;

NoreSize           //指定浮动帧不可调整其尺寸,此属性只在IE中有用;

Scrolling=no     //指定浮动帧是否有滚动条;yes为有,no为没有。

Src=”url”           // 指定装入浮动帧的文档文件的相对或绝对路径;

Style=”…”         //指定浮动帧中内容所采用的样式单命令;

Width=”n”         //指定浮动帧的水平尺寸(像素);

VSpale=”n”       //指定浮动帧中上下边界的尺寸(像素);

IFRAME 元素也就是文档中的文档,或者好像浮动的框架(FRAME)。frames 集合提供了对 IFRAME 内容的访问。

使用 frames 集合读写 IFRAME 内包含的元素。例如,如果要访问 iframe 内 body 对象的 backgroundColor 样式,语法应为:

sColor = document.frames(“sFrameName”).document.body.style.backgroundColor;

通过 iframe 对象所在页面的对象模型,你可以访问 iframe 对象的属性,但不能访问其内容。例如,访问 iframe 对象的 border 样式的语法应为:

sBorderValue = document.all.oFrame.style.border;

注意 iframe 的属性必须使用前缀 document.all 访问,例如

document.all.iframeId.marginWidth。


不要间隔线,不要class

今天在网上看到一个小技巧,不需要额外的class就能去掉多余的类目间的间隔线。说起来这个方法很简单,关键在于合理利用ul的overflow属性,把那条多余的间隔线隐藏掉就可以了。恍然大悟的同学直接去试验吧,不懂的同学请看:

以下内容来自淘宝UED的正淳同学

从很久很久以前开始,类目间的竖线无非都只有三种。

1、背景图
在a标签设置一个padding 用宽1px高不等的背景图来position到右侧。
缺点:最后一个还是要用class来隐藏掉背景。

2、符号
在每个a标签之间用”|”符号来填充。
缺点:html文件变大,文件维护变得很麻烦,而且在html中毫无意义。

3、a标签右侧的boder。
同背景图一样,只不过使用border-right来代替。缺点也同上。

看到这里,可能已经有人打开淘宝首页用firebug查看源码来看是怎么做了。

其实现有是利用ul的overflow:hidden 再将li的margin-left:-1px的做法做出来的。这样的做法就可以同时避免以上的缺点了。


Copyright © 2008-2012 Chesanqi's Web World. All rights reserved.
Jarrah theme by Templates Next | Powered by WordPress