puerh
/
index.html

<!DOCTYPE html>
<html class="index">
<head>
	<meta charset="utf-8" />
	<title>Puerh - 百姓网 UI 库</title>
	<link rel="stylesheet" href="stylesheets/base.css" />
	<link rel="stylesheet" href="style.css" />
	<!--[if lt IE 9]>
	<script type="text/javascript">
    // html5shiv MIT @rem remysharp.com/html5-enabling-script
    // iepp v1.6.2 MIT @jon_neal iecss.com/print-protector
    /*@cc_on(function(a,b){function r(a){var b=-1;while(++b<f)a.createElement(e[b])}if(!(!window.attachEvent||!b.createStyleSheet||!function(){var a=document.createElement("div");a.innerHTML="<elem></elem>";return a.childNodes.length!==1}())){a.iepp=a.iepp||{};var c=a.iepp,d=c.html5elements||"abbr|article|aside|audio|canvas|datalist|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video",e=d.split("|"),f=e.length,g=new RegExp("(^|\\s)("+d+")","gi"),h=new RegExp("<(/*)("+d+")","gi"),i=/^\s*[\{\}]\s*$/,j=new RegExp("(^|[^\\n]*?\\s)("+d+")([^\\n]*)({[\\n\\w\\W]*?})","gi"),k=b.createDocumentFragment(),l=b.documentElement,m=l.firstChild,n=b.createElement("body"),o=b.createElement("style"),p=/print|all/,q;c.getCSS=function(a,b){if(a+""===undefined)return"";var d=-1,e=a.length,f,g=[];while(++d<e){f=a[d];if(f.disabled)continue;b=f.media||b,p.test(b)&&g.push(c.getCSS(f.imports,b),f.cssText),b="all"}return g.join("")},c.parseCSS=function(a){var b=[],c;while((c=j.exec(a))!=null)b.push(((i.exec(c[1])?"\n":c[1])+c[2]+c[3]).replace(g,"$1.iepp_$2")+c[4]);return b.join("\n")},c.writeHTML=function(){var a=-1;q=q||b.body;while(++a<f){var c=b.getElementsByTagName(e[a]),d=c.length,g=-1;while(++g<d)c[g].className.indexOf("iepp_")<0&&(c[g].className+=" iepp_"+e[a])}k.appendChild(q),l.appendChild(n),n.className=q.className,n.id=q.id,n.innerHTML=q.innerHTML.replace(h,"<$1font")},c._beforePrint=function(){o.styleSheet.cssText=c.parseCSS(c.getCSS(b.styleSheets,"all")),c.writeHTML()},c.restoreHTML=function(){n.innerHTML="",l.removeChild(n),l.appendChild(q)},c._afterPrint=function(){c.restoreHTML(),o.styleSheet.cssText=""},r(b),r(k);if(c.disablePP)return;m.insertBefore(o,m.firstChild),o.media="print",o.className="iepp-printshim",a.attachEvent("onbeforeprint",c._beforePrint),a.attachEvent("onafterprint",c._afterPrint)}})(this,document)@*/
	</script>
	<![endif]-->
<style>
table a{position:relative;}
table a span{position:fixed;white-space:nowrap;}
</style>
</head>
<body>

