表现与结构分离之好友列表操作(答案)|CSSer课堂

表现与结构分离之好友列表操作(答案)

九月 11th, 2009 by San in User Experience, Web Standard |

上篇博客出题《深刻理解表现与结构分离之好友列表操作》，希望能对弟子们有一个考核，看参差不齐的技术水平到底问题再那里？或者这只是我单方面的意愿罢了，截止我发这篇博客开始，还没有一份卷子，更别说是否合格。
废话不多说，看Demo例子就是：

<!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>Friend list</title> <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script> <style type="text/css"> body{ margin:0; padding:20px; } .firends *{ font: normal 12px/1.2 Tahoma; margin:0; padding:0; list-style:none; } .firends{ width:380px; height:190px; background:#f7f7f7; border:solid 1px #d6d6d6; } .friend-list{ position:relative; width:100%; height:100%; float:left; overflow:auto; } .friend-list li{ text-align:center; float:left; width:20%; *margin-right:-1%; padding-top:7px; overflow:hidden; } .friend-list li div{ margin:0 auto; width:64px; height:85px; cursor: default; position:relative; } .friend-list li div strong{ display:block; line-height:22px; color:#333; } .friend-list li img{ margin-top:4px; padding:2px; border:solid 1px #ddd; } .friend-list .listOver{ background:url(http://blog.owncsser.com/wp-content/uploads/2009/09/bg_swich.gif) center top no-repeat; } .friend-list .listOver img{ background:#fff; border:solid 1px #47991f; } .friend-list .listSelect{ background:url(http://blog.owncsser.com/wp-content/uploads/2009/09/bg_swich.gif) center -86px no-repeat; } .friend-list .listSelect img{ background:#6bb324; border:solid 1px #96cc29; } .friend-list .listSelect strong{ color:#fff; } .friend-list .listSelect em{ position:absolute; top:44px; left:7px; width:13px; height:13px; background:url(http://blog.owncsser.com/wp-content/uploads/2009/09/bg_swich.gif) left -172px no-repeat; } </style> </head> <body> <div class="firends"> <ol class="friend-list"> <li> <div><img src="http://blog.owncsser.com/wp-content/uploads/2009/09/susan.gif" alt="susan" width="50" height="50" /><strong>susan</strong></div> </li> <li> <div><img src="http://blog.owncsser.com/wp-content/uploads/2009/09/susan.gif" alt="susan" width="50" height="50" /><strong>susan</strong></div> </li> <li> <div><img src="http://blog.owncsser.com/wp-content/uploads/2009/09/susan.gif" alt="susan" width="50" height="50" /><strong>susan</strong></div> </li> <li> <div><img src="http://blog.owncsser.com/wp-content/uploads/2009/09/susan.gif" alt="susan" width="50" height="50" /><strong>susan</strong></div> </li> <li> <div><img src="http://blog.owncsser.com/wp-content/uploads/2009/09/susan.gif" alt="susan" width="50" height="50" /><strong>susan</strong></div> </li> <li> <div><img src="http://blog.owncsser.com/wp-content/uploads/2009/09/susan.gif" alt="susan" width="50" height="50" /><strong>susan</strong></div> </li> <li> <div><img src="http://blog.owncsser.com/wp-content/uploads/2009/09/susan.gif" alt="susan" width="50" height="50" /><strong>susan</strong></div> </li> <li> <div><img src="http://blog.owncsser.com/wp-content/uploads/2009/09/susan.gif" alt="susan" width="50" height="50" /><strong>susan</strong></div> </li> <li> <div><img src="http://blog.owncsser.com/wp-content/uploads/2009/09/susan.gif" alt="susan" width="50" height="50" /><strong>susan</strong></div> </li> <li> <div><img src="http://blog.owncsser.com/wp-content/uploads/2009/09/susan.gif" alt="susan" width="50" height="50" /><strong>susan</strong></div> </li> <li> <div><img src="http://blog.owncsser.com/wp-content/uploads/2009/09/susan.gif" alt="susan" width="50" height="50" /><strong>susan</strong></div> </li> <li> <div><img src="http://blog.owncsser.com/wp-content/uploads/2009/09/susan.gif" alt="susan" width="50" height="50" /><strong>susan</strong></div> </li> <li> <div><img src="http://blog.owncsser.com/wp-content/uploads/2009/09/susan.gif" alt="susan" width="50" height="50" /><strong>susan</strong></div> </li> <li> <div><img src="http://blog.owncsser.com/wp-content/uploads/2009/09/susan.gif" alt="susan" width="50" height="50" /><strong>susan</strong></div> </li> <li> <div><img src="http://blog.owncsser.com/wp-content/uploads/2009/09/susan.gif" alt="susan" width="50" height="50" /><strong>susan</strong></div> </li> </ol> </div> <script type="text/javascript"> $(function(){ $(".friend-list li div").each(function(){ $(this).hover(function(){ $(this).addClass("listOver"); },function(){ $(this).removeClass("listOver"); }); $(this).toggle(function(){ $(this).addClass("listSelect").append("<em></em>")},function(){$(this).removeClass("listSelect").find("em").remove() }) }); }) </script> </body> </html>

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

以上内容中鼠标的浮动主要通过JQ类库添加class（addClass）和移除class操作，选中使用JQ切换toggle并添加/删除em标签来实现。

制作的思路是，基本样式控制布局（结构），然后利用js添加修饰元素（表现）。

通俗讲法：用脚本将衣服穿在裸体的人身上。，暂且可以这样理解表现与结构。
网页是否漂亮，就看你这个前端的设计师给他穿什么样的衣服！

Tags: Web Standard, 前端设计师, 好友列表, 结构, 表现

Trackback URI | Comments RSS

CSSer课堂