slicy css組件

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

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

<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="#">關(guān)于</a>
        </div>
    </div>
</div>

選項(xiàng)卡

帶js的選項(xiàng)卡效果

演示

代碼片段

<div class="taber">
           		<div class="head">
               	  <a href="#" lang="t1" class="selected">典故</a>
               	  <a href="#" lang="t2">關(guān)于</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>

側(cè)邊欄

側(cè)邊欄菜單，常用于子菜單的展示

<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="#">首頁(yè)</a>&gt; 
<a href="#">概述</a>&gt;
<span>組件</span>
</div>

無(wú)樣式

引用class="current unstyled"

分頁(yè)

通用而簡(jiǎn)潔的分頁(yè)樣式

<div class="pager">
<a href="#">首頁(yè)</a>
<a href="#">上一頁(yè)</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="#">下一頁(yè)</a>
<a href="#">尾頁(yè)</a>
</div>

無(wú)樣式分頁(yè)

引用樣式class="pager unstyled"

tag標(biāo)簽

默認(rèn)	<span class="label">默認(rèn)</span>
成功	<span class="label success">成功</span>
默認(rèn)	<span class="label warning">警告</span>
默認(rèn)	<span class="label error">錯(cuò)誤</span>

提示信息

不同的提示信息是不同的顏色，容易理解

<div class="alert">
<strong>提示信息！</strong>這是一段普通的提示信息描述            
</div>

默認(rèn)提示風(fēng)格

正確提示風(fēng)格

錯(cuò)誤提示風(fēng)格

進(jìn)度條

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

默認(rèn)提示風(fēng)格

格子狀

動(dòng)態(tài)滾動(dòng)

成功

警告

危險(xiǎn)

消息墻

突出展示一些信息

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

刊頭

突出展示一些信息

<div class="masthead">
<h1>slicy</h1>
<div class="lead">國(guó)產(chǎn)響應(yīng)式css框架</div>
<div class="social">兼容ie6，ie7，ie8，firefox，chrome等瀏覽器</div>
</div>

時(shí)間軸

時(shí)間線（timeline）是將一系列按照時(shí)間發(fā)生的事件拖放在一條直線上，來(lái)使用戶直觀的看出事件的先后關(guān)系。時(shí)間線一詞還用來(lái)形容按照時(shí)間排列的年度報(bào)表或者其他文檔。

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

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

                    </div>
                </li>
            </ul>

• 19 Nov

  I find your lack of faith disturbing

  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.

• 19 Nov

  I find your lack of faith disturbing

  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.

價(jià)目表

演示

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

計(jì)數(shù)器

演示

<div class="counter">
<span class="counter-text">
   	slicy累計(jì)
</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>