<div class="container clearfix">
    <div id="header" class="grid grid-20">
        <div class="grid grid-4 first">
            <h1 id="logo">Puerh</h1>
            <strong id="tagline">百姓网 UI 库</strong>
        </div>
        <div class="grid grid-11 navi">
            <a href="./index.html" id="index" class="current">HOME</a>
            <a href="./css.html" id="css">CSS</a>
            <a href="./javascript.html" id="javascript">JavaScript</a>
            <a href="./getting-start.html" id="getting-start">Getting Start</a>
        </div>
        <div class="grid grid-5 last navi">Feedback：
            <a href="http://arch.baixing.com/Puerh/faq.html">FAQ</a>
            <a href="mailto:sundengjia@baixing.com">@登甲</a>
            <a href="mailto:linjianfeng@baixing.com">@小鱼</a>
        </div>
    </div> <!-- #header -->

    <div id="main" class="grid grid-20">

        <p>Puerh，百姓网 UI 库。旨在建立稳定、简洁、兼容的前端框架。已经通过 Mac/Windows 下的 IE6+ / Firefox / Google Chrome 浏览器测试。Puerh 的目标是构建一套适合百姓网的前端解决方案。整套方案整合 TYPO.CSS 排版，基于与视觉稿一致的 980px Grid System 布局，包含各种 UI 组件，使用 Twitter Bootstrap 的 JavaScript 组件。</p>
    </div> <!-- grid-20 -->
    <div class="grid grid-20">
	    <h3 class="typo-h3">一、CSS 组件</h3>
		<table class="document-table" id="plugin-table">
			<tr>
				<th><a href="/Puerh/css.html#Search">Search(搜索框)</a></th>
				<th><a href="/Puerh/css.html#Pagenav">PageNav（分页）</a></th>
				<th><a href="/Puerh/css.html#Bread">Breadcrumb（面包屑导航）</a></th>
				<th><a href="/Puerh/css.html#Headline">Headline（标题）</a></th>
			</tr>
			<tr>
				<th><a href="/Puerh/css.html#gList">Group List（首页大列表）</a></th>
				<th><a href="/Puerh/css.html#catBox">Catbox（图片列表）</a></th>
				<th><a href="/Puerh/css.html#tab">Tab</a></th>
				<th><a href="/Puerh/css.html#topbar">Topbar（顶部导航）</a></th>
			</tr>
			<tr>
				<th><a href="/Puerh/css.html#filter">Filter（类目过滤）</a></th>
				<th><a href="/Puerh/css.html#icons">Icons（小图标）</a></th>
				<th><a href="/Puerh/css.html#tag">Tag（小标签）</a></th>
				<th><a href="/Puerh/css.html#button">Button（按钮）</a></th>
			</tr>
			<tr>
				<th><a href="/Puerh/css.html#modal">Modal（弹出框）</a></th>
				<th><a href="/Puerh/css.html#dropdown">Dropdown（下拉菜单）</a></th>
				<th><a href="/Puerh/css.html#tips">Tips（可操作浮层）</a></th>
				<th><a href="/Puerh/css.html#alert">Alert Message（可操作消息）</a></th>
			</tr>
			<tr>
				<th><a href="/Puerh/css.html#table">Table（表格）</a></th>
				<th><a href="/Puerh/css.html#Listing">Listing（列表）</a></th>
				<th><a href="/Puerh/css.html#images">Images(图片展栏)</a></th>
				<th><a href="/Puerh/css.html#flow">Flow（流程）</a></th>
			</tr>
			<tr>
				<th><a href="/Puerh/css.html#LogoModule">Logo</a></th>
				<th><a href="/Puerh/css.html#Nav">Navigation（导航）</a></th>
				<th><a href="/Puerh/css.html#flow">-</a></th>
				<th><a href="/Puerh/css.html#Logo">-</a></th>
			</tr>
		</table>
    </div>
    <div class="grid grid-20">
        <h3 class="typo-h3">二、JavaScript 组件</h3>
	    <table class="document-table" id="plugin-table">
	        <tr>
	            <th><a href="/Puerh/javascript.html#Modals">Modals(弹出层)</a></th>
	            <th><a href="/Puerh/javascript.html#Dropdowns">Dropdowns（下拉菜单）</a></th>
	            <th><a href="/Puerh/javascript.html#Tabs">Tabs（标签切换）</a></th>
	            <th><a href="/Puerh/javascript.html#Tips">Tips（浮层提示条）</a></th>
	        </tr>
	        <tr>
	            <th><a href="/Puerh/javascript.html#Alert">Alert（可关闭消息）</a></th>
	            <th><a href="/Puerh/javascript.html#Typeahead">Typeahead（自动完成）</a></th>
	            <th><a href="/Puerh/javascript.html#Scrollspy">Scrollspy（滚动生成）</a></th>
	            <th>Lightbox（图片浏览浮层）</th>
	        </tr>
	        <tr>
	            <th>Validator（表单验证）</th>
	            <th>Linkage（联动操作）</th>
	            <th></th>
	            <th></th>
	        </tr>

	    </table>
    </div> <!-- .grid-20 -->

    <div class="grid grid-20">
        <h3 class="typo-h3">三、主要页面 DEMO</h3>
	    <table class="document-table" id="plugin-table">
	        <tr>
	            <th><a href="/Puerh/pages/index.html">首页 index.html</a></th>
	            <th><a href="/Puerh/pages/filter.html">一级页面 filter.html</a></th>
	            <th><a href="/Puerh/pages/list.html">二级页面 list.html</a></th>
	            <th><a href="/Puerh/pages/animals.html">大图列表 animals.html</a></th>
	        </tr>
	        <tr>
	            <th><a href="/Puerh/pages/viewad.html">View Ad viewad.html</a></th>
	            <th><a href="/Puerh/pages/viewad-store.html">店铺 viewad-store.html</a></th>
	            <th><a href="/Puerh/pages/agreement.html">百姓公约 agreement.html</a></th>
	            <th><a href="/Puerh/pages/publish.html">发布 publish.html</a></th>
	        </tr>
	        <tr>
	            <th colspan="4"><a href="/Puerh/pages/publish-form">发布表单 publish-form.html</a></th>
	        </tr>
	    </table>
    </div> <!-- .grid-20 -->
    <div id="footer" class="grid grid-20">
        <small>版权所有: 客齐集网络信息技术服务（上海）有限公司</small>
    </div>
</div>

<script type="text/javascript" src="./javascripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="./javascripts/plugins.js"></script>
<script type="text/javascript" src="./instant.js"></script>
</body>
</html>