CSSer课堂 http://blog.owncsser.com 我们是师徒六人组，以Design, CSS, JS, web标准化为爱好。 Fri, 21 Jan 2011 06:32:21 +0000 http://wordpress.org/?v=2.8.2 en hourly 1 多终端样式适配策略[PDF] http://blog.owncsser.com/mobile-adaptive-wap20/ http://blog.owncsser.com/mobile-adaptive-wap20/#comments Fri, 21 Jan 2011 06:32:21 +0000 San http://blog.owncsser.com/?p=241 2011年了，总结下2010年WAP开发的一些经验积累。
并提供PDF供大家下载，希望我的手机终端的wap开发能对你有用。

手机多终端样式适配策略

]]> http://blog.owncsser.com/mobile-adaptive-wap20/feed/ 3 可以穿越的Firebug跨浏览器的调试方法 http://blog.owncsser.com/firebug-crossing/ http://blog.owncsser.com/firebug-crossing/#comments Fri, 03 Dec 2010 06:18:28 +0000 San http://blog.owncsser.com/?p=238 firebug可以跨浏览器进行调试，支持IE6+,ff,opera。

firebug很好用，但是IE下可以调用firebug的方法更让你觉得给力。方法简单：

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

添加以上代码到你的页面里面。

]]> http://blog.owncsser.com/firebug-crossing/feed/ 2 手机视觉与用户体验-网易WAP改版谈 http://blog.owncsser.com/mobile-vision-and-ue/ http://blog.owncsser.com/mobile-vision-and-ue/#comments Fri, 03 Dec 2010 03:05:15 +0000 San http://blog.owncsser.com/?p=225 了解外界世界及在地铁中打发时间的唯一好办法，开UC看新闻。新闻的链接先点开一堆，新浪，网易，凤凰，搜狐，然后挨个看头条。

以前在看新闻，觉得最耐看，最给力的还是网易wap站，总会有意想不到的新闻焦点不同于其他新闻媒体。可自从丫改版了，更换了貌似看起来很绚丽的样式之后，我不看了，因为我看到的字体更小，眼睛更加吃力，长时间会有疼痛的感觉。

为了眼睛，我发过反馈意见给网易，临了还留了邮箱，以便联系。不过貌似不怎么搭理我这个忠实的用户，得！以后可以绕行，避免为我的眼睛弄一个隔着玻璃看。

1.基于手机屏幕有限度的尺寸限制，应该让网页能按照用户（手机用户）设定的默认字体尺寸来显示，这样也是延续用户基本的个人需求体验。
2.新闻类的手机网页更不能强制千篇一律的给用户一个字体尺寸，而阻止用户设定查看多文本的内容的默认字体尺寸习惯。
3.尊重用户反馈，即使你觉得他可以忽略不计。

在WAP网站开发时，字体一定要斟酌而定，避免发生用户不能设置字体大小，设置的字体类型与期望不同的情况出现。方法很简单：

1.设置相对字体不设置绝对（px）字体
2.不要画蛇添足设置字体类型
3.触屏手机应单独处理（Android/iPhone/iPod/iPad）字体尺寸，按钮大小

具体实现方式：
font-size:medium;
即就是，设置中等字体。（用户手机的显示一般为大，中，小）这样可以沿用用户的手机视觉习惯。

一个实用的样式设置例子：
html,body,p,form,div,table,textarea,input{font-size:medium;vertical-align:middle}/* 千万不要省心而用[*]处理 */
body{background:#5e99ce;color:#414141;padding:1px}
form{border:0;margin:0;padding:1px}
img{border:0;vertical-align:middle}
textarea{width:95%;}/* 长文本输入框在设置 100% 后很多会溢出 */

另外需要注意的两个重要的Meta标签：

meta name=”viewport” content=”width=device-width; initial-scale=1.0; minimum-scale=1.0; maximum-scale=2.0″

meta name=”MobileOptimized” content=”240″

这个很重要，具体的用法，还是多搜索下，多看看，加深理解。

有什么要说，敬请留言：

]]> http://blog.owncsser.com/mobile-vision-and-ue/feed/ 2 jquery之input提示文字替换效果 http://blog.owncsser.com/jquery_input_replacement/ http://blog.owncsser.com/jquery_input_replacement/#comments Thu, 10 Jun 2010 08:17:19 +0000 San http://blog.owncsser.com/?p=223 jquery用于input提示文本的效果，简单实用，易于扩展。

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

]]> http://blog.owncsser.com/jquery_input_replacement/feed/ 0 WML2.0经验交流之开发利器 http://blog.owncsser.com/wml20-development-weapon/ http://blog.owncsser.com/wml20-development-weapon/#comments Tue, 16 Mar 2010 02:36:27 +0000 San http://blog.owncsser.com/?p=216 手机浏览器的页面适配是个挑剔的活，需要适配的手机浏览器千奇百怪.所以,我们必须精细的对待页面代码,只有这样才能让我们的页面顺利的被浏览器所解析并正常显示.

这里便引出一个页面书写基本要求：
1.单个标签必须闭合
2.成对标签必须闭合
3.成对标签不允许无内容出现
4.嵌套规则必须遵循

