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

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

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

王开放提交的作业

<!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>

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

Trackback URI | Comments RSS

CSSer课堂