组件

定义了一些常用的组件以及样式,能够快速构建页头,导航,选项卡,页脚,子菜单,分页等

页头一个网页的头部

<header>
<h1>这是一个页头</h1>
<h2>这是一个页面的描述<br/> <small>这是一个页面的具体描述</small> </h2>
</header>

这是一个页头

这是一个页面的描述
这是一个页面的具体描述

选项卡带js的选项卡效果

基于jquery制作的选项卡效果,在前端制作的二次开发中经常用到,最简洁,最有效,最通用的代码及演示。
演示
渴切犹急切。 何其芳《画梦录·炉边夜话》:“但这里的人从没有一个见过海的,辽远使我更加渴切了。这里的渴切是比渴望还要渴望的心情,渴切是一种需求,是一种梦想,是激励我们实现目标的动力。
代码片段
$(function(){
$('.taber .head a').hover(function(){
$('.taber .body').hide();
$('.taber #'+$(this).attr('lang')).show();

$('.taber .head a').removeClass('selected');
$(this).addClass('selected');
})
})

导航条导航条是网站的灵魂所在,一个漂亮的网站导航条能够个人良好的印象以及用户体验,细致大气的导航条能够给人官方正规的感觉

<div class="navbar"> 
<a href="#">首页</a> 
<a href="#">关于我们</a> 
<a href="#">行业新闻</a> 
<a href="#">公司荣誉</a> 
<a href="#">产品列表</a> 
<a href="#">联系我们</a>
</div>

侧边栏侧边栏菜单,常用于子菜单的展示

<ul class="sidebar">
<li class="selected"> <a href="#">栏目</a></li> <li><a href="#">菜单</a></li> <li><a href="#">菜单</a></li>
</ul>

面包屑开源中文css框架

<div class="current">
<a href="#">首页</a>&gt; 
<a href="#">概述</a>&gt;
<span>组件</span>
</div>
首页 > 概述 > 组件

分页通用而简洁的分页样式

<div class="pager">
<a href="#">首页</a>
<a href="#">上一页</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">...</a>
<a href="#">99</a>
<a href="#">下一页</a>
<a href="#">尾页</a>
</div>

页尾一个网页的底部

<div class="footer">
...
</div>

heading跟页头有所区别,可以做头部BANNER来用

<div class="heading">
<h1>这是一个heading</h1>
<h2>这是一个heading的描述</h2>
</div>

这是一个heading

这是一个heading的描述

提示信息不同的提示信息是不同的颜色,容易理解

<div class="current">
<a href="#">首页</a>&gt; 
<a href="#">概述</a>&gt;
<span>组件</span>
</div>

默认提示风格

提示信息!这是一段普通的提示信息描述

正确提示风格

恭喜你!经过你的不懈努力,你升级啦!

错误提示风格

权限不足!您没有权限访问本页,请问管理员索要权限。

进度条纯css实现

<div class="progress">
<div class="bar" style="width:50%;"> </div> </div>

默认提示风格

格子状

动态滚动

成功

警告

危险

^