Permalink
Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
893 lines (860 sloc) 52.2 KB
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>果壳全局UI模块</title>
<link rel="stylesheet" href="skin/h.css" />
</head>
<body>
<div class="container">
<div class="guokr" id="guokr"></div>
<div class="gheader-wp" id="gheader1">
<div class="gheader-wp-b">
<div class="gheader">
<a id="guokrLogo" class="gheader-logo" title="果壳 科技有意思">果壳网</a>
<ul class="gheader-nav">
<li><a href="/" class="current">首页</a></li>
<li><a href="/example/">JS组件<sup class="new">new</sup></a></li>
<li id="mMenu" class="m_menu">
<a class="m_menu-title" href="/minisite/">主题站<b><s></s></b></a>
<div>
<ul>
<li>
<a href="/site/diy/">
<img src="http://www.guokr.com/skin/mini_logo/diy_s.jpg" width="20" height="20" alt="DIY"/>DIY
</a>
</li>
<li><a href="/site/fact/"><img src="http://www.guokr.com/skin/mini_logo/fact_s.jpg" width="20" height="20" alt="谣言粉碎机"/>谣言粉碎机</a></li>
<li><a href="/site/psybst/"><img src="http://www.guokr.com/skin/mini_logo/psybst_s.jpg" width="20" height="20" alt="心事鉴定组"/>心事鉴定组</a></li>
<li><a href="/site/gizfan/"><img src="http://www.guokr.com/skin/mini_logo/gizfan_s.jpg" width="20" height="20" alt="趣科技"/>趣科技</a></li>
<li><a href="/site/health/"><img src="http://www.guokr.com/skin/mini_logo/health_s.jpg" width="20" height="20" alt="健康朝九晚五"/>健康朝九晚五</a></li>
<li><a href="/site/logos/"><img src="http://www.guokr.com/skin/mini_logo/logos_s.jpg" width="20" height="20" alt="死理性派"/>死理性派</a></li>
<li><a href="/site/natural/"><img src="http://www.guokr.com/skin/mini_logo/natural_s.jpg" width="20" height="20" alt="自然控"/>自然控</a></li>
<li><a href="/site/crime/"><img src="http://www.guokr.com/skin/mini_logo/sciblog_s.jpg" width="20" height="20" alt="谋杀 现场 法医"/>谋杀 现场 法医</a></li>
<li><a href="/site/sciblog/"><img src="http://www.guokr.com/skin/mini_logo/sciblog_s.jpg" width="20" height="20" alt="科技名博"/>科技名博</a></li>
<li><a href="/site/pet/"><img src="http://www.guokr.com/skin/mini_logo/pet_s.jpg" width="20" height="20" alt="爱宠"/>爱宠</a></li>
<li><a href="/site/microsf/"><img src="http://www.guokr.com/skin/mini_logo/microsf_s.jpg" width="20" height="20" alt="微科幻"/>微科幻</a></li>
<li><a href="/site/sex/"><img src="http://www.guokr.com/skin/mini_logo/sex_s.jpg" width="20" height="20" alt="性 情"/>性 情</a></li>
<li><a href="/site/artsci/"><img src="http://www.guokr.com/skin/mini_logo/artsci_s.jpg" width="20" height="20" alt="文艺科学"/>文艺科学</a></li>
<li><a href="/site/digest/"><img src="http://www.guokr.com/skin/mini_logo/digest_s.jpg" width="20" height="20" alt="环球科技观光团"/>环球科技观光团</a></li>
<li><a href="/site/techb/"><img src="http://www.guokr.com/skin/mini_logo/techb_s.jpg" width="20" height="20" alt="科技与商业"/>科技与商业</a></li>
</ul>
</div>
</li>
<li><a href="/group/">小组</a></li>
<li><a href="/nuts/">果壳达人</a></li>
<li><a href="/ask/">问答</a></li>
</ul>
<div class="gheader-i">
<div class="gheader-i-b"></div>
<a id="sMenu" class="s_menu-title" href="/minisite/">
<img src="http://www.guokr.com/gkimage/rw/ck/5t/rwck5t.jpg" width="20" height="20" alt="敏明君" />
敏明君敏明君敏明君
<b><s></s></b>
</a>
<ul class="s_menu-block">
<li class="s_menu-block-f">
<a class="s_menu-title-hover" href="/minisite/"><img
src="http://www.guokr.com/gkimage/rw/ck/5t/rwck5t.jpg"
width="20" height="20" alt="敏明君"
/>敏明君敏明君敏明君<b><s></s></b></a>
</li>
<li><a href="#">个人主页</a></li>
<li><a href="#">设置</a></li>
<li><a href="#">退出</a></li>
</ul>
<a href="#" class="gheader-i-msg">站内信<sup>16</sup></a>
<div id="gheaderNotice" class="gheader-i-notice">
<a href="#" target="_blank">通知<sup>5</sup></a>
<div class="gheader-i-notice-block" id="noticeBlock">
<b><s></s></b>
<ul>
<li>
<p><a href="" target="_blank">12个人关注了你</a></p>
<a href="javascript: void 0;" class="icon-close">x</a>
</li>
<li>
<p><a href="" target="_blank">1条新增@提到你</a></p>
<a href="javascript: void 0;" class="icon-close">x</a>
</li>
<li>
<p>帖子<a href="" target="_blank">淘宝就是一家商业地...</a>有了新回复</p>
<a href="javascript: void 0;" class="icon-close">x</a>
</li>
<li>
<p>日志<a href="" target="_blank">明道一以人为中心的...</a>有了新回复</p>
<a href="javascript: void 0;" class="icon-close">x</a>
</li>
<li>
<p>你的问题<a href="" target="_blank">问答中,如何区别答案...</a>中的答案有了新评论</p>
<a href="javascript: void 0;" class="icon-close">x</a>
</li>
</ul>
<div class="gheader-i-notice-block-bottom">
<a href="javascript: void 0;" class="sw_btn close_all">知道了</a>
<a href="" class="more" target="_blank">全部&gt;&gt;</a>
</div>
</div>
</div>
</div>
<form id="search" class="search" method="get" action="/search/all/">
<p>
<input id="searchTxt" class="search-txt" type="text" name="wd" placeholder="寻找你喜欢的内容或人" value="">
<input class="search-bt" type="submit" value="搜索"/>
</p>
</form>
</div>
</div>
</div>
<div class="top-wp" id="top1">
<div class="top fix">
<div class="top-main">
<img src="http://www.guokr.com/gkimage/rg/y2/j9/rgy2j9.png" alt="" width="160" height="160" />
<div>
<h1 class="top-main-n1">
<a href="#">跨五岳而观云海</a>
</h1>
<p>人机交互学博士<a class="sai" target="_blank"
title="果壳达人" href="/nuts/">ψ</a></p>
<p class="top-main-info">
<span class="sex-w" title=""><b class="element-invisible">男</b></span>
北京-朝阳区
<span class="top-main-info-blog">博客:<a href="#">http://mzhou.me/</a></span>
</p>
<p>
怕累怕痛怕太肉麻,怕抑郁怕死~性格古怪,稳定爱好为做饭吃饭以及吐槽。在某不知名大学学习不靠谱心理学也不靠谱心理学也没不靠谱心理学也没没有定方向我只能说跟人格有关的我都只能拿到A-怕累怕痛怕太肉麻...
</p>
</div>
</div>
<div class="top-side">
<ul class="top-board">
<li>
<a href="#">粉丝</a>
<span>325</span>
</li>
<li>
<a href="#">文章</a>
<span>1246</span>
</li>
<li class="last">
<a href="#">其他</a>
<span>1231</span>
</li>
</ul>
</div>
<!--[if IE 6]><div></div><![endif]-->
<ul class="tabs">
<li>
<a href="#" class="current"><span>主页</span></a>
</li>
<li>
<a href="#">知识卡</a>
</li>
<li>
<a href="#">兴趣社</a>
</li>
<li>
<a href="#">关注</a>
</li>
<li>
<a href="#">动态</a>
</li>
<li>
<a href="#">日志</a>
</li>
</ul>
</div>
</div>
<div class="gheader-wp hide" id="gheader2">
<div class="gheader-wp-b">
<div class="gheader">
<a class="gheader-logo" title="果壳 科技有意思">果壳网</a>
<ul class="gheader-nav">
<li><a href="/" class="current">首页</a></li>
<li class="m_menu">
<a class="m_menu-title" href="/minisite/">主题站<b><s></s></b></a>
<div>
<ul>
<li>
<a href="/site/diy/">
<img src="http://www.guokr.com/skin/mini_logo/diy_s.jpg" width="20" height="20" alt="DIY"/>DIY
</a>
</li>
<li><a href="/site/fact/"><img src="http://www.guokr.com/skin/mini_logo/fact_s.jpg" width="20" height="20" alt="谣言粉碎机"/>谣言粉碎机</a></li>
<li><a href="/site/psybst/"><img src="http://www.guokr.com/skin/mini_logo/psybst_s.jpg" width="20" height="20" alt="心事鉴定组"/>心事鉴定组</a></li>
<li><a href="/site/gizfan/"><img src="http://www.guokr.com/skin/mini_logo/gizfan_s.jpg" width="20" height="20" alt="趣科技"/>趣科技</a></li>
<li><a href="/site/health/"><img src="http://www.guokr.com/skin/mini_logo/health_s.jpg" width="20" height="20" alt="健康朝九晚五"/>健康朝九晚五</a></li>
<li><a href="/site/logos/"><img src="http://www.guokr.com/skin/mini_logo/logos_s.jpg" width="20" height="20" alt="死理性派"/>死理性派</a></li>
<li><a href="/site/natural/"><img src="http://www.guokr.com/skin/mini_logo/natural_s.jpg" width="20" height="20" alt="自然控"/>自然控</a></li>
<li><a href="/site/crime/"><img src="http://www.guokr.com/skin/mini_logo/sciblog_s.jpg" width="20" height="20" alt="谋杀 现场 法医"/>谋杀 现场 法医</a></li>
<li><a href="/site/sciblog/"><img src="http://www.guokr.com/skin/mini_logo/sciblog_s.jpg" width="20" height="20" alt="科技名博"/>科技名博</a></li>
<li><a href="/site/pet/"><img src="http://www.guokr.com/skin/mini_logo/pet_s.jpg" width="20" height="20" alt="爱宠"/>爱宠</a></li>
<li><a href="/site/microsf/"><img src="http://www.guokr.com/skin/mini_logo/microsf_s.jpg" width="20" height="20" alt="微科幻"/>微科幻</a></li>
<li><a href="/site/sex/"><img src="http://www.guokr.com/skin/mini_logo/sex_s.jpg" width="20" height="20" alt="性 情"/>性 情</a></li>
<li><a href="/site/artsci/"><img src="http://www.guokr.com/skin/mini_logo/artsci_s.jpg" width="20" height="20" alt="文艺科学"/>文艺科学</a></li>
<li><a href="/site/digest/"><img src="http://www.guokr.com/skin/mini_logo/digest_s.jpg" width="20" height="20" alt="环球科技观光团"/>环球科技观光团</a></li>
<li><a href="/site/techb/"><img src="http://www.guokr.com/skin/mini_logo/techb_s.jpg" width="20" height="20" alt="科技与商业"/>科技与商业</a></li>
</ul>
</div>
</li>
<li><a href="/group/">小组</a></li>
<li><a href="/nuts/">果壳达人</a></li>
<li><a href="/ask/">问答</a></li>
</ul>
<div class="gheader-i">
<div class="gheader-i-b"></div>
<a href="#">登录</a><s class="gheader-i-sp">|</s><a href="#">注册</a>
</div>
<form id="search" class="search" method="get" action="/search/all/">
<p>
<input id="searchTxt" class="search-txt" type="text" name="wd" placeholder="寻找你喜欢的内容或人" value="">
<input class="search-bt" type="submit" value="搜索"/>
</p>
</form>
</div>
</div>
</div>
<div class="top-wp hide" id="top2">
<div class="top fix">
<div class="top-main">
<img src="http://www.guokr.com/skin/mini_logo/gizfan_b.jpg" alt="" width="110" height="90" />
<div>
<h1 class="top-main-n2">
<a href="#">趣科技小组</a>
<span>主题站</span>
</h1>
<p>
在这里关注最新鲜最有趣的科技资讯
最好玩最温暖的发明设计
</p>
</div>
</div>
</div>
</div>
<div class="wrap">
<div class="main">
<div class="main-title-b"><div class="main-title"><h2>loading 样式</h2></div></div>
<div class="fix">
<p class="loading"><img src="skin/imgs/loading.gif" alt="loading"/>加载中...</p>
</div>
<div class="main-title-b"><div class="main-title"><h2>多列菜单:</h2></div></div>
<div style="height:300px;width:100%;" class="fix">
<div class="m_menu hover">
<a class="m_menu-title" href="/minisite/">主题站<b><s></s></b></a>
<div>
<ul>
<li>
<a href="/site/diy/">
<img src="http://www.guokr.com/skin/mini_logo/diy_s.jpg" width="20" height="20" alt="DIY">DIY
</a>
</li>
<li><a href="/site/fact/"><img src="http://www.guokr.com/skin/mini_logo/fact_s.jpg" width="20" height="20" alt="谣言粉碎机">谣言粉碎机</a></li>
<li><a href="/site/psybst/"><img src="http://www.guokr.com/skin/mini_logo/psybst_s.jpg" width="20" height="20" alt="心事鉴定组">心事鉴定组</a></li>
<li><a href="/site/gizfan/"><img src="http://www.guokr.com/skin/mini_logo/gizfan_s.jpg" width="20" height="20" alt="趣科技">趣科技</a></li>
<li><a href="/site/health/"><img src="http://www.guokr.com/skin/mini_logo/health_s.jpg" width="20" height="20" alt="健康朝九晚五">健康朝九晚五</a></li>
<li><a href="/site/logos/"><img src="http://www.guokr.com/skin/mini_logo/logos_s.jpg" width="20" height="20" alt="死理性派">死理性派</a></li>
<li><a href="/site/natural/"><img src="http://www.guokr.com/skin/mini_logo/natural_s.jpg" width="20" height="20" alt="自然控">自然控</a></li>
<li><a href="/site/crime/"><img src="http://www.guokr.com/skin/mini_logo/sciblog_s.jpg" width="20" height="20" alt="谋杀 现场 法医">谋杀 现场 法医</a></li>
<li><a href="/site/sciblog/"><img src="http://www.guokr.com/skin/mini_logo/sciblog_s.jpg" width="20" height="20" alt="科技名博">科技名博</a></li>
<li><a href="/site/pet/"><img src="http://www.guokr.com/skin/mini_logo/pet_s.jpg" width="20" height="20" alt="爱宠">爱宠</a></li>
<li><a href="/site/microsf/"><img src="http://www.guokr.com/skin/mini_logo/microsf_s.jpg" width="20" height="20" alt="微科幻">微科幻</a></li>
<li><a href="/site/sex/"><img src="http://www.guokr.com/skin/mini_logo/sex_s.jpg" width="20" height="20" alt="性 情">性 情</a></li>
<li><a href="/site/artsci/"><img src="http://www.guokr.com/skin/mini_logo/artsci_s.jpg" width="20" height="20" alt="文艺科学">文艺科学</a></li>
<li><a href="/site/digest/"><img src="http://www.guokr.com/skin/mini_logo/digest_s.jpg" width="20" height="20" alt="环球科技观光团">环球科技观光团</a></li>
<li><a href="/site/techb/"><img src="http://www.guokr.com/skin/mini_logo/techb_s.jpg" width="20" height="20" alt="科技与商业">科技与商业</a></li>
</ul>
</div>
</div>
</div>
<div class="main-title-b"><div class="main-title"><h2>tab导航</h2></div></div>
<div class="fix" style="height: 100px;">
<ul class="tabs">
<li>
<a href="#" class="current"><span>主页</span></a>
</li>
<li>
<a href="#">知识卡</a>
</li>
<li>
<a href="#">兴趣社</a>
</li>
<li>
<a href="#">关注</a>
</li>
<li>
<a href="#">动态</a>
</li>
<li>
<a href="#">日志</a>
</li>
</ul>
</div>
<div class="main-title-b"><div class="main-title"><h2>category</h2></div></div>
<div class="fix" style="height: 100px;">
<div class="category">
<h2>我关注的</h2>
<ul>
<li><span>主题站</span></li>
<li><a href="/reader/posts/">小组</a></li>
<li><a href="/reader/blogs/">日志</a></li>
</ul>
</div>
<div class="category">
<ul>
<li><span>主题站</span></li>
<li><a href="/reader/posts/">小组</a></li>
<li><a href="/reader/blogs/">日志</a></li>
</ul>
</div>
<div class="main-title-line"></div>
</div>
<div class="main-title-b"><div class="main-title"><h2>标题列表</h2> </div> </div>
<div class="fix" style="width: 500px;">
<ul class="titles" style="width: 600px;">
<li class="titles-h">
<span class="titles-h-l">标&nbsp;&nbsp;题</span>
<span class="titles-h-r">回应</span>
<span class="titles-h-r">同问</span>
</li>
<li class="titles-hotest">
<h3><a href="/post/17881/" target="_blank">果壳大龄男女青年挂牌贴(83年前)</a></h3>
<span class="titles-r-grey">21232</span>
<span class="titles-r-green">4523213</span>
<p class="titles-b">
<span class="titles-b-l">来自:<a href="#" target="_blank">万有引力</a></span>
<span class="titles-b-r">最后回应:<a href="/i/1060209672/">敏明君</a>&nbsp;&nbsp;2011-07-20 14:03:10 </span>
</p>
</li>
<li class="titles-hotest">
<h3><a href="/post/17881/" target="_blank">果壳大龄男女青年挂牌贴(83年前)</a></h3>
<span class="titles-r-grey">2</span>
<span class="titles-r-green">3</span>
<p class="titles-b">
<span class="titles-b-l">来自:<a href="#" target="_blank">万有引力</a></span>
<span class="titles-b-r">最后回应:<a href="/i/1060209672/">敏明君</a>&nbsp;&nbsp;2011-07-20 14:03:10 </span>
</p>
</li>
<li class="titles-hotest">
<h3><a href="/post/17881/" target="_blank">果壳大龄男女青年挂牌贴(83年前)</a></h3>
<span class="titles-r-grey">25</span>
<span class="titles-r-green">380</span>
<p class="titles-b">
<span class="titles-b-l">来自:<a href="#" target="_blank">万有引力</a></span>
<span class="titles-b-r">最后回应:<a href="/i/1060209672/">敏明君</a>&nbsp;&nbsp;2011-07-20 14:03:10 </span>
</p>
</li>
<li class="titles-hotest">
<h3 class="titles-txt"><a href="/post/17857/" target="_blank">征友相亲贴(挂牌)</a></h3>
<span class="titles-r-grey">24</span>
<p class="titles-b">
<span class="titles-b-l">来自:<a href="#" target="_blank">万有引力</a></span>
<span class="titles-b-r">最后回应:<a href="/i/1060209672/">敏明君</a>&nbsp;&nbsp;2011-07-20 14:03:10 </span>
</p>
</li>
<li>
<h3 class="titles-txt"><a href="/post/62291/" target="_blank">问答区又有人开始来劲了啊</a></h3>
<span class="titles-r-grey">24</span>
<p class="titles-b">
<span class="titles-b-l">来自:<a href="#" target="_blank">万有引力</a></span>
<span class="titles-b-r">最后回应:<a href="/i/1060209672/">敏明君</a>&nbsp;&nbsp;2011-07-20 14:03:10 </span>
</p>
</li>
</ul>
</div>
<div class="main-title-b"><div class="main-title"><h2>按钮样式</h2></div></div>
<div class="fix" style="width: 500px;height:620px;">
<a href="javascript:void 0;" class="bg_btn">保存</a>&nbsp;&nbsp;
<input type="button" value="保存按钮" class="bg_btn"/>
94x32 没有disabled样式<br/><br/>
<a href="javascript:void 0;" class="sg_btn">登录</a> &nbsp;&nbsp;
<input type="button" value="按钮" class="sg_btn"/>
52x27 没有dsiabled样式<br/><br/>
<a href="javascript:void 0;" class="sg_btn-ext">
<!--[if lte IE 7]><b class="sg_btn-ext-b"></b><![endif]-->
可伸缩a标签
<!--[if lte IE 7]><b class="sg_btn-ext-a"></b><![endif]-->
</a> nx27 因为需要用到after和before伪元素,而input没有这两个伪元素,故只能用a标签 <br/><br/>
<a href="javascript:void 0;" class="bw_btn">保存</a>
&nbsp;&nbsp;<input type="button" class="bw_btn" disabled value="disabled"/>
94x32<br/><br/>
<a href="javascript:void 0;" class="bw_btn"><span class="bw_btn-msg">&nbsp;</span><span class="bw_btn-msg-w">站内信</span></a> 94x32<br/><br/>
<span class="bw_btn-disable">已关注|<a href="javascript:void 0;">取消</a></span> 94x32<br/><br/>
<a href="javascript:void 0;" class="mw_btn">立即注册</a>&nbsp;&nbsp;
<input type="button" value="注册按钮" class="mw_btn"/>
77x27<br/><br/>
<a href="javascript:void 0;" class="mw_btn-ext">
<!--[if lte IE 7]><b class="mw_btn-ext-b"></b><![endif]-->
可伸缩a标签
<!--[if lte IE 7]><b class="mw_btn-ext-a"></b><![endif]-->
</a> nx27 因为需要用到after和before伪元素,而input没有这两个伪元素,故只能用a标签 <br/><br/>
<a href="javascript:void 0;" class="sw_btn">关注</a>
&nbsp;&nbsp;<input type="button" class="sw_btn" disabled value="disabled"/>50x21<br/><br/>
<a href="javascript:void 0;" class="sw_btn-disable">取消</a> 50x21<br/><br/>
<a href="javascript:void 0;" class="sw_btn-ext">可伸缩按钮</a>
<a href="javascript:void 0;" class="sw_btn-ext-disable">disabled可伸缩按钮</a> nx21 不适用于input元素<br/><br/>
</div>
<div class="main-title-b"><div class="main-title"><h2>txt 输入框</h2></div></div>
<div class="fix" style="width: 500px;padding: 20px">
<input type="text" class="b_txt" value="总高度30px的b_txt或表单用的form-txt,height:20px, padding: 4px 5px; border-width:1px;" style="width:400px"/><br/>
<input type="text" class="s_txt" value="总高度26px的s_txt,height:20px, padding: 2px 5px; border-width:1px;" style="width:400px"/>
<br/><br/>
<input type="text" class="b_txt" disabled value="总高度30px的b_txt,height:20px, padding: 4px 5px; border-width:1px;" style="width:400px"/><br/>
<input type="text" class="s_txt" disabled value="总高度26px的s_txt,height:20px, padding: 2px 5px; border-width:1px;" style="width:400px"/>
<br/><br/>
<textarea id="" name="" rows="10" class="t_txt" cols="30">
t_txt用于textarea,
line-height: 20px
padding: 4px 5px;
background-color: #FFF;
border: #ddd 1px solid;
</textarea>
<textarea id="" name="" rows="10" class="t_txt" cols="30" disabled>
t_txt用于textarea的disabled样式,
line-height: 20px
padding: 4px 5px;
background-color: #FFF;
border: #ddd 1px solid;
</textarea>
</div>
<div class="main-title">
<h2>article 文章列表样式</h2>
<span class="main-title-more">(<a href="/article/">更多文章</a>)</span>
<a class="main-title-rss" href="/rss/">订阅文章RSS
<span class="rss"></span>
</a>
</div>
<div class="fix">
<div class="article">
<a href="#" target="_blank" class="article-pic">
<img src="http://www.guokr.com/gkimage/pb/6b/9b/pb6b9b.png" alt="" width="180" height="140" />
</a>
<h3>
<a href="#" target="_blank">海滩当画布,成就世界最大定格动画</a>
</h3>
<p class="article-info">22个回应&nbsp;&nbsp;3人推荐</p>
<p class="article-meta"><a href="#" target="_blank">小行踪</a> 发表于 2011-08-09 18:56:53</p>
<p>
离开一个城市从来不会有什么理由,但是留在一个地方必须得有,好在我也没有。
那天我拎着一个30英寸托运箱,一台盒子超大的一体机,一个拉杆箱,一个大背包,一个小背包.......(<a href="#" target="_blank">查看全部</a>)
</p>
<p class="article-from">来自:<a href="#" target="_blank">科学艺术</a>主题站</p>
</div>
<div class="article">
<h3>
<a href="#" target="_blank">海滩当画布,成就世界最大定格动画</a>
</h3>
<p class="article-info">22个回应&nbsp;&nbsp;3人推荐</p>
<p class="article-meta">发表于 2011-08-09 18:56:53</p>
<p>
离开一个城市从来不会有什么理由,但是留在一个地方必须得有,好在我也没有。
那天我拎着一个30英寸托运箱,一台盒子超大的一体机,一个拉杆箱,一个大背包,一个小背包.......<a href="#" target="_blank">查看全部</a>
</p>
</div>
<div class="article">
<a href="#" target="_blank" class="article-pic">
<img src="http://www.guokr.com/gkimage/pb/6b/9b/pb6b9b.png" alt="" width="180" height="140" />
</a>
<h3>
<a href="#" target="_blank">海滩当画布,成就世界最大定格动画</a>
</h3>
<p class="article-info">22个回应&nbsp;&nbsp;3人推荐</p>
<p class="article-meta"><a href="#" target="_blank">小行踪</a> 发表于 2011-08-09 18:56:53</p>
<p>
离开一个城市从来不会有什么理由,但是留在一个地方必须得有,好在我也没有。
那天我拎着一个30英寸托运箱,一台盒子超大的一体机,一个拉杆箱,一个大背包,一个小背包.......(<a href="#" target="_blank">查看全部</a>)
</p>
</div>
<div class="article">
<h3>
<a href="#" target="_blank">海滩当画布,成就世界最大定格动画</a>
</h3>
<p class="article-info">22个回应&nbsp;&nbsp;3人推荐</p>
<p class="article-meta">发表于 2011-08-09 18:56:53</p>
<p>
离开一个城市从来不会有什么理由,但是留在一个地方必须得有,好在我也没有。
那天我拎着一个30英寸托运箱,一台盒子超大的一体机,一个拉杆箱,一个大背包,一个小背包.......<a href="#" target="_blank">查看全部</a>
</p>
<p class="article-do">
<a href="#">编辑</a> |
<a href="#">删除</a>
</p>
</div>
</div>
<div class="main-title-b"><div class="main-title"><h2>pt模块,左图(48px,12px margin)右文</h2></div></div>
<div class="fix">
<div class="pt-pic">
<a href="#" target="_blank" title="母鸡"><img src="http://www.guokr.com/gkimage/uh/05/59/uh0559.png" alt="母鸡" /></a>
</div>
<div class="pt-txt">
<h3><a href="#" target="_blank">敏明君敏明君敏明君敏</a></h3>
<p class="pt-txt-d">广东医学院人体解(14个字)...<a class="sai" title="果壳达人" href="/nuts/">ψ</a>
</p>
</div>
</div>
<div class="main-title-b"><div class="main-title"><h2>微小组件</h2></div></div>
<div class="fix">
<ul>
<li>新图标,应用于登录前首页和站内信列表<sup class="new">new</sup></li>
<li>订阅文章RSS<span class="rss"></span></li>
<li>小果壳达人图标<a class="sai" title="果壳达人" href="/nuts/">ψ</a></li>
<li>大果壳达人图标<a class="b_sai" target="_blank" title="果壳达人" href="/nuts/">ψ</a></li>
<li><span class="sex-w" title=""><b class="element-invisible">男</b></span>男-性别图标</li>
<li><span class="sex-m" title=""><b class="element-invisible">男</b></span>男-性别图标</li>
<li>新浪微博图标<a class="sina_icon" href="/login/sina/" title="用新浪微博帐号登录">新浪微博</a></li>
<li>人人网图标<a class="renren_icon" href="/login/sina/?r=/article/63638/" title="用人人网帐号登录">人人网</a></li>
<li>QQ帐号登录<a class="qq_icon" title="用QQ帐号登录">QQ</a></li>
<li style="position:relative;text-indent:14px;"><span class="quote_l"><b>“</b></span><span class="quote_r">引号样式<b>”</b></span></li>
<li>使用element-invisible隐藏<span class="element-invisible">H</span>文字,但是对SEO及读屏软件可见</li>
<li class="ellipsis" style="width:300px" >使用ellipsis来隐藏文字,firefox 7以下不支持。省略号省略号省略号省略号省略号</li>
<li>蓝(lr)绿(ll)文字:<span class="ll">果</span><span class="lr">壳</span></li>
<li>关闭图标<a href="javascript:void 0;" class="icon-close">X</a></li>
</ul>
</div>
<div class="main-title-b"><div class="main-title"><h2>翻页模块</h2></div></div>
<div class="fix">
<ul class="page_nav">
<li class="page_nav-first"><span></span></li>
<li class="page_nav-prev"><span></span></li>
<li><span>1</span></li>
<li><a href="/nuts/?page=2">2</a></li>
<li><a href="/nuts/?page=3">3</a></li>
<li><a href="/nuts/?page=4">4</a></li>
<li><a href="/nuts/?page=5">5</a></li>
<li><a href="/nuts/?page=6">6</a></li>
<li>...</li>
<li class="page_nav-next"><a href="/nuts/?page=2"></a></li>
<li class="page_nav-last"><a href="/nuts/?page=23"></a></li>
</ul>
</div>
<div class="main-title-b"><div class="main-title"><h2>上一页与下一页模块</h2></div></div>
<div class="fix">
<div class="pages">
<a href="?page=1" class="pages-b bw_btn"><span>&lt;</span>上一页</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a href="?page=3" class="pages-n bw_btn">下一页<span>&gt;</span></a>
</div>
</div>
</div>
<div class="side">
<style>.folder {position: relative;overflow: hidden;margin-top:30px;padding: 1em;background-color: #E9E9E9;margin-bottom: 20px;}.folder::before {content: "";position: absolute;top: 0;right: 0;display: block; width: 0;background-color: #FFF;border-width: 0 16px 16px 0;border-style: solid;border-color: #D3D3D3 white;-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), -1px 1px 1px rgba(0, 0, 0, 0.2);-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), -1px 1px 1px rgba(0, 0, 0, 0.2);box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), -1px 1px 1px rgba(0, 0, 0, 0.2);}</style>
<div class="folder">
<p>亲爱的果壳用户:</p>
<p>2011年10月11日凌晨01:00~06:00期间,果壳网将进行系统升级。届时果壳网可能有一个小时暂时无法访问。给大家带来不便,请多包涵。</p>
</div>
<p class="side-back"><a href="/ask/">&gt;&nbsp;返回 side-back 果壳问答首页</a></p>
<div class="side-title"><h2>site-relative 侧栏相关主题站或小组</h2><span class="side-title-more">(<a href=".">48x48大小的图标</a>)</span></div>
<div class="site-relative">
<!-- 如果是小组则图片高度为48px-->
<a class="site-relative-img" href="/site/fact/"><img width="48" height="39" src="/skin/mini_logo/fact_b.jpg" alt="谣言粉碎机"></a>
<div>
<h3>
<a class="site-relative-name" href="/site/fact/">谣言粉碎机</a>主题站
</h3>
<p>102400人关注</p>
</div>
</div>
<div class="side-title"><h2>pack_u 用户或小组</h2><span class="side-title-more">(<a href=".">48x48大小的图标</a>)</span></div>
<div class="pack">
<dl class="pack_u">
<dt>
<a title="歙砚" href="/i/2103916229/"><img width="48" height="48" src="http://www.guokr.com/gkimage/r1/o6/im/r1o6im.png"></a>
</dt>
<dd class="pack_u-n">
<p><a title="歙砚" href="/i/2103916229/">歙砚</a></p>
<span>(2010)</span>
</dd>
</dl>
<dl class="pack_u">
<dt>
<a title="歙砚" href="/i/2103916229/"><img width="48" height="48" src="http://www.guokr.com/gkimage/r1/o6/im/r1o6im.png"></a>
</dt>
<dd class="pack_u-n">
<p><a title="歙砚" href="/i/2103916229/">WWWWWWWWWWWWWWWWWWWW</a></p>
<span>(2010)</span>
</dd>
</dl>
<dl class="pack_u">
<dt>
<a title="歙砚" href="/i/2103916229/"><img width="48" height="48" src="http://www.guokr.com/gkimage/r1/o6/im/r1o6im.png"></a>
</dt>
<dd class="pack_u-n">
<p><a title="歙砚" href="/i/2103916229/">歙砚</a></p>
<span>(2010)</span>
</dd>
</dl>
<dl class="pack_u">
<dt>
<a title="歙砚" href="/i/2103916229/"><img width="48" height="48" src="http://www.guokr.com/gkimage/r1/o6/im/r1o6im.png"></a>
</dt>
<dd class="pack_u-n">
<p><a title="歙砚" href="/i/2103916229/">WWWWWWWWWWWWWWWWWWWW</a></p>
<span>(2010)</span>
</dd>
</dl>
<dl class="pack_u">
<dt>
<a title="歙砚" href="/i/2103916229/"><img width="48" height="48" src="http://www.guokr.com/gkimage/r1/o6/im/r1o6im.png"></a>
</dt>
<dd class="pack_u-n">
<p><a title="歙砚" href="/i/2103916229/">歙砚</a></p>
<span>(2010)</span>
</dd>
</dl>
<dl class="pack_u">
<dt>
<a title="歙砚" href="/i/2103916229/"><img width="48" height="48" src="http://www.guokr.com/gkimage/r1/o6/im/r1o6im.png"></a>
</dt>
<dd class="pack_u-n">
<p><a title="歙砚" href="/i/2103916229/">我是敏明君我是敏明君</a></p>
<span>(2010)</span>
</dd>
</dl>
</div>
<div class="side-title"><h2>pack_s 小主题站(用的大图片,但是缩放)</h2><span class="side-title-more">(<a href=".">48x48大小的图标</a>)</span></div>
<div class="pack">
<dl class="pack_s">
<dt>
<a title="DIY" href="/site/diy/"><img width="48" height="39" src="/skin/mini_logo/diy_b.jpg"></a>
</dt>
<dd>
<a title="DIY" href="/site/diy/">DIY</a>
</dd>
</dl>
<dl class="pack_s">
<dt>
<a title="健康朝九晚五" href="/site/health/"><img width="48" height="39" src="/skin/mini_logo/health_b.jpg"></a>
</dt>
<dd>
<a title="健康朝九晚五" href="/site/health/">健康朝九晚五</a>
</dd>
</dl>
<dl class="pack_s">
<dt>
<a title="爱宠" href="/site/pet/"><img width="48" height="39" src="/skin/mini_logo/pet_b.jpg"></a>
</dt>
<dd>
<a title="爱宠" href="/site/pet/">爱宠</a>
</dd>
</dl>
<dl class="pack_s">
<dt>
<a title="性 情" href="/site/sex/"><img width="48" height="39" src="/skin/mini_logo/sex_b.jpg"></a>
</dt>
<dd>
<a title="性 情" href="/site/sex/">性 情</a>
</dd>
</dl>
<dl class="pack_s">
<dt>
<a title="谋杀 现场 法医" href="/site/crime/"><img width="48" height="39" src="/skin/mini_logo/crime_b.jpg"></a>
</dt>
<dd>
<a title="谋杀 现场 法医" href="/site/crime/">谋杀 现场 法医</a>
</dd>
</dl>
<dl class="pack_s">
<dt>
<a title="心事鉴定组" href="/site/psybst/"><img width="48" height="39" src="/skin/mini_logo/psybst_b.jpg"></a>
</dt>
<dd>
<a title="心事鉴定组" href="/site/psybst/">心事鉴定组</a>
</dd>
</dl>
<dl class="pack_s">
<dt>
<a title="科技名博" href="/site/sciblog/"><img width="48" height="39" src="/skin/mini_logo/sciblog_b.jpg"></a>
</dt>
<dd>
<a title="科技名博" href="/site/sciblog/">科技名博</a>
</dd>
</dl>
<dl class="pack_s">
<dt>
<a title="自然控" href="/site/natural/"><img width="48" height="39" src="/skin/mini_logo/natural_b.jpg"></a>
</dt>
<dd>
<a title="自然控" href="/site/natural/">自然控</a>
</dd>
</dl>
</div>
<div class="side-title"><h2>titles 侧栏标题列表</h2></div>
<ul class="titles" style="width: 290px;">
<li>
<h3><a target="_blank" href="/post/61306/">【时间的流淌】创意钟表大集合</a></h3>
<span class="titles-r-grey">24</span>
</li>
<li>
<h3><a target="_blank" href="/post/61306/">【时间的流淌】创意钟表大集合</a></h3>
<span class="titles-r-grey">24</span>
</li>
<li>
<h3><a target="_blank" href="/post/61306/">【时间的流淌】创意钟表大集合</a></h3>
<span class="titles-r-grey">24</span>
<p class="titles-b">
<span class="titles-b-l">作者:<a href="#">小麦</a></span>
<span class="titles-b-r">最后回应:<a href="#">野兽</a>&nbsp;&nbsp; 2011-06-10 00:05:14</span>
</p>
</li>
<li>
<h3><a target="_blank" href="/post/61306/">【时间的流淌】创意钟表大集合</a></h3>
<span class="titles-r-grey">24</span>
<p class="titles-b">
<span class="titles-b-l">作者:<a href="#">小麦</a></span>
<span class="titles-b-r">最后回应:<a href="#">野兽</a>&nbsp;&nbsp; 2011-06-10 00:05:14</span>
</p>
</li>
<li>
<h3><a target="_blank" href="/post/61306/">【时间的流淌】创意钟表大集合</a></h3>
<span class="titles-r-grey">24</span>
<p class="titles-b">
<span class="titles-b-l">作者:<a href="#">小麦</a></span>
<span class="titles-b-r">最后回应:<a href="#">野兽</a>&nbsp;&nbsp; 2011-06-10 00:05:14</span>
</p>
</li>
</ul>
<div class="side-title"><h2>列表为空时候的样式</h2></div>
<div class="nolist">这个列表为空!</div>
<p class="side-forward">
<a href="/group/posts/39/" title="进入小组"> side-forward 模块 进入小组&nbsp;&gt;&gt;</a>
</p>
<div class="side-title">
<h2>侧栏驻站编辑</h2>
</div>
<ul class="side-author">
<li>
<a class="pt-pic" href="/i/1145565074/" title="居尚" target="_blank"><img width="48" height="48" src="http://www.guokr.com/gkimage/10/ab/sc/10absc.png" alt="居尚" hoverboxadded="true"></a>
<div class="pt-txt">
<h3><a href="/i/1145565074/" target="_blank">居尚</a></h3>
<span>262人关注</span>
<p class="pt-txt-d">
果壳网科技名博站编辑
<a class="sai" href="/nuts/" target="_blank" title="果壳达人">ψ</a>
</p>
</div>
</li>
<li>
<a class="pt-pic" href="/i/0339721194/" title="萧四无" target="_blank"><img width="48" height="48" src="http://www.guokr.com/gkimage/35/qj/xz/35qjxz.png" alt="萧四无" hoverboxadded="true"></a>
<div class="pt-txt">
<h3><a href="/i/0339721194/" target="_blank">萧四无</a></h3>
<span>1099人关注</span>
<p class="pt-txt-d">
果壳死理性派编辑
<a class="sai" href="/nuts/" target="_blank" title="果壳达人">ψ</a>
</p>
</div>
</li>
</ul>
</div>
</div>
<div class="bottom">
<ul class="bottom-nav">
<li><a href="/about/">关于我们</a></li>
<li><a href="/joinus/">加入果壳</a></li>
<li><a href="/spread/">媒体报道</a></li>
<li><a href="/help/">帮助中心</a></li>
<li><a href="/zone/">内容专区</a></li>
<li><a href="/events/">活动专区</a></li>
<li><a href="/help/policy.html">免责声明</a></li>
<li><a href="/contact/">联系我们</a></li>
<li><a class="bottom-nav-m" href="/zone/mobile/">移动版</a></li>
</ul>
<div class="bottom-i">©2012果壳网 京ICP备09043258号-2 京公网安备1101052730</div>
</div>
</div>
<div id="blockWindow" class="gui-block" style="display: block; top: 20px; left: 20px;">
<div class="gui-block-b">
<h4 class="gui-block-hd">
<span id="blockTitle">标题(使用block2的title方法设置)</span>
<a class="blockClose gui-block-close" href="#" title="关闭">X</a>
</h4>
<div id="blockContent" class="gui-block-bd">
<p>
这是一个弹出框gui-block-content样式,与lib/block2.js共同使用
</p><br/>
<a href="javascript:void 0;" id="switchHeader">切换top和header的样式</a><br/><br/>
<p>
<h5>通用的状态class,保留class:</h5>
* current<br/>
* hover<br/>
* selected<br/>
* actived<br/>
* error<br/>
* success<br/>
* unread<br/>
* disabled<br/>
* highlight<br/>
</p><br/>
<h5>通用class</h5>
<pre>
.hide {display:none;}
.fr {float:right;}
.fl {float:left;}
.cb {clear:both;}
/*
* 用于提供一个不会被float影响的wrap,
* 也可以起到清除浮动的作用
*/
.pack {width:100%;overflow:hidden}
</pre>
<h5>模块间隔:</h5>
<pre>
.mt30 {margin-top:30px;} 模块间间隔
.mt20 {margin-top:20px;} 模块内组件间隔
</pre>
</div>
</div>
</div>
<a href="javascript:void 0;" id="switchBlock" style="position:absolute;top:2px;left:20px;">关闭或打开block</a><br/><br/>
<script>
var GJS_URL = '/js/',
GJS_PRELOAD = ['GUtils'];
</script>
<script src="G/G.js"></script>
<script>
G.req('jQuery', function ($) {
$(function() {
var show = 1,
showBlock = true,
gheader1 = $('#gheader1'),
top1 = $('#top1'),
gheader2 = $('#gheader2'),
top2 = $('#top2'),
blockWindow = $("#blockWindow");
$('#switchHeader').click(function(e) {
e.preventDefault();
if ( show === 1 ) {
show = 2;
gheader1.hide();
top1.hide();
gheader2.show();
top2.show();
} else {
show = 1;
gheader1.show();
top1.show();
gheader2.hide();
top2.hide();
}
});
$('#switchBlock').click(function(e) {
e.preventDefault();
if ( showBlock ) {
showBlock = false;
blockWindow.hide();
} else {
showBlock = true;
blockWindow.show();
}
});
$('#gheaderNotice').hover(
function(){
$('#noticeBlock').show();
},
function(){
$('#noticeBlock').hide();
}
);
});
});
</script>
</body>
</html>