菜单

组件

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

页头一个网页的头部

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

这是一个页头

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

头部告示黄色区域引人注目

<div class="spring">这是一段警告 
<del>&times;</del>
</div>
这是一段警告 ×

头部导航头部导航

其他颜色class="topbar blue"就可以换一种蓝色导航条

黄色 添加class="topbar yellow"调用

红色 添加class="topbar red"调用

无色 添加class="topbar unstyled"调用

带搜索栏

代码片段
<div class="topbar">
<div class="wrapper">
<div class="logo">
<a href="./"><font class="danley">keqie</font> 渴切</a>
</div>
<div class="module">
<a href="index.html">概述</a>
<a href="grid.html">框架</a>
<a href="base.html">基础css</a>
<a href="widget.html" class="selected">组件</a>
<a href="javascript.html">javascript插件</a>
</div>
<div class="sub">
<a href="index.html">例子</a>
<a href="http://mobile.keqie.com">移动版</a>
</div>
</div>
</div>

选项卡带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>
首页 > 概述 > 组件

无样式 引用class="current unstyled"

首页 > 概述 > 组件

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

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

红色分页 引用样式class="pager red"

蓝色分页 引用样式class="pager blue"

无样式分页 引用样式class="pager unstyled"

tag标签以及其他注释用途

默认 <span class="label">默认</span>
成功 <span class="label success">成功</span>
默认 <span class="label warning">警告</span>
默认 <span class="label error">错误</span>

页尾一个网页的底部

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

默认提示风格

格子状

动态滚动

成功

警告

危险

消息墙突出展示一些信息

<div class="well">
... </div>
消息墙,可以突出展示一些信息