头部告示黄色区域引人注目
<div class="spring">
<div class="wrapper">
这是一段警告
<del>×</del>
</div>
</div>
歌词来自《Whatever Will Be, Will Be》
When I was just a little girl,
I asked my mother,
"What will I be?
Will I be pretty?
Will I be rich?"
<p class="bdr bdr-red txt-red pd-small">When I was just a little girl,</p>
<p class="bdr bdr-yellow txt-yellow pd-small">I asked my mother, </p>
<p class="bdr bdr-blue txt-blue pd-small">"What will I be?</p>
<p class="bdr bdr-green txt-green pd-small">Will I be pretty?</p>
<p class="bdr pd-small">Will I be rich?"</p>
无色 添加class="naver unstyled"调用
<div class="naver">
<div class="wrapper">
<div class="logo">
</div>
<div class="module">
<ul>
<li>
<strong><a href="#" class="selected">菜单1</a></strong>
</li>
<li>
<strong><a href="###">菜单2</a></strong>
<div class="droper">
<a href="#">子菜单1</a>
<a href="#" target="_blank">子菜单2</a>
<a href="#" target="_blank">子菜单3</a>
<a href="#" target="_blank">子菜单4</a>
<a href="#" target="_blank">子菜单5</a>
</div>
</li>
</ul>
</div>
<div class="sub">
<a href="#">例子</a>
<a href="#">关于</a>
</div>
</div>
</div>
带js的选项卡效果
<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">
xxxxxxxx
</div>
<div class="body" id="t2" style="display:none;">
sssssssss
</div>
<div class="body" id="t3" style="display:none;">
sssssss
</div>
<div class="body" id="t4" style="display:none;">
ssss
</div>
</div>
侧边栏菜单，常用于子菜单的展示
<ul class="sidebar">
<li class="selected"> <a href="#">栏目</a></li> <li><a href="#">菜单</a></li> <li><a href="#">菜单</a></li>
</ul>
<div class="current"> <a href="#">首页</a>> <a href="#">概述</a>> <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 unstyled"
| 默认 | <span class="label">默认</span> |
| 成功 | <span class="label success">成功</span> |
| 默认 | <span class="label warning">警告</span> |
| 默认 | <span class="label error">错误</span> |
不同的提示信息是不同的颜色，容易理解
<div class="alert">
<strong>提示信息！</strong>这是一段普通的提示信息描述 </div>
<div class="progress">
<div class="bar" style="width:50%;"> </div> </div>
突出展示一些信息
<div class="well">
... </div>
突出展示一些信息
<div class="masthead">
<h1>slicy</h1>
<div class="lead">国产响应式css框架</div>
<div class="social">兼容ie6，ie7，ie8，firefox，chrome等浏览器</div> </div>
时间线（timeline）是将一系列按照时间发生的事件拖放在一条直线上，来使用户直观的看出事件的先后关系。时间线一词还用来形容按照时间排列的年度报表或者其他文档。
<ul class="timeline">
<li class="event">
<label></label>
<div class="thumb" style="background-image:url(imgs/darthvader.webp);">
<span>19 Nov</span>
</div>
<div class="inner">
</div>
</li>
<li class="event">
<label></label>
<div class="thumb" style="background-image:url(imgs/darthvader.webp);">
<span>19 Nov</span>
</div>
<div class="inner">
</div>
</li>
</ul>
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.
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.
<div class="pricing-tables">
<div class="pricing-box">
<div class="pricing-head">
</div>
<div class="pricing-body">
</div>
<div class="pricing-foot">
</div>
</div>
<div class="pricing-box large">
<div class="pricing-head">
</div>
<div class="pricing-body">
</div>
<div class="pricing-foot">
</div>
</div>
<div class="pricing-box">
<div class="pricing-head">
</div>
<div class="pricing-body">
</div>
<div class="pricing-foot">
</div>
</div>
</div>
<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>
