以下内容为网站自带CSS样式及用法(适合有html基础者)

每行可以被分成24个单元格，单元格可以任意合并、组合使用！

2
2
2
2
2
2
2
2
2
2
2
2
8
8
8
12
12
6
6
6
6
6
8
5
5
24

默认的网格系统提供在HTML5CMS！利用 24 动态列 呈现出在任何宽度。当浏览器窗口宽度低于767px时，单元格内容将垂直排列。

  1. <div class="row">  
  2.   <div class="col grid_8">...</div>  
  3.   <div class="col grid_16">...</div>  
  4. </div>  

如上所示，基本的布局可以创建两个“列”，每一行我们定义了不同宽度，基于动态列系统的24格基本列。

编号样式

编号样式一

<ul class="bullets">

  • 大海原创汉化
  • 大海原创汉化
  • 大海原创汉化
  • 大海原创汉化
  • 大海原创汉化
  • 大海原创汉化
  • 大海原创汉化
  • 大海原创汉化

编号样式二

<ul class="check">

  • 大海全景传煤
  • 大海全景传煤
  • 大海全景传煤
  • 大海全景传煤
  • 大海全景传煤
  • 大海全景传煤
  • 大海全景传煤
  • 大海全景传煤

编号样式三

<ul class="star">

  • 大海原创汉化
  • 大海原创汉化
  • 大海原创汉化
  • 大海原创汉化
  • 大海原创汉化
  • 大海原创汉化
  • 大海原创汉化
  • 大海原创汉化

编号样式四

<ol class="numbers">

  1. 大海全景传煤
  2. 大海全景传煤
  3. 大海全景传煤
  4. 大海全景传煤
  5. 大海全景传煤
  6. 大海全景传煤
  7. 大海全景传煤
  8. 大海全景传煤

标签样式

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

标签样式源代码

  1. <span class="label label-ok">your text</span>  
  2. <span class="label label-info">your text</span>  
  3. <span class="label label-alert">your text</span>  
  4. <span class="label label-error">your text</span>  

进度条样式

进度条样式源代码

  1. <div class="progress-bar blue">      
  2.   <div style="width:20%"></div>      
  3. </div>     
  4. <div class="progress-bar yellow">      
  5.   <div style="width:40%"></div>      
  6. </div>     
  7. <div class="progress-bar green">      
  8.   <div style="width:60%"></div>      
  9. </div>     
  10. <div class="progress-bar red">      
  11.   <div style="width:80%"></div>      
  12. </div>  

选项卡组件

Labore indoctum ullamcorper et his. volumus corpora verterem cum in, has in maiorum repudiare disputationi. Sed electram aliquando disputando ad.
Labore indoctum ullamcorper et his. volumus corpora verterem cum in, has in maiorum repudiare disputationi. Sed electram aliquando disputando ad.
Labore indoctum ullamcorper et his. volumus corpora verterem cum in, has in maiorum repudiare disputationi. Sed electram aliquando disputando ad.

选项卡组件源代码

  1. <ul class="tabs">  
  2.   <li><a data-title="tab1" href="#">Tab 1</a></li>  
  3.   <li><a data-title="tab2" href="#">Tab 2</a></li>  
  4.   <li><a data-title="tab3" href="#">Tab 3</a></li>  
  5. </ul>  
  6. <div class="tab-content clearfix">  
  7.   <div id="tab1"> Tab 1 content... </div>  
  8.   <div id="tab2"> Tab 2 content... </div>  
  9.   <div id="tab3"> Tab 3 content... </div>  
  10. </div>  

手风琴组件

Our Clients

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas neque diam, luctus at laoreet in, auctor ut tellus. Etiam enim lacus, ornare et tempor, rhoncus rhoncus sem.

Aliquam volutpat arcu et nibh mollis eleifend pharetra lorem scelerisque. Donec vel enim purus, id viverra neque. Cras in velit ante, eget pellentesque sem. Duis tincidunt erat quam. Etiam placerat sapien elit.

Our Mission

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas neque diam, luctus at laoreet in, auctor ut tellus. Etiam enim lacus, ornare et tempor, rhoncus rhoncus sem.

Aliquam volutpat arcu et nibh mollis eleifend pharetra lorem scelerisque. Donec vel enim purus, id viverra neque. Cras in velit ante, eget pellentesque sem. Duis tincidunt erat quam. Etiam placerat sapien elit.

Our Company

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas neque diam, luctus at laoreet in, auctor ut tellus. Etiam enim lacus, ornare et tempor, rhoncus rhoncus sem.

Aliquam volutpat arcu et nibh mollis eleifend pharetra lorem scelerisque. Donec vel enim purus, id viverra neque. Cras in velit ante, eget pellentesque sem. Duis tincidunt erat quam. Etiam placerat sapien elit.

