设置字体: 小中大

CSS框架

CSS框架好处：

1、开发效率的提高。
如果你是一个企业建站的前端开发，相信在大部分时间里进行着同类站点的代码工作。定义好的框架可以大大提高你的工作效率，避免一些常见的错误。如果你的工作是按件计费的，你的报酬一定会比别人多。

2、规范代码命名。
在多个站点中你可能会用到一些同样的CLASS或ID。如果你有一套完善的css框架，很快你就能对你的每一个站点的代码进行通读。不用浪费时间在代码的阅读上。

3、更好的团队合作
有些公司会将一些稍大的站点的前端代码分成若干子项目。有过此类经验的朋友应该对这种开发方式深感郁闷，要注意公用css，还有注意相互之间的代码配合。久而久之，废弃代码越来越多，互相之间也难以阅读。如果建立好合适的CSS框架，大家可以减少很多不必要的错误，提升产品质量和工作效率。
Show more »

十二月 14th, 2009 in (x)Html/Css | tags: css, 框架, 模块化, 重设 | 949 次浏览 | 5 Comments

JQ模块库09.12.08

本文章收藏综合各种流行的JQ特效，以标准化，模块化，语义化为基础达到结构，表现，行为完美分离。

< !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>HeMin JQ模块库 09.12.8 （www.hemin.cn/blog）</title> <link rel="stylesheet" href="http://www.hemin.cn/jq/styles/main.css" type="text/css" /> <link rel="stylesheet" href="http://www.hemin.cn/jq/styles/skin/skin_3.css" type="text/css" id="cssfile" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>  <script src="http://www.hemin.cn/jq/scripts/jquery.cookie.js" type="text/javascript">//cookie插件</script> <script src="http://www.hemin.cn/jq/scripts/jcarousellite.js" type="text/javascript">//jcarousellite插件实现图片无缝滚动</script> <script src="http://www.hemin.cn/jq/scripts/jquery.jqzoom.js" type="text/javascript">//jqzoom插件实现放大图片</script> <script src="http://www.hemin.cn/jq/scripts/jquery.thickbox.js" type="text/javascript">//thickbox插件弹出放大图片</script> <script src="http://www.hemin.cn/jq/scripts/jquery.progression.js" type="text/javascript">//progression插件</script> <script src="http://www.hemin.cn/jq/scripts/jquery.pstrength-min.1.2.js" type="text/javascript">//pstrength插件</script> <script src="http://www.hemin.cn/jq/scripts/jquery.soChange.js" type="text/javascript">//soChange插件</script> <script src="http://www.hemin.cn/jq/scripts/tipswindown.js" type="text/javascript">//tipswindown插件</script> <link rel="stylesheet" href="http://www.hemin.cn/jq/styles/tipswindown.css" type="text/css" /> <link rel="stylesheet" href="http://www.hemin.cn/jq/styles/thickbox.css" type="text/css" /> <script src="http://www.hemin.cn/jq/scripts/jq-main.js" type="text/javascript"></script> </head> <body> <div id="box">以标准化，模块化，语义化为基础达到结构，表现，行为完美分离。<span class="close">X</span></div> <div id="warp"> <div id="header"> <a href="#" class="logo"title="HeMin JQ模块库">HeMin JQ模块库 09.12.8</a> <ul id="skin"> <li id="skin_0" title="蓝色">蓝色</li> <li id="skin_1" title="紫色">紫色</li> <li id="skin_2" title="红色">红色</li> <li id="skin_3" title="天蓝色" class="selected" >天蓝色</li> <li id="skin_4" title="橙色">橙色</li> <li id="skin_5" title="淡绿色">淡绿色</li> </ul> </div> <div id="navigation" class="nav"> <ul> <li><a href="#">HeMin-01</a></li> <li><a href="#">HeMin-02</a> <ul> <li><a href="#">HeMin-02-01</a></li> <li><a href="#">HeMin-02-02</a></li> <li><a href="#">HeMin-02-03</a></li> </ul> </li> <li><a href="#">HeMin-03</a> <ul> <li><a href="#">HeMin-03-01</a></li> <li><a href="#">HeMin-03-02</a></li> </ul> </li> <li><a href="#">HeMin-04</a> <ul> <li><a href="#">HeMin-04-01</a></li> <li><a href="#">HeMin-04-02</a></li> <li><a href="#">HeMin-04-03</a></li> <li><a href="#">HeMin-04-04</a></li> </ul> </li> <li><a href="#">HeMin-05</a></li> </ul> </div> <div id="main"> <div id="notice"> <ul class="scroll-container"> <li><a href="#" class="tooltip" title="HeMin-01">1.HeMin-01111111111111111111111</a></li> <li><a href="#" class="tooltip" title="HeMin-02">2.HeMin-02222222222222222222222</a></li> <li><a href="#" class="tooltip" title="HeMin-03">3.HeMin-03333333333333333333333</a></li> <li><a href="#" class="tooltip" title="HeMin-04">4.HeMin-04444444444444444444444</a></li> <li><a href="#" class="tooltip" title="HeMin-05">5.HeMin-05555555555555555555555</a></li> <li><a href="#" class="tooltip" title="HeMin-06">6.HeMin-06666666666666666666666</a></li> <li><a href="#" class="tooltip" title="HeMin-07">7.HeMin-07777777777777777777777</a></li> <li><a href="#" class="tooltip" title="HeMin-08">8.HeMin-08888888888888888888888</a></li> </ul> </div> <div class="part_l"> <div id="news"> <h3>新闻从上滚动</h3> <div class="scrollNews"> <ul> <li><a href="#" class="tooltip" title="HeMin-01">1.HeMin-01111111111111111111111</a></li> <li><a href="#" class="tooltip" title="HeMin-02">2.HeMin-02222222222222222222222</a></li> <li><a href="#" class="tooltip" title="HeMin-03">3.HeMin-03333333333333333333333</a></li> <li><a href="#" class="tooltip" title="HeMin-04">4.HeMin-04444444444444444444444</a></li> <li><a href="#" class="tooltip" title="HeMin-05">5.HeMin-05555555555555555555555</a></li> <li><a href="#" class="tooltip" title="HeMin-06">6.HeMin-06666666666666666666666</a></li> <li><a href="#" class="tooltip" title="HeMin-07">7.HeMin-07777777777777777777777</a></li> <li><a href="#" class="tooltip" title="HeMin-08">8.HeMin-08888888888888888888888</a></li> </ul> </div> <div class="module_up_down" ><span>动画式收缩展开</span></div> </div> <div id="procatalog"> <h3>分类树展开和关闭</h3> <ul class="m-treeview"> <li class="m-expanded"> <span>父栏目1</span> <ul class="c-treeview"> <li>子栏目1</li> <li>子栏目2</li> </ul> </li> <li class="m-expanded"> <span>父栏目2</span> <ul class="c-treeview"> <li>子栏目1</li> <li>子栏目2</li> </ul> </li> <li class="m-expanded"> <span>父栏目3</span> <ul class="c-treeview"> <li>子栏目1</li> <li>子栏目2</li> </ul> </li> </ul> <div class="module_up_down" ><span>动画式收缩展开</span></div> </div> <div id="tab"> <h3>选项卡</h3> <div class="content"> <div class="tab_menu"> <ul> <li class="selected">HeMin01</li> <li>HeMin02</li> <li>HeMin03</li> </ul> </div> <div class="tab_box"> <div class="tab-content"> 111111111111111111111111111 </div> <div class="tab-content hide"> 222222222222222222222222222 </div> <div class="tab-content hide"> 333333333333333333333333333 </div> </div> </div> <div class="module_up_down" ><span>收缩</span></div> </div> <div id="magnifier"> <h3>放大镜</h3> <div class="jqzoom"><img src="http://www.hemin.cn/jq/images/pro_img/blue_one_small.jpg" class="fs" alt="" jqimg="http://www.hemin.cn/jq/images/blue_one_big.jpg" id="bigImg"/></div> <span> <a href="http://www.hemin.cn/jq/images/pro_img/blue_one_big.jpg" id="thickImg" title="介绍文字" class="thickbox"> <img alt="点击看大图" src="http://www.hemin.cn/jq/images/look.gif" /> </a> </span> </div> <div id="switch_photo"> <h3>小图切换大图</h3> <div class="big_img"> <img src="http://www.hemin.cn/jq/images/pro_img/blue_one_small.jpg" height="300" width="298" alt="" /> </div> <ul class="imgList"> <li class="img01"><img src="http://www.hemin.cn/jq/images/pro_img/blue_one.jpg" alt="" /></li> <li class="img02"><img src="http://www.hemin.cn/jq/images/pro_img/green_one.jpg" alt="" /></li> <li class="img03"><img src="http://www.hemin.cn/jq/images/pro_img/yellow_one.jpg" alt="" /></li> <li class="img04"><img src="http://www.hemin.cn/jq/images/pro_img/green_one.jpg" alt="" /></li> </ul> </div> <div id="MultiSelects"> <h3>MultiSelects(左右选框)</h3> <div class="MultiSelects-content"> <table width="298" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="29"> <input type="button" name="s1up" id="s1up" value="↑" /><br /> <input type="button" name="s1down" id="s1down" value="↓" /></td> <td width="100"><select name="s1" size="10" multiple="multiple" id="s1" style=" width:100px;"> <option value="opt01">option01</option> <option value="opt02">option02</option> <option value="opt03">option03</option> <option value="opt04">option04</option> <option value="opt05">option05</option> <option value="opt06">option06</option> <option value="opt07">option07</option> <option value="opt08">option08</option> <option value="opt09">option09</option> <option value="opt10">option10</option> </select></td> <td width="37" align="center"><input type="button" name="addall" id="addall" value=">|" /><br /><input type="button" name="add" id="add" value=">>" /><br /><input type="button" name="remove" id="remove" value="<<" /><br /><input type="button" name="removeall" id="removeall" value="|<" /></td> <td width="100"><select name="s2" size="10" multiple="multiple" id="s2" style=" width:100px;"> </select></td> <td width="119"> <input type="button" name="s2up" id="s2up" value="↑" /><br /> <input type="button" name="s2down" id="s2down" value="↓" /></td> </tr> </table> </div> <div class="module_up_down" ><span>收缩</span></div> </div> <div id="progress-bar"> <h3>进程条</h3> <div class="boxed"> <div class="right"> normal: <div class="progressbar_nojs">50 %</div> </div> <div class="left"> jquery demo:<br /> <span id="rain">50</span> %<div class="progressbar" id="progress-1">50 %</div> Value : <input type="text" id="progress-current" value="50" size="5" /> <input type="button" value="edit" id="progress-button" /> <span>20 %</span><div class="progressbartext" >20 %</div> </div> </div> <div class="module_up_down" ><span>收缩</span></div> </div> <div id="password-length"> <h3>密码长度提示</h3> <div class="password-content"> <strong>密码：</strong><input class="password" type="password" name="Password" size="20"/> </div> <div class="module_up_down" ><span>收缩</span></div> </div> <div id="container"> <h3>TipsWindown 1.0弹出层</h3> <div class="content"> <ol> <li> 弹出文本信息提示： <br /> <blockquote>tipsWindown("提示","text:提示信息内容","250","150","true","","true","msg")</blockquote> <button id="text1">点击我弹出提示</button> </li> <li> 弹出页面中的某个ID的html： <br /> <blockquote>tipsWindown("标题","id:testID","300","200","true","","true","id")</blockquote> <button id="id1">点击我弹出提示</button> <div id="testID" style="display: none"> <p>我是测试ID里的内容</p> <br /> 我换行了... </div> </li> <li> 弹出图片： <br /> <blockquote>tipsWindown("图片","img:图片路径","250","150","true","","true","img")</blockquote> <button id="img1">点击我弹出提示</button> </li> <li> get加载一个.html文件（也可以是.php/.asp?id=4之类的）： <br /> <blockquote>tipsWindown("标题","url:get?test.html","250","150","true","","true","text"); </blockquote> <button id="url1">点击我弹出提示</button> </li> <li> 加载一个页面到框架显示：<br /> <blockquote>tipsWindown("标题","iframe:http://hemin.cn","900","580","true","","true","leotheme"); </blockquote> <button id="iframe1">点击我弹出提示</button> </li> <li> 弹出一个不能拖动且没有遮罩背景的文本信息层： <br /> <blockquote>tipsWindown("提示","text:提示信息内容","250","150","false","","false","msg")</blockquote> <button id="text2">点击我弹出提示</button> </li> <li> 弹出一个不能拖动，三秒钟自动关闭的层： <br /> <blockquote>tipsWindown("提示","text:提示信息内容","250","150","false","3000","true","msg")</blockquote> <button id="text3">点击我弹出提示</button> </li> </ol> </div> <div class="module_up_down" ><span>收缩</span></div> </div> </div> <div class="part_r"> <div id="pro-list"> <h3>新款上市模块横向滚动</h3> <div class="pro-content"> <ul> <li> <a href="#"><img src="http://www.hemin.cn/jq/images/ad/1.jpg" alt="" height="124" width="124" /></a> <a href="#" class="title">img01</a> </li> <li> <a href="#"><img src="http://www.hemin.cn/jq/images/ad/2.jpg" alt="" height="124" width="124" /></a> <a href="#" class="title">img02</a> </li> <li> <a href="#"><img src="http://www.hemin.cn/jq/images/ad/3.jpg" alt="" height="124" width="124" /></a> <a href="#" class="title">img03</a> </li> <li> <a href="#"><img src="http://www.hemin.cn/jq/images/ad/4.jpg" alt="" height="124" width="124" /></a> <a href="#" class="title">img04</a> </li> <li> <a href="#"><img src="http://www.hemin.cn/jq/images/ad/1.jpg" alt="" height="124" width="124" /></a> <a href="#" class="title">img01</a> </li> <li> <a href="#"><img src="http://www.hemin.cn/jq/images/ad/2.jpg" alt="" height="124" width="124" /></a> <a href="#" class="title">img02</a> </li> <li> <a href="#"><img src="http://www.hemin.cn/jq/images/ad/3.jpg" alt="" height="124" width="124" /></a> <a href="#" class="title">img03</a> </li> <li> <a href="#"><img src="http://www.hemin.cn/jq/images/ad/4.jpg" alt="" height="124" width="124" /></a> <a href="#" class="title">img04</a> </li> <li> <a href="#"><img src="http://www.hemin.cn/jq/images/ad/1.jpg" alt="" height="124" width="124" /></a> <a href="#" class="title">img01</a> </li> <li> <a href="#"><img src="http://www.hemin.cn/jq/images/ad/2.jpg" alt="" height="124" width="124" /></a> <a href="#" class="title">img02</a> </li> <li> <a href="#"><img src="http://www.hemin.cn/jq/images/ad/3.jpg" alt="" height="124" width="124" /></a> <a href="#" class="title">img03</a> </li> <li> <a href="#"><img src="http://www.hemin.cn/jq/images/ad/4.jpg" alt="" height="124" width="124" /></a> <a href="#" class="title">img04</a> </li> </ul> </div> <div class="module_left_right"><span class="goLeft">左移动</span><span class="goRight">右移动</span></div> </div> <div id="change"> <h3>1.默认最简易模式</h3> <div class="changeBox_a1" id="change_1"> <a href="#1" class="a_bigImg"><img src="http://www.hemin.cn/jq/images/ad/1.jpg" width="672" height="250" alt="" /></a> <a href="#2" class="a_bigImg"><img src="http://www.hemin.cn/jq/images/ad/2.jpg" width="672" height="250" alt="" /></a> <a href="#3" class="a_bigImg"><img src="http://www.hemin.cn/jq/images/ad/3.jpg" width="672" height="250" alt="" /></a> <a href="#4" class="a_bigImg"><img src="http://www.hemin.cn/jq/images/ad/4.jpg" width="672" height="250" alt="" /></a> </div> </div> <div id="change"> <h3>2.带前后按钮</h3> <div class="changeBox_a1" id="change_2"> <a href="#1" class="a_bigImg"><img src="http://www.hemin.cn/jq/images/ad/1.jpg" width="672" height="250" alt="" /></a> <a href="#2" class="a_bigImg"><img src="http://www.hemin.cn/jq/images/ad/2.jpg" width="672" height="250" alt="" /></a> <a href="#3" class="a_bigImg"><img src="http://www.hemin.cn/jq/images/ad/3.jpg" width="672" height="250" alt="" /></a> <a href="#4" class="a_bigImg"><img src="http://www.hemin.cn/jq/images/ad/4.jpg" width="672" height="250" alt="" /></a> <a href="#" class="a_last" title="上一个">上一个</a><a href="#" class="a_next" title="下一个">下一个</a> </div> </div> <div id="change"> <h3>3.数字导航切换及自定义当前数字的class</h3> <div class="changeBox_a1" id="change_3"> <a href="#1" class="a_bigImg"><img src="http://www.hemin.cn/jq/images/ad/1.jpg" width="672" height="250" alt="" /></a> <a href="#2" class="a_bigImg"><img src="http://www.hemin.cn/jq/images/ad/2.jpg" width="672" height="250" alt="" /></a> <a href="#3" class="a_bigImg"><img src="http://www.hemin.cn/jq/images/ad/3.jpg" width="672" height="250" alt="" /></a> <a href="#4" class="a_bigImg"><img src="http://www.hemin.cn/jq/images/ad/4.jpg" width="672" height="250" alt="" /></a> <ul class="ul_change_a2"> <li><span>1</span></li> <li><span>2</span></li> <li><span>3</span></li> <li><span>4</span></li> </ul> </div> </div> <div id="change" class="change-ico-title"> <h3>4.切换对象为其他，这里为包含图片和标题的层</h3> <div class="changeBox_a1" id="change_32"> <div class="changeDiv"> <h4><a href="#">图片111111111说明文字，文字标题都绝对定位在div.changeDiv这个层内</a></h4> <a href="#1"><img src="http://www.hemin.cn/jq/images/ad/1.jpg" width="672" height="250" alt="" /></a> </div> <div class="changeDiv"> <h4><a href="#">图片222222222说明文字，文字标题都绝对定位在div.changeDiv这个层内</a></h4> <a href="#2"><img src="http://www.hemin.cn/jq/images/ad/2.jpg" width="672" height="250" alt="" /></a> </div> <div class="changeDiv"> <h4><a href="#">图片333333333说明文字，文字标题都绝对定位在div.changeDiv这个层内</a></h4> <a href="#3"><img src="http://www.hemin.cn/jq/images/ad/3.jpg" width="672" height="250" alt="" /></a> </div> <div class="changeDiv"> <h4><a href="#">图片444444444说明文字，文字标题都绝对定位在div.changeDiv这个层内</a></h4> <a href="#4"><img src="http://www.hemin.cn/jq/images/ad/4.jpg" width="672" height="250" alt="" /></a> </div> <ul class="ul_change_a2"> <li><span>1</span></li> <li><span>2</span></li> <li><span>3</span></li> <li><span>4</span></li> </ul> </div> </div> <div id="change"> <h3>5.平滑过渡间歇时间为0</h3> <div class="changeBox_a1" id="change_33"> <a href="#1" class="a_bigImg"><img src="http://www.hemin.cn/jq/images/ad/1.jpg" width="672" height="250" alt="" /></a> <a href="#2" class="a_bigImg"><img src="http://www.hemin.cn/jq/images/ad/2.jpg" width="672" height="250" alt="" /></a> <a href="#3" class="a_bigImg"><img src="http://www.hemin.cn/jq/images/ad/3.jpg" width="672" height="250" alt="" /></a> <a href="#4" class="a_bigImg"><img src="http://www.hemin.cn/jq/images/ad/4.jpg" width="672" height="250" alt="" /></a> <a href="#" class="a_last" title="上一个">上一个</a><a href="#" class="a_next" title="下一个">下一个</a> <ul class="ul_change_a1"> <li><a href="#"><img src="http://www.hemin.cn/jq/images/ad/1_s.jpg" width="67" height="40" alt="" /></a></li> <li><a href="#"><img src="http://www.hemin.cn/jq/images/ad/2_s.jpg" width="67" height="40" alt="" /></a></li> <li><a href="#"><img src="http://www.hemin.cn/jq/images/ad/3_s.jpg" width="67" height="40" alt="" /></a></li> <li><a href="#"><img src="http://www.hemin.cn/jq/images/ad/4_s.jpg" width="67" height="40" alt="" /></a></li> </ul> </div> </div> <div id="change" class="change-ico-but"> <h3>6.带导航图标及按钮</h3> <div class="changeBox_a1" id="change_4"> <a href="#1" class="a_bigImg"><img src="http://www.hemin.cn/jq/images/ad/1.jpg" width="672" height="250" alt="" /></a> <a href="#2" class="a_bigImg"><img src="http://www.hemin.cn/jq/images/ad/2.jpg" width="672" height="250" alt="" /></a> <a href="#3" class="a_bigImg"><img src="http://www.hemin.cn/jq/images/ad/3.jpg" width="672" height="250" alt="" /></a> <a href="#4" class="a_bigImg"><img src="http://www.hemin.cn/jq/images/ad/4.jpg" width="672" height="250" alt="" /></a> <a href="#" class="a_last" title="上一个">上一个</a><a href="#" class="a_next" title="下一个">下一个</a> <ul class="ul_change_a1"> <li><a href="#"><img src="http://www.hemin.cn/jq/images/ad/1_s.jpg" width="67" height="40" alt="" /></a></li> <li><a href="#"><img src="http://www.hemin.cn/jq/images/ad/2_s.jpg" width="67" height="40" alt="" /></a></li> <li><a href="#"><img src="http://www.hemin.cn/jq/images/ad/3_s.jpg" width="67" height="40" alt="" /></a></li> <li><a href="#"><img src="http://www.hemin.cn/jq/images/ad/4_s.jpg" width="67" height="40" alt="" /></a></li> </ul> </div> </div> <div id="change"> <h3>7.不自动切换</h3> <div class="changeBox_a1" id="change_5"> <a href="#1" class="a_bigImg"><img src="http://www.hemin.cn/jq/images/ad/1.jpg" width="672" height="250" alt="" /></a> <a href="#2" class="a_bigImg"><img src="http://www.hemin.cn/jq/images/ad/2.jpg" width="672" height="250" alt="" /></a> <a href="#3" class="a_bigImg"><img src="http://www.hemin.cn/jq/images/ad/3.jpg" width="672" height="250" alt="" /></a> <a href="#4" class="a_bigImg"><img src="http://www.hemin.cn/jq/images/ad/4.jpg" width="672" height="250" alt="" /></a> <a href="#" class="a_last" title="上一个">上一个</a><a href="#" class="a_next" title="下一个">下一个</a> <ul class="ul_change_a1"> <li><a href="#"><img src="http://www.hemin.cn/jq/images/ad/1_s.jpg" width="67" height="40" alt="" /></a></li> <li><a href="#"><img src="http://www.hemin.cn/jq/images/ad/2_s.jpg" width="67" height="40" alt="" /></a></li> <li><a href="#"><img src="http://www.hemin.cn/jq/images/ad/3_s.jpg" width="67" height="40" alt="" /></a></li> <li><a href="#"><img src="http://www.hemin.cn/jq/images/ad/4_s.jpg" width="67" height="40" alt="" /></a></li> </ul> </div> </div> </div> </div> <div id="f_links_box" class="posr"> <a href="#" id="f_left"></a><a href="#" id="f_right"></a> <div id="f_links_list"> <ul> <li><img src="http://www.hemin.cn/jq/images/nophoto.gif" width="88" height="31" alt="logo"/></li> <li><img src="http://www.hemin.cn/jq/images/nophoto.gif" width="88" height="31" alt="logo" /></li> <li><img src="http://www.hemin.cn/jq/images/nophoto.gif" width="88" height="31" alt="logo" /></li> <li><img src="http://www.hemin.cn/jq/images/nophoto.gif" width="88" height="31" alt="logo" /></li> <li><img src="http://www.hemin.cn/jq/images/nophoto.gif" width="88" height="31" alt="logo" /></li> <li><img src="http://www.hemin.cn/jq/images/nophoto.gif" width="88" height="31" alt="logo" /></li> <li><img src="http://www.hemin.cn/jq/images/nophoto.gif" width="88" height="31" alt="logo" /></li> <li><img src="http://www.hemin.cn/jq/images/nophoto.gif" width="88" height="31" alt="logo" /></li> <li><img src="http://www.hemin.cn/jq/images/nophoto.gif" width="88" height="31" alt="logo" /></li> <li><img src="http://www.hemin.cn/jq/images/nophoto.gif" width="88" height="31" alt="logo" /></li> <li><img src="http://www.hemin.cn/jq/images/nophoto.gif" width="88" height="31" alt="logo" /></li> <li><img src="http://www.hemin.cn/jq/images/nophoto.gif" width="88" height="31" alt="logo" /></li> <li><img src="http://www.hemin.cn/jq/images/nophoto.gif" width="88" height="31" alt="logo" /></li> <li><img src="http://www.hemin.cn/jq/images/nophoto.gif" width="88" height="31" alt="logo" /></li> <li><img src="http://www.hemin.cn/jq/images/nophoto.gif" width="88" height="31" alt="logo" /></li> </ul> </div> </div> <div id="footer"> <p>JQ模块库版权所有提供广大JQ学习爱好者</p> </div> </div> </body> </html>

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

十二月 8th, 2009 in JS/JQuery, 原创作品 | tags: JQ, 库, 模块化, 语义化 | 1,893 次浏览 | 35 Comments

XHTML模块化布局

　　模块化是指解决一个复杂问题时自顶向下逐层把软件系统划分成若干模块的过程。每个模块完成一个特定的子功能，所有的模块按某种方法组装起来，成为一个整体，完成整个系统所要求的功能。
　　模块具有以下几种基本属性：接口、功能、逻辑、状态，功能、状态与接口反映模块的外部特性，逻辑反映它的内部特性。
　　在软件的体系结构中，模块是可组合、分解和更换的单元。
——————————————————————————————————————————–
下面是：XHTML模块化布局
Show more »

八月 27th, 2009 in (x)Html/Css | tags: 技巧, 模块化, 规范 | 926 次浏览 | 16 Comments

此页面上的内容需要较新版本的 Adobe Flash Player。

He Min Blog 每一步细节注定你将来的命运。

CSS框架

CSS框架好处：

JQ模块库09.12.08

XHTML模块化布局

Webmaster

Category

Tag Cloud

Recent Article

Random Pages

Recent Comments

Gallery

Pigeonhole

Links

Tunnel

Translation

访问者分析