而需要做到以上几点,对于在书写页面以及调试过程中,便需要借助一些验证插件来调试我们所写的页面,那谁谁说:”科学技术是第一生产力”.我得瑟下”懂得借助工具可以提升生产力”.不废话,推荐的页面调试及组合:
Fire Fox① +WMLbrowser② + HTML VALIDATOR③ + Fire Bug④
1) Fire Fox不用介绍了
2) WMLbrowser 用来使用Fire Fox浏览wml格式手机网页
3) HTML Validator 主要用来验证页面标签,网址 http://users.skynet.be/mgueury/mozilla/
4) Fire Bug 这个工具很强大.具体查看http://getfirebug.com/

以上浏览器以及三个组件便是网页调试的组合利器.点击下载wml20_Development-weapon.DOC

]]> http://blog.owncsser.com/wml20-development-weapon/feed/ 0 WML2.0确保通行的CSS验证标准 http://blog.owncsser.com/wml20-css-standard/ http://blog.owncsser.com/wml20-css-standard/#comments Mon, 08 Mar 2010 10:20:37 +0000 San http://blog.owncsser.com/?p=209 细节决定成本，确实，你不服，就是不行！

手机测试页面时候遇到非常刁难的问题，然后百思不得其解，去使用CSS验证了下。
如图：
wmlcss

验证结果发现，使用手机网页格式的DTD声明，不支持定义【a:hover】，从而导致异常错误。

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

得出一个结论：

  1. DTD声明是有用的
  2. CSS应根据DTD声明类型去验证（必须的）
  3. 手机字体大小建议使用相对字体（否则页面适配很麻烦）
  4. 手机网页最好内嵌style（不要使用外链）
  5. 结合HTML Validator对页面进行验证，见WML2.0经验交流之开发利器
]]> http://blog.owncsser.com/wml20-css-standard/feed/ 0 解释：UTF-8编码下导致的空行问题 http://blog.owncsser.com/utf-8-space-line/ http://blog.owncsser.com/utf-8-space-line/#comments Thu, 11 Feb 2010 08:47:26 +0000 San http://blog.owncsser.com/?p=204 文章来源：UTF-8空行产生的原因

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页面应该使用标准顺序

]]> http://blog.owncsser.com/utf-8-space-line/feed/ 1 不增加服务器处理负担的圆角头像CSS解决方案 http://blog.owncsser.com/mellowness-avatar/ http://blog.owncsser.com/mellowness-avatar/#comments Fri, 29 Jan 2010 02:10:53 +0000 San http://blog.owncsser.com/?p=196 本着不增加服务器开销，负担的原则，考虑使用CSS来处理用户头像，相册等。
圆角头像，是可以通过CSS技巧来实现的，并且浏览器兼容性佳！

看看效果图片如何？
3face

看着还行，对吧?

一下为运行代码：

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

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

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

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

]]> http://blog.owncsser.com/mellowness-avatar/feed/ 1 迟来的作业：表现与结构分离之好友列表操作 http://blog.owncsser.com/web-standard-friend-list2/ http://blog.owncsser.com/web-standard-friend-list2/#comments Mon, 09 Nov 2009 03:39:38 +0000 猫小样 http://blog.owncsser.com/?p=187 王开放提交的作业

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

]]> http://blog.owncsser.com/web-standard-friend-list2/feed/ 4 Web标准化之如何写符合标准的导航 http://blog.owncsser.com/map-nav/ http://blog.owncsser.com/map-nav/#comments Tue, 29 Sep 2009 10:35:14 +0000 猫小样 http://blog.owncsser.com/?p=182 显然，Web标准并不是一个严格执行的标准，但是我们却可以像W3C推荐的那样尽可能的将页面实现标准化。

上周我们讨论了标准的导航写法：
第一种方案
<ul>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
</ul>
优点：相对有语义，多一个控制节点，可以灵活控制，实现二级菜单。
缺点：用户体验相对差些，UL的执行效率显然逊色于A标签。

第二种方案
<div>
<a></a>
<a></a>
<a></a>
</div>
优点：代码简洁，能实现一般类型的导航，页面执行效率要不UL迅猛。
缺点：语义相对差些，若需实现较复杂的导航需要嵌套额外的标签。

那是不是有更标准的更符合语义的做法呢？有人说可以用HTML5里新增加的.

但就目前来看,等待HTML5的发布还为时尚早，再加上不同浏览器的支持程度，更是不敢恭维。

有没有更加合理的解决方案能够填补这个空白？ 有的！

请看如下代码：
<map><div>
<a></a><a></a><a></a>
</div></map>
对 就是 map !W3C官网的写法！

W3C的说明是The MAP element may be used without an associated image for general navigation mechanisms.MAP元素可用于无关联的图像一般导航机制。

map具有地图、导航的特性，结合上面提到的第二个方案，这就是最佳解决方案。当然用map嵌套UL也是可以的，不过显然现在UL的语意就不是那么重要了。提醒大家的是map里面必须嵌套一层块级元素，因为map本身不具有此属性。

详细资料：http://www.w3.org/TR/REC-html40/struct/objects.html#adef-usemap
附：W3C官网；http://www.w3.org/

]]> http://blog.owncsser.com/map-nav/feed/ 5