手风琴组件源代码

  1. <div id="accordion clearfix">  
  2.   <div class="accowrap">  
  3.     <h4>Our Clients<span class="chevron"></span></h4>  
  4.     <div class="acco-content">  
  5.       <p>Aliquam volutpat arcu ....</p>  
  6.     </div>  
  7.   </div>  
  8.   <div class="accowrap">  
  9.     <h4>Our Mission<span class="chevron"></span></h4>  
  10.     <div class="acco-content">  
  11.       <p>Aliquam volutpat arcu ...</p>  
  12.     </div>  
  13.   </div>  
  14.   <div class="accowrap">  
  15.     <h4>Our Company<span class="chevron"></span></h4>  
  16.     <div class="acco-content">  
  17.       <p>Aliquam volutpat arcu ...</p>  
  18.     </div>  
  19.   </div>  
  20. </div>  

跑马灯组件

Your title goes here

  • Labore indoctum ullamcorper et his. volumus corpora verterem cum in, has in maiorum repudiare disputationi. Sed electram aliquando disputando ad.Autem comprehensam et duo. Sed et dicunt commodo qualisque. Ut vix eius iudico.
  • Labore indoctum ullamcorper et his. volumus corpora verterem cum in, has in maiorum repudiare disputationi. Sed electram aliquando disputando ad.Autem comprehensam et duo. Sed et dicunt commodo qualisque. Ut vix eius iudico.
  • Labore indoctum ullamcorper et his. volumus corpora verterem cum in, has in maiorum repudiare disputationi. Sed electram aliquando disputando ad.Autem comprehensam et duo. Sed et dicunt commodo qualisque. Ut vix eius iudico.

跑马灯组件源代码

  1. <div class="carousel clearfix">  
  2.   <ul class="slides">  
  3.     <li>Labore....</li>  
  4.     <li>Labore....</li>  
  5.     <li>Labore....</li>  
  6.     ...  
  7.   </ul>  
  8. </div>  

消息框

Success!Eum ad enim laoreet graecis, ad vel sumo justo doming.
Alert!Eum ad enim laoreet graecis, ad vel sumo justo doming.
Info!Eum ad enim laoreet graecis, ad vel sumo justo doming.
Error!Eum ad enim laoreet graecis, ad vel sumo justo doming.

消息框源代码

  1. <div class="msgOk"> <span>Success!</span>Your content ...</div>  
  2. <div class="msgAlert"> <span>Alert!</span>Your content ...</div>  
  3. <div class="msgInfo"> <span>Info!</span>Your content ...</div>  
  4. <div class="msgError"> <span>Error!</span>Your content ...</div>  

自适应表格

# Sonet dus Eirmod an
1 Te natum eruditi Ex of modus pri
2 Te natum eruditi Ex of modus pri
3 Te natum eruditi Ex of modus pri
4 Te natum eruditi Ex of modus pri
5 Te natum eruditi Ex of modus pri

自适应表格源代码

  1. <table class="datatable">    
  2.   <thead>    
  3.     <tr>    
  4.       <th>Sonet dus</th>    
  5.     </tr>    
  6.   </thead>    
  7.   <tbody>    
  8.     <tr>    
  9.       <td>Ex of modus pri</td>    
  10.     </tr>    
  11.     <tr>    
  12.       <td>Ex of modus pri</td>    
  13.     </tr>    
  14.   </tbody>    
  15. </table>    

按扭样式

Normal Button Red Button Blue Button

Green Button Yellow Button Orange Button

按扭样式源代码

  1. <a href="#" class="button">Normal Button</a>  
  2. <a href="#" class="button butred">Red Button</a>  
  3. <a href="#" class="button butblue">Blue Button</a>  
  4. <a href="#" class="button butgreen">Green Button</a>  
  5. <a href="#" class="button butyellow">Yellow Button</a>  
  6. <a href="#" class="button butorange">Orange Button</a>  

盒子样式

<div class="box"> ... </div> Autem comprehensam et duo. Sed et dicunt commodo qualisque. Ut vix eius iudico.
<div class="box bluebox"> ... </div> Autem comprehensam et duo. Sed et dicunt commodo qualisque. Ut vix eius iudico.
<div class="box redbox"> ... </div> Autem comprehensam et duo. Sed et dicunt commodo qualisque. Ut vix eius iudico.
<div class="box greenbox"> ... </div> Autem comprehensam et duo. Sed et dicunt commodo qualisque. Ut vix eius iudico.
<div class="box whitebox"> ... </div> Autem comprehensam et duo. Sed et dicunt commodo qualisque. Ut vix eius iudico.

图像灯箱

视频灯箱

图像/视频 灯箱 代码

  1. Image  
  2. <a href="images/pages/demo5.jpg" class="fancybox zoom">  
  3.   <img src="images/pages/thumb_demo5.jpg" />  
  4. </a>   
  5. Video  
  6. <a href="http://vimeo.com/29193046" data-media="media" class="video zoom">  
  7.   <img src="images/pages/thumb_demo6.jpg" />  
  8. </a>  
返回顶部