CSSer课堂

解释：UTF-8编码下导致的空行问题

二月 11th, 2010 by San in Web Standard | 1 Comment →

UTF-8签名(UTF-8 signature)也叫做BOM(Byte Order Mark)，是UTF编码方案里用于标识编码的标准标记。
如果多个文件设置了签名，在二进制流中就会包含多个UTF-8签名，而IE是无法识别多个UTF-8签名的，所以用一个空行来代替，在某些程序处理中还会出现一个类似“诺”的字符。

在UCS 编码中有一个叫做”ZERO WIDTH NO-BREAK SPACE”的字符，它的编码是 FEFF。而FFFE在UCS中是不存在的字符，所以不应该出现在实际传输中。UCS规范建议我们在传输字节流前，先传输字符”ZERO WIDTH NO-BREAK SPACE”。这样如果接收者收到FEFF，就表明这个字节流是Big-Endian的；如果收到FFFE，就表明这个字节流是Little- Endian的。

因此字符[ZERO WIDTH NO-BREAK SPACE]又被称作BOM。
详情: W3C官方关于这个问题的说明

解决方法：
去掉UTF-8文件的签名，EditPlus和Dreamweaver中均有相应的选项。

以EditPlus为例：
进入 Tools->Preferences->Files，在UTF-8 signature选项中选择“Always remove signature”，重新保存文件即可。

如果模板采用包含的方法包含多个utf8文件需要用ultraedit保存时另存为功能，选择utf8 无bom格式保存即可。

另外，如果中文页面在html head标记中将title标记放在前面会导致页面空白。
所以utf8页面应该使用标准顺序

Tags: UTF-8, Web Standard, 页面顺序

不增加服务器处理负担的圆角头像CSS解决方案

一月 28th, 2010 by San in User Experience, Web Standard | 1 Comment →

本着不增加服务器开销，负担的原则，考虑使用CSS来处理用户头像，相册等。
圆角头像，是可以通过CSS技巧来实现的，并且浏览器兼容性佳！

看看效果图片如何？
3face

看着还行，对吧?

一下为运行代码：

<!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=utf-8" /> <title>圆润头像</title> <style type="text/css"> body{ background:#000; color:#fff; } .avatar{ padding:15px; background:#fff; } /* face */ .face1,.face2,.face3{ position:relative;/* 相对定位，给em一个定位基线 */ } /* face img */ .face1 img,.face2 img,.face3 img{ padding:3px; } /* face em */ .face1 em,.face2 em,.face3 em{ position:absolute; top:0; left:0; width:100%; height:100%; } /* face 1 */ .face1{ width:126px; height:126px; } .face1 em{ background:url(http://blog.owncsser.com/wp-content/uploads/2010/01/face1.png) no-repeat; } /* face 2 */ .face2{ width:54px; height:54px; } .face2 em{ background:url(http://blog.owncsser.com/wp-content/uploads/2010/01/face2.png) no-repeat; } /* face 3 */ .face3{ width:36px; height:36px; } .face3 em{ background:url(http://blog.owncsser.com/wp-content/uploads/2010/01/face3.png) no-repeat; } </style> </head> <body> <div class="avatar"> <div class="face1"> <img src="http://static1.139js.com/system/avatar/19642548/200/1263120798344124.jpg" width="120" height="120" /><em> </em> </div> <div class="face2"> <img src="http://static1.139js.com/system/avatar/19642548/48x48/1263120798344124.jpg" width="48" height="48" /><em> </em> </div> <div class="face3"> <img src="http://static1.139js.com/system/avatar/19642548/48x48/1263120798344124.jpg" width="30" height="30" /><em> </em> </div> </div> </body> </html>

提示：你可以先修改部分代码再运行。

在以上的图片圆角框处理中，有一个技巧。
图片圆角框上下左右都会预留一个空间，而这个尺寸恰好是头像图片中CSS的padding值。
/* face img */ .face1 img,.face2 img,.face3 img{ padding:3px; }
这样处理后，方便让圆角框正好遮住目标图片。

似乎上面的例子中，还可以在此减少服务器的开销，对。可以把圆角框拼接起来，成为一张图片。原理CSS Sprite,运行一下第二个优化方案。

<!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=utf-8" /> <title>圆润头像 2</title> <style type="text/css"> body{ background:#000; color:#fff; } .avatar{ padding:15px; background:#fff; } /* face 相对定位，给em一个定位基线 */ .face1,.face2,.face3{ position:relative; } /* face img */ .face1 img,.face2 img,.face3 img{ padding:3px; } /* face em */ .face1 em,.face2 em,.face3 em{ position:absolute; top:0; left:0; width:100%; height:100%; } .face1{ width:126px; height:126px; } .face2{ width:54px; height:54px; } .face3{ width:36px; height:36px; } .face1 em{ background:url(http://blog.owncsser.com/wp-content/uploads/2010/01/face.gif) 0 0 no-repeat; } .face2 em{ background:url(http://blog.owncsser.com/wp-content/uploads/2010/01/face.gif) 0 -126px no-repeat; } .face3 em{ background:url(http://blog.owncsser.com/wp-content/uploads/2010/01/face.gif) 0 -180px no-repeat; } </style> </head> <body> <div class="avatar"> <div class="face1"> <img src="http://static1.139js.com/system/avatar/19642548/200/1263120798344124.jpg" width="120" height="120" /><em> </em> </div> <div class="face2"> <img src="http://static1.139js.com/system/avatar/19642548/48x48/1263120798344124.jpg" width="48" height="48" /><em> </em> </div> <div class="face3"> <img src="http://static1.139js.com/system/avatar/19642548/48x48/1263120798344124.jpg" width="30" height="30" /><em> </em> </div> </div> </body> </html>

提示：你可以先修改部分代码再运行。

Tags: avatar, CSS Sprite, face, 圆角头像

迟来的作业：表现与结构分离之好友列表操作

十一月 8th, 2009 by 猫小样 in Web Standard | 4 Comments →

王开放提交的作业

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>表现与结构分离之好友列表操作</title> <style type="text/css"> *{padding:0; margin:0;} body{padding:50px; font:12px/1.5 Arial, Helvetica, "宋体", sans-serif; color:#333333;} .firends{width:378px; height:190px; padding:4px; border:#D6D6D6 solid 1px; background-color:#F7F7F7; overflow:auto;} .firends li{list-style:none; float:left; text-align:center; padding:0 4px; margin:4px 0; position:relative;} .firends a{display:block; width:64px; height:81px; text-align:center; color:#333333; text-decoration:none; padding-top:4px;} .firends a:hover{background:url(http://www.wkaifang.com/wp-content/uploads/2009/11/hover.gif) no-repeat;} .firends .cur a{background:url(http://www.wkaifang.com/wp-content/uploads/2009/11/bg.gif) no-repeat; color:#FFF;} .firends img{display:block; padding:2px; border:#DDDDDD solid 1px; background-color:#FFF; margin:0 auto 5px;} .firends a:hover img{border:#47991f solid 1px;} .firends .cur a img{border:#96cc29 solid 1px; background-color:#6bb324;} .firends li strong{background:url(http://www.wkaifang.com/wp-content/uploads/2009/11/v.gif) no-repeat; width:13px; height:13px; text-indent:-9999em; position:absolute; left:11px; top:44px;} </style> </head> <body> <div class="firends"> <ul> <li><a href="#"><img src="http://www.wkaifang.com/wp-content/uploads/2009/11/img.gif" width="50" height="50" alt="" /> 王开放</a></li> <li class="cur"><a href="#"><img src="http://www.wkaifang.com/wp-content/uploads/2009/11/img.gif" width="50" height="50" alt="" /> 王开放</a><strong>选中</strong></li> <li><a href="#"><img src="http://www.wkaifang.com/wp-content/uploads/2009/11/img.gif" width="50" height="50" alt="" /> 王开放</a></li> <li><a href="#"><img src="http://www.wkaifang.com/wp-content/uploads/2009/11/img.gif" width="50" height="50" alt="" /> 王开放</a></li> <li><a href="#"><img src="http://www.wkaifang.com/wp-content/uploads/2009/11/img.gif" width="50" height="50" alt="" /> 王开放</a></li> <li><a href="#"><img src="http://www.wkaifang.com/wp-content/uploads/2009/11/img.gif" width="50" height="50" alt="" /> 王开放</a></li> <li><a href="#"><img src="http://www.wkaifang.com/wp-content/uploads/2009/11/img.gif" width="50" height="50" alt="" /> 王开放</a></li> <li><a href="#"><img src="http://www.wkaifang.com/wp-content/uploads/2009/11/img.gif" width="50" height="50" alt="" /> 王开放</a></li> <li><a href="#"><img src="http://www.wkaifang.com/wp-content/uploads/2009/11/img.gif" width="50" height="50" alt="" /> 王开放</a></li> <li><a href="#"><img src="http://www.wkaifang.com/wp-content/uploads/2009/11/img.gif" width="50" height="50" alt="" /> 王开放</a></li> <li><a href="#"><img src="http://www.wkaifang.com/wp-content/uploads/2009/11/img.gif" width="50" height="50" alt="" /> 王开放</a></li> <li><a href="#"><img src="http://www.wkaifang.com/wp-content/uploads/2009/11/img.gif" width="50" height="50" alt="" /> 王开放</a></li> <li><a href="#"><img src="http://www.wkaifang.com/wp-content/uploads/2009/11/img.gif" width="50" height="50" alt="" /> 王开放</a></li> <li><a href="#"><img src="http://www.wkaifang.com/wp-content/uploads/2009/11/img.gif" width="50" height="50" alt="" /> 王开放</a></li> <li><a href="#"><img src="http://www.wkaifang.com/wp-content/uploads/2009/11/img.gif" width="50" height="50" alt="" /> 王开放</a></li> <li><a href="#"><img src="http://www.wkaifang.com/wp-content/uploads/2009/11/img.gif" width="50" height="50" alt="" /> 王开放</a></li> <li><a href="#"><img src="http://www.wkaifang.com/wp-content/uploads/2009/11/img.gif" width="50" height="50" alt="" /> 王开放</a></li> <li><a href="#"><img src="http://www.wkaifang.com/wp-content/uploads/2009/11/img.gif" width="50" height="50" alt="" /> 王开放</a></li> <li><a href="#"><img src="http://www.wkaifang.com/wp-content/uploads/2009/11/img.gif" width="50" height="50" alt="" /> 王开放</a></li> <li><a href="#"><img src="http://www.wkaifang.com/wp-content/uploads/2009/11/img.gif" width="50" height="50" alt="" /> 王开放</a></li> </ul> </div> </body> </html>

提示：你可以先修改部分代码再运行。

第 3 页/共 12«1 234 5 »10...尾页 »

CSSer课堂

解释：UTF-8编码下导致的空行问题

不增加服务器处理负担的圆角头像CSS解决方案

迟来的作业：表现与结构分离之好友列表操作

终极目标:验证CSS和(x)Html

课程分类

课程回顾

课堂讨论

My Links

SEO Links

大学课本

CSSer课堂

解释：UTF-8编码下导致的空行问题

不增加服务器处理负担的圆角头像CSS解决方案

迟来的作业：表现与结构分离之好友列表操作

终极目标:验证CSS和(x)Html

课程分类

课程回顾

课堂讨论

本章词汇

My Links

SEO Links

大学课本