代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>css组件 - Slicy</title>
<meta name="keywords" content="Slicy,中文css框架,css框架,开源css框架,css框架下载"/>
<meta name="description" content="Slicy是一个开源中文 (X)HTML/CSS 框架 ,它的目的是减少你的css开发时间。它提供一个可靠的css基础去创建你的项目,能够用于网站的快速设计,通过重设和重建浏览器标准，可以让每个网站防 止枯燥的跨浏览器兼容性测试。"/>
<link rel="stylesheet" href="assets/css/slicy.css">
<link rel="stylesheet" href="css/prettify.css" >
<link rel="stylesheet" href="css/docs.css">
<!--[if ie 6]>
<link rel="stylesheet" href="assets/css/ie6.css">
<![endif]-->
<!--[if lt IE 9]>
<script src="assets/js/html5.js"></script>
<![endif]-->
<script src="assets/js/jquery-1.7.1.min.js"></script>
<script src="assets/js/slicy.js"></script>
<script src="js/prettify.js"></script>
<script src="js/docs.js"></script>
</head>
<body>
<div class="naver">
<div class="wrapper">
<div class="brand">
<a href="./index.html"><img src="imgs/logo.png" width="80"/></a> </div>
<div class="module">
<ul>
<li>
<a href="slicy.html">概述</a> </li>
<li>
<a href="grid.html" class="selected">12列栅格</a> </li>
<li>
<a href="base.html">基础CSS</a> </li>
<li class="selected">
<a href="widgets.html">组件</a> </li>
<li>
<a href="javascript.html">JS插件</a> </li>
</ul>
</div>
<div class="sub">
<ul>
<li><a href="http://www.qietu.com/?slicy">切图网</a></li>
</ul>
</div>
</div>
</div>
<div class="heading">
<div class="wrapper">
<h1>组件</h1>
<h2>定义了一些常用的组件以及样式，能够快速构建页头，导航，选项卡，页脚，子菜单，分页等</h2>
</div>
</div>
<div class="wrapper">
<div class="row">
<div class="col3">
<ul class="sidebar nojs">
<li class="selected">
<a href="#spring">头部告示</a></li>
<li><a href="#naver">头部导航</a></li>
<li><a href="#taber">选项卡</a></li>
<li><a href="#sidebar">侧边栏</a></li>
<li><a href="#current">面包屑</a></li>
<li><a href="#pager">分页</a></li>
<li><a href="#tag">tag标签</a></li>
<li><a href="#footer">页尾</a></li>
<li><a href="#heading">heading</a></li>
<li><a href="#alert">提示信息</a></li>
<li><a href="#progress">进度条</a></li>
<li><a href="#well">消息墙</a></li>
<li><a href="#masthead">masthead</a></li>
<li><a href="#timeline">时间轴</a></li>
<li><a href="#pricing">价目表</a></li>
<li><a href="#counter">计数器</a></li>
<li><a href="abs-faq.html">流程帮助</a></li>
<li><a href="imgroll.html">图片滚动</a></li>
</ul>
</div>
<div class="col9">
<h2 id="spring">边框</h2>
<h4>头部告示<small>黄色区域引人注目</small></h4>
<div class="docs">
<div class="docs-head">example</div>
<div class="docs-body">
<!--demo-->
<div class="spring">
<div class="wrapper" style="width:auto; padding-left:20px; padding-right:20px;">
这是一段警告
<del>×</del>
</div>
</div>
<!--//demo-->
</div>
<div class="doc-foot">
<pre class="prettyprint linenums"><div class="spring"><br><div class="wrapper"><br>这是一段警告<br><del>&times;</del> <br></div> <br></div> </pre>
</div>
</div>
<h2 id="spring">边框</h2>
<h4>歌词来自《Whatever Will Be, Will Be》</h4>
<div class="docs">
<div class="docs-head">example</div>
<div class="docs-body">
<!--demo-->
sadfasdf
<!--//demo-->
</div>
<div class="doc-foot">
<pre><p class="border border-red text-red padding-small">When I was just a little girl,</p><br><p class="border border-yellow text-yellow padding-small">I asked my mother, </p><br><p class="border border-blue text-blue padding-small">"What will I be?</p><br><p class="border border-green text-green padding-small">Will I be pretty?</p><br><p class="border padding-small">Will I be rich?"</p></pre>
</div>
</div>
<div class="part" id="naver">
<h1 class="phead">头部导航<small>头部导航</small></h1>
<div class="pbody">
<!--演示开始-->
<div class="naver">
<div class="">
<div class="brand">
<a href="./index.html"><img src="imgs/logo.png" width="80"/></a> </div>
<div class="collapse">菜单</div>
<div class="module">
<ul>
<li><a href="#">概述</a></li>
<li><a href="#">框架</a></li>
</ul>
</div>
<form class="search">
<input name="" type="text" value="" placeholder="请输入关键字" class="text">
<input name="" type="button" class="button" value="搜索">
</form>
<div class="sub">
<a href="#">关于</a> </div>
</div>
</div>
<!--演示结束-->
<br/>
<br/>
<h2>无色 添加<code>class="naver unstyled"</code>调用</h2>
<!--演示开始-->
<div class="naver unstyled">
<div class="">
<div class="brand">
<a href="./index.html"><img src="imgs/logo.png" width="80"/></a> </div>
<div class="collapse">菜单</div>
<div class="module">
<a href="#">概述</a>
<a href="#">框架</a>
<a href="#">基础CSS</a>
<a href="#" class="selected">组件</a> </div>
<div class="sub">
<a href="#">关于</a> </div>
</div>
</div>
<!--演示结束-->
<br/>
<br/>
</div>
<div class="phead">代码片段</div>
<pre class="prettyprint linenums"><div class="naver"><br> <div class="wrapper"><br> <div class="logo"><br> <a href="./"> Slicy</a><br> </div><br> <div class="module"><br><ul><br> <li><br> <strong><a href="#" class="selected">菜单1</a></strong><br> </li><br> <li><br> <strong><a href="###">菜单2</a></strong><br> <div class="droper"><br> <a href="#">子菜单1</a><br> <a href="#" target="_blank">子菜单2</a><br> <a href="#" target="_blank">子菜单3</a><br> <a href="#" target="_blank">子菜单4</a><br> <a href="#" target="_blank">子菜单5</a><br> </div><br> </li><br> <li><br> <strong><a href="###">菜单3</a></strong><br> <div class="droper"><br> <a href="#">子菜单1</a><br> <a href="#" target="_blank">子菜单2</a><br> <a href="#" target="_blank">子菜单3</a><br> <a href="#" target="_blank">子菜单4</a><br> <a href="#" target="_blank">子菜单5</a><br> </div><br> </li><br> </ul><br> </div><br> <div class="sub"><br> <a href="#">例子</a><br> <a href="#">关于</a><br> </div><br> </div><br></div></pre>
</div>
<div class="part" id="taber">
<h1 class="phead">选项卡<small>带js的选项卡效果</small></h1>
<div class="row">
<div class="col4">
基于jquery制作的选项卡效果，在前端制作的二次开发中经常用到，最简洁，最有效，最通用的代码及演示。 </div>
<div class="col8">
<div class="phead">演示</div>
<!--选项卡开始-->
<div class="taber">
<div class="head">
<a href="#" lang="t1" class="selected">典故</a>
<a href="#" lang="t2">关于</a>
<a href="#" lang="t3">其他</a>
<a href="#" lang="t4">其他</a> </div>
<div class="body" id="t1">
Slicy犹急切。 何其芳《画梦录·炉边夜话》：“但这里的人从没有一个见过海的，辽远使我更加Slicy了。这里的Slicy是比渴望还要渴望的心情，Slicy是一种需求，是一种梦想，是激励我们实现目标的动力。 </div>
<div class="body" id="t2" style="display:none;">
Slicy是一个开源中文 (X)HTML/CSS 框架 ,它的目的是减少你的css开发时间。它提供一个可靠的css基础去创建你的项目,能够用于网站的快速设计,通过重设和重建浏览器标准，可以让每个网站防 止枯燥的跨浏览器兼容性测试。你可以将他理解成一套模板，里面包含了大多数站点中所需要的那些css类。他很小，只有四个文件而已。总共不到6KB。 </div>
<div class="body" id="t3" style="display:none;">
更多相关资讯 </div>
<div class="body" id="t4" style="display:none;">
更多相关资讯 </div>
</div>
<!--选项卡结束-->
<div class="phead">代码片段</div>
<pre class="prettyprint linenums"><div class="taber"><br> <div class="head"><br> <a href="#" lang="t1" class="selected">典故</a><br> <a href="#" lang="t2">关于</a><br> <a href="#" lang="t3">其他</a><br> <a href="#" lang="t4">其他</a><br> </div><br><div class="body" id="t1"><br> Slicy犹急切。 何其芳《画梦录·炉边夜话》：“但这里的人从没有一个见过海的，辽远使我更加Slicy了。这里的Slicy是比渴望还要渴望的心情，Slicy是一种需求，是一种梦想，是激励我们实现目标的动力。<br> </div><br> <div class="body" id="t2" style="display:none;"><br> Slicy是一个开源中文 (X)HTML/CSS 框架 ,它的目的是减少你的css开发时间。它提供一个可靠的css基础去创建你的项目,能够用于网站的快速设计,通过重设和重建浏览器标准，可以让每个网站防 止枯燥的跨浏览器兼容性测试。你可以将他理解成一套模板，里面包含了大多数站点中所需要的那些css类。他很小，只有四个文件而已。总共不到6KB。<br> </div><br> <div class="body" id="t3" style="display:none;"><br> 更多相关资讯<br> </div><br> <div class="body" id="t4" style="display:none;"><br> 更多相关资讯<br> </div><br> </div></pre>
</div>
</div>
</div>
<div class="part" id="sidebar">
<h1 class="phead">侧边栏<small>侧边栏菜单，常用于子菜单的展示</small></h1>
<pre><ul class="sidebar"><br><li class="selected">
<a href="#">栏目</a></li>
<li><a href="#">菜单</a></li>
<li><a href="#">菜单</a></li><br></ul>
</pre>
<ul class="sidebar nojs">
<li class="selected"><a href="#">栏目</a></li>
<li><a href="#">菜单</a></li>
<li><a href="#">菜单</a></li>
</ul>
</div>
<div class="part" id="current">
<h1 class="phead">面包屑<small>开源中文css框架</small></h1>
<div class="row">
<div class="col9">
<pre><div class="current">
<a href="#">首页</a>&gt;
<a href="#">概述</a>&gt;
<span>组件</span>
</div></pre>
</div>
<div class="col9">
<div class="current">
<a href="#">首页</a>
> <a href="#">概述</a> > 组件</div>
<h2>无样式 引用<code>class="current unstyled"</code></h2>
<div class="current unstyled">
<a href="#">首页</a>
> <a href="#">概述</a> > 组件</div>
</div>
</div>
</div>
<div class="part" id="pager">
<h1 class="phead">分页<small>通用而简洁的分页样式</small></h1>
<div class="row">
<div class="col9">
<pre class="prettyprint linenums"><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></pre>
</div>
<div class="col9">
<div class="pager">
<a href="#">首页</a>
<a href="#">上一页</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#" class="selected">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">...</a>
<a href="#">99</a>
<a href="#">下一页</a>
<a href="#">尾页</a> </div>
<h2>无样式分页 引用样式<code>class="pager unstyled"</code></h2>
<div class="pager unstyled">
<a href="#">首页</a>
<a href="#">上一页</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#" class="selected">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>
</div>
</div>
<div class="part" id="tag">
<h1 class="phead">tag标签<small>以及其他注释用途</small></h1>
<div class="row">
<div class="col9">
<table width="200" border="0" class="bordered">
<tr>
<td><span class="label">默认</span></td>
<td><code><span class="label">默认</span></code></td>
</tr>
<tr>
<td><span class="label success">成功</span></td>
<td><code><span class="label success">成功</span></code></td>
</tr>
<tr>
<td><span class="label warning">默认</span></td>
<td><code><span class="label warning">警告</span></code></td>
</tr>
<tr>
<td><span class="label error">默认</span></td>
<td><code><span class="label error">错误</span></code></td>
</tr>
</table>
</div>
</div>
</div>
<div class="part" id="footer">
<h1 class="phead">页尾<small>一个网页的底部</small></h1>
<pre><div class="footer">
...
</div></pre>
<div class="row">
<div class="col9">
<div class="footer">Powered by <a href="http://www.slicy.cn">Slicy</a> V1.0
<br>
© 2001-2012 Slicy Inc. </div>
</div>
</div>
</div>
<div class="part" id="heading">
<h1 class="phead">heading<small>跟页头有所区别，可以做头部BANNER来用</small></h1>
<div class="row">
<div class="col9">
<pre><div class="heading">
<h1>这是一个heading</h1>
<h2>这是一个heading的描述</h2>
</div></pre>
</div>
<div class="col9">
<div class="heading">
<h1>这是一个heading</h1>
<h2>这是一个heading的描述</h2>
</div>
</div>
</div>
</div>
<div class="part" id="alert">
<h1 class="phead">提示信息<small>不同的提示信息是不同的颜色，容易理解</small></h1>
<div class="row">
<div class="col9">
<pre><div class="alert"><br><strong>提示信息！</strong>这是一段普通的提示信息描述
</div></pre>
</div>
<div class="col9">
<h2>默认提示风格</h2>
<div class="alert">
<strong>提示信息！</strong>这是一段普通的提示信息描述 </div>
<h2>正确提示风格</h2>
<div class="alert success">
<strong>恭喜你！</strong>经过你的不懈努力，你升级啦！ </div>
<h2>错误提示风格</h2>
<div class="alert error">
<strong>权限不足！</strong>您没有权限访问本页，请问管理员索要权限。 </div>
</div>
</div>
</div>
<div class="part" id="progress">
<h1 class="phead">进度条<small>纯css实现</small></h1>
<div class="row">
<div class="col9">
<pre><div class="progress"><br><div class="bar" style="width:50%;">
</div>
</div></pre>
</div>
<div class="col9">
<h2>默认提示风格</h2>
<div class="progress">
<div class="bar" style="width:50%;"></div>
</div>
<h2>格子状</h2>
<div class="progress striped">
<div class="bar" style="width:50%;"></div>
</div>
<h2>动态滚动</h2>
<div class="progress striped active">
<div class="bar" style="width:50%;"></div>
</div>
<h2>成功</h2>
<div class="progress success">
<div class="bar" style="width:50%;"></div>
</div>
<h2>警告</h2>
<div class="progress warning">
<div class="bar" style="width:50%;"></div>
</div>
<h2>危险</h2>
<div class="progress danger">
<div class="bar" style="width:50%;"></div>
</div>
</div>
</div>
</div>
<div class="part" id="well">
<h1 class="phead">消息墙<small>突出展示一些信息</small></h1>
<div class="row">
<div class="col9">
<pre><div class="well"><br>...
</div></pre>
</div>
<div class="col9">
<div class="well">
消息墙，可以突出展示一些信息 </div>
</div>
</div>
</div>
<div class="part" id="masthead">
<h1 class="phead">masthead<small>突出展示一些信息</small></h1>
<div class="row">
<div class="col9">
<pre><div class="masthead"><br><h1>Slicy</h1><br><div class="lead">国产响应式css框架</div><br><div class="social">兼容ie6，ie7，ie8，firefox，chrome等浏览器</div>
</div></pre>
</div>
<div class="col9">
<div class="masthead">
<h1>Slicy</h1>
<div class="lead">国产响应式css框架</div>
<div class="social">兼容ie6，ie7，ie8，firefox，chrome等浏览器</div>
</div>
</div>
</div>
</div>
<div class="part" id="timeline">
<h1 class="phead">时间轴<small>时间线（timeline）是将一系列按照时间发生的事件拖放在一条直线上，来使用户直观的看出事件的先后关系。时间线一词还用来形容按照时间排列的年度报表或者其他文档。 </small></h1>
<div class="row">
<div class="col9">
<pre><ul class="timeline"><br> <li class="event"><br> <label></label><br> <div class="thumb" style="background-image:url(imgs/darthvader.jpg);"><br> <span>19 Nov</span><br> </div><br> <div class="inner"><br> <h3>I find your lack of faith disturbing</h3><br> <p>Don't be too proud of this technological terror you've constructed. The ability to destroy a planet is insignificant next to the power of the Force. The plans you refer to will soon be back in our hands. A tremor in the Force. The last time I felt it was in the presence of my old master. Escape is not his plan. I must face him. Alone.</p><br> </div><br> </li><br> <li class="event"><br> <label></label><br> <div class="thumb" style="background-image:url(imgs/darthvader.jpg);"><br> <span>19 Nov</span><br> </div><br> <div class="inner"><br> <h3>I find your lack of faith disturbing</h3><br> <p>Don't be too proud of this technological terror you've constructed. The ability to destroy a planet is insignificant next to the power of the Force. The plans you refer to will soon be back in our hands. A tremor in the Force. The last time I felt it was in the presence of my old master. Escape is not his plan. I must face him. Alone.</p><br> </div><br> </li><br> </ul></pre>
</div>
<div class="col9">
<ul class="timeline">
<li class="event">
<label></label>
<div class="thumb" style="background-image:url(imgs/darthvader.jpg);">
<span>19 Nov</span> </div>
<div class="inner">
<h3>I find your lack of faith disturbing</h3>
<p>Don't be too proud of this technological terror you've constructed. The ability to destroy a planet is insignificant next to the power of the Force. The plans you refer to will soon be back in our hands. A tremor in the Force. The last time I felt it was in the presence of my old master. Escape is not his plan. I must face him. Alone.</p>
</div>
</li>
<li class="event">
<label></label>
<div class="thumb" style="background-image:url(imgs/darthvader.jpg);">
<span>19 Nov</span> </div>
<div class="inner">
<h3>I find your lack of faith disturbing</h3>
<p>Don't be too proud of this technological terror you've constructed. The ability to destroy a planet is insignificant next to the power of the Force. The plans you refer to will soon be back in our hands. A tremor in the Force. The last time I felt it was in the presence of my old master. Escape is not his plan. I must face him. Alone.</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<!--pricing-->
<h2 id="pricing">价目表</h2>
<div class="docs">
<div class="docs-head">example</div>
<div class="docs-body">
<!--demo-->
<div class="pricing-tables">
<div class="pricing-box">
<div class="pricing-head">
Smart Starter
</div>
<div class="pricing-body">
<ul>
<li>I asked my mother</li>
<li>what will I be</li>
<li>will I be pretty</li>
<li>will I be rich</li>
</ul>
</div>
<div class="pricing-foot">
<h3>Price per month</h3>
<p><a href="#" class="button">Contact</a></p>
</div>
</div>
<div class="pricing-box large">
<div class="pricing-head">
Smart Medium
</div>
<div class="pricing-body">
<ul>
<li>I asked my mother</li>
<li>what will I be</li>
<li>will I be pretty</li>
<li>will I be rich</li>
</ul>
</div>
<div class="pricing-foot">
<h3>Price per month</h3>
<p><a href="#" class="button">Contact</a></p>
</div>
</div>
<div class="pricing-box">
<div class="pricing-head">
Smart Business
</div>
<div class="pricing-body">
<ul>
<li>I asked my mother</li>
<li>what will I be</li>
<li>will I be pretty</li>
<li>will I be rich</li>
</ul>
</div>
<div class="pricing-foot">
<h3>Price per month</h3>
<p><a href="#" class="button">Contact</a></p>
</div>
</div>
</div>
<!--//demo-->
</div>
<div class="doc-foot">
<pre><div class="pricing-tables"><br> <div class="pricing-box"><br> <div class="pricing-head"><br> Smart Starter<br> </div><br> <div class="pricing-body"><br> <ul><br> <li>I asked my mother</li><br> <li>what will I be</li><br> <li>will I be pretty</li><br> <li>will I be rich</li><br> </ul><br> </div><br> <div class="pricing-foot"><br> <h3>Price per month</h3><br> <p><a href="#" class="button">Contact</a></p><br> </div><br> </div><br> <div class="pricing-box large"><br> <div class="pricing-head"><br> Smart Medium <br> </div><br> <div class="pricing-body"><br> <ul><br> <li>I asked my mother</li><br> <li>what will I be</li><br> <li>will I be pretty</li><br> <li>will I be rich</li><br> </ul><br> </div><br> <div class="pricing-foot"><br> <h3>Price per month</h3><br> <p><a href="#" class="button">Contact</a></p><br> </div><br> </div><br> <div class="pricing-box"><br> <div class="pricing-head"><br> Smart Business<br> </div><br> <div class="pricing-body"><br> <ul><br> <li>I asked my mother</li><br> <li>what will I be</li><br> <li>will I be pretty</li><br> <li>will I be rich</li><br> </ul><br> </div><br> <div class="pricing-foot"><br> <h3>Price per month</h3><br> <p><a href="#" class="button">Contact</a></p><br> </div><br> </div><br> </div></pre>
</div>
</div>
<!--//pricing-->
<!--counter-->
<h2 id="counter">计数器</h2>
<div class="docs">
<div class="docs-head">example</div>
<div class="docs-body">
<!--demo-->
<div class="counter">
<span class="counter-text">
Slicy累计
</span>
<span class="counter-btns">
<i>1</i><i>3</i><i>2</i><i>6</i><i>6</i><i>8</i><span class="counter-btns-lt"></span>
</span>
<span class="counter-text">
次下载
</span>
</div>
<!--//demo-->
</div>
<div class="doc-foot">
<pre class="prettyprint linenums"><div class="counter"><br><span class="counter-text"><br> Slicy累计<br></span><br><span class="counter-btns"><br><i>1</i><i>3</i><i>2</i><i>6</i><i>6</i><i>8</i><span class="counter-btns-lt"></span><br></span><br><span class="counter-text"><br> 下载<br></span><br></div></pre>
</div>
</div>
<!--//counter-->
</div>
</div>
</div>
<div class="wrapper footer">
<p>© CopyRight 2002-2013, Qietu Network Technology Co., Ltd. All Rights Reserved.<br/>
代码基于<a href="http://www.apache.org/licenses/LICENSE-2.0" rel="nofollow" target="_blank">Apache License v2.0</a>, 文档基于创作共享的 <a href="http://creativecommons.org/licenses/by-nc-sa/2.5/cn/" rel="nofollow" target="_blank">署名-非商业使用-相同方 式分享 2.5</a> 协议发布</p>
</div>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手