代码拉取完成，页面将自动刷新
<!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">12列栅格</a> </li>
<li class="selected"> <a href="base.html" class="selected">基础CSS</a> </li>
<li> <a href="widgets.html">组件</a> </li>
<li> <a href="javascript.html">JS插件</a> </li>
</ul>
</div>
<div class="sub"> <a href="http://www.qietu.com/?slicy">切图网</a> </div>
</div>
</div>
<div class="heading">
<div class="wrapper">
<h1>基础CSS</h1>
<h2>通过重置一些不兼容的css代码，能够避免一些不必要的跨浏览器兼容问题，<br>定义了一些常用的css
类，能够用于快速开发，也能统一网页的风格。</h2>
</div>
</div>
<div class="wrapper">
<div class="row">
<div class="col3">
<ul class="sidebar nojs">
<li class="selected">
<a href="#typography">排版</a>
<ul>
<li class="selected"><a href="#paragraph">段落排版</a></li>
<li><a href="#strong">加粗</a></li>
<li><a href="#underline">下划线</a></li>
<li><a href="#italic">斜体</a></li>
<li><a href="#line-through">删除线</a></li>
<li><a href="#sup">上标和下标</a></li>
<li><a href="#big">文字加大，缩小</a></li>
<li><a href="#blockquote">引用</a></li>
<li><a href="#abbr">标签</a></li>
<li><a href="#list">列表</a></li>
</ul>
</li>
<li><a href="#code">代码</a></li>
<li><a href="#table">表格</a></li>
<li><a href="#form">表单</a></li>
<li><a href="#button">按钮</a></li>
<li><a href="#other">其他</a>
<ul>
<li><a href="#text">文字</a>
<li><a href="#postion">位置</a>
<li><a href="#background">背景</a>
<li><a href="#border">边框</a>
<li><a href="#image">图片</a>
</ul>
</li>
</ul>
</div>
<div class="col9">
<h1 id="typography">排版<small></small></h1>
<h4>默认设置,段落,标题,文本，对字体颜色，锚文本的下划线，颜色，字体做了重写，均采用了最符合中国网站体验的12号字体和 Verdana, Arial, Helvetica, sans-serif 字体。行距22px。这些重写参考了，盛大，腾讯，百度，新浪等众多网站对css重写的选择。</h4>
<div class="docs">
<div class="docs-head">example</div>
<div class="docs-body">
<!--demo-->
<p>采用了符合中国人阅读习惯的font-size:12px像素字体，行距line-height:22px像素。字体font-family:Verdana,Arial,Helvetica,sans-serif, body背景background:white;</p>
<p>级联样式表（Cascading Style Sheet）简称“CSS”，通常又称为“风格样式表（Style Sheet）”，它是用来进行网页风格设计的。比如，如果想让链接字未点击时是蓝色的，当鼠标移上去后字变成红色的且有下划线，这就是一种风格。通过设立样式表，可以统一地控制HTML中各标志的显示属性。</p>
<!--//demo-->
</div>
<div class="doc-foot">
<pre class="prettyprint"><p>采用了符合中国人阅读习惯的font-size:12px像素字体，行距line-height:22px像素。字体font-family:Verdana,Arial,Helvetica,sans-serif, body背景background:white;</p></pre>
</div>
</div>
<h2 id="paragraph">段落排版</h2>
<h4>h1~h6标签同strong标签一样在seo中具有提高文字权重的效果</h4>
<div class="docs">
<div class="docs-head">example</div>
<div class="docs-body">
<!--demo-->
<h1>我是h1标签，在seo中我拥有最高的权重</h1>
<h2>我是h2标签，在seo中我拥有仅次于h1标签的权重</h2>
<h3>我是h3标签，在seo中我拥有仅次于h1,h2标签的权重</h3>
<h4>我是h4标签，在seo中我拥有仅次于h1,h2,h3标签的权重</h4>
<h5>我是h5标签，在seo中我拥有仅次于h1,h2,h3,h4标签的权重</h5>
<!--//demo-->
</div>
<div class="doc-foot">
<pre class="prettyprint linenums"><h1>我是h1标签，在seo中我拥有最高的权重</h1><br><h2>我是h2标签，在seo中我拥有仅次于h1标签的权重</h2><br><h3>我是h3标签，在seo中我拥有仅次于h1,h2标签的权重</h3><br><h4>我是h4标签，在seo中我拥有仅次于h1,h2,h3标签的权重</h4><br><h5>我是h5标签，在seo中我拥有仅次于h1,h2,h3,h4标签的权重</h5></pre>
</div>
</div>
<h2 id="strong">加粗</h2>
<h4>通过原生的<strong></strong>标签即可加粗,css加粗为font-weight:bold;<strong>...</strong> <b>在w3c新标准中已经不建议使用了</h4>
<div class="docs">
<div class="docs-head">example</div>
<div class="docs-body">
<!--demo-->
<strong>这是一段加粗的文字</strong>
<!--//demo-->
</div>
<div class="doc-foot">
<pre><strong>这是一段加粗的文字</strong></pre>
</div>
</div>
<h2 id="underline">下划线</h2>
<h4>可以通过css的text-decoration:underline; 实现同样的效果</h4>
<div class="docs">
<div class="docs-head">example</div>
<div class="docs-body">
<!--demo-->
<u>这是一段下划线的文字</u>
<!--//demo-->
</div>
<div class="doc-foot">
<pre><u>这是一段下划线的文字</u></pre>
</div>
</div>
<h2 id="italic">斜体</h2>
<h4>可以通过css的font-style:italic;实现同样的效果，<em>...</em> <i>在w3c新标准中已经不建议使用了</h4>
<div class="docs">
<div class="docs-head">example</div>
<div class="docs-body">
<!--demo-->
<em>这是一段斜体的文字</em>
<!--//demo-->
</div>
<div class="doc-foot">
<pre><em>这是一段斜体的文字</em></pre>
</div>
</div>
<h2 id="line-through">删除线</h2>
<h4>可以通过css的<code>text-decoration:line-through;</code>实现同样的效果</h4>
<div class="docs">
<div class="docs-head">example</div>
<div class="docs-body">
<!--demo-->
<del>这是一段删除线文字</del>
<!--//demo-->
</div>
<div class="doc-foot">
<pre><del>这是一段删除线文字</del></pre>
</div>
</div>
<h2 id="sup">上标和下标</h2>
<div class="docs">
<div class="docs-head">example</div>
<div class="docs-body">
<!--demo-->
<p>上标的文字在文字位于右上方显示<sup>这是一段上标文字</sup></p>
<p>下标的文字在文字位于右下方显示<sup>这是一段下标文字</sup></p>
<!--//demo-->
</div>
<div class="doc-foot">
<pre><p>上标的文字在文字位于右上方显示<sup>这是一段上标文字</sup></p><br><p>下标的文字在文字位于右下方显示<sup>这是一段下标文字</sup></p></pre>
</div>
</div>
<h2 id="big">文字加大，缩小</h2>
<div class="docs">
<div class="docs-head">example</div>
<div class="docs-body">
<!--demo-->
<p><big>这是一段加大号文字</big></p>
<p><small>这是一段小号文字</small></p>
<!--//demo-->
</div>
<div class="doc-foot">
<pre><p><big>这是一段加大号文字</big></p><br><p><small>这是一段小号文字</small></p></pre>
</div>
</div>
<h2 id="blockquote">引用</h2>
<h4>引用常常被用于评论中，在网页中非常常见，用<code><blockquote></code>就可以轻松实现一段美观的引用。</h4>
<div class="docs">
<div class="docs-head">xxxxxxx</div>
<div class="docs-body">
<!--demo-->
<blockquote>级联样式表（Cascading Style Sheet）简称“CSS”，通常又称为“风格样式表（Style Sheet）”，它是用来进行网页风格设计的。比如，如果想让链接字未点击时是蓝色的，当鼠标移上去后字变成红色的且有下划线，这就是一种风格。
<blockquote>通过设立样式表，可以统一地控制HTML中各标志的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表，可以扩充精确指定网页元素位置，外观以及创建特殊效果的能力。</blockquote>
</blockquote>
<!--//demo-->
</div>
<div class="doc-foot">
<pre><blockquote>级联样式表（Cascading Style Sheet）简称“CSS”，通常又称为“风格样式表（Style Sheet）”，它是用来进行网页风格设计的。比如，如果想让链接字未点击时是蓝色的，当鼠标移上去后字变成红色的且有下划线，这就是一种风格。<br> <blockquote>通过设立样式表，可以统一地控制HTML中各标志的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表，可以扩充精确指定网页元素位置，外观以及创建特殊效果的能力。</blockquote><br> </blockquote></pre>
</div>
</div>
<h2 id="abbr">abbr</h2>
<h4>标签常常用于关键字tag等地方，用<code><abbr></code>就可以轻松实现。</h4>
<div class="docs">
<div class="docs-head">xxxxxxx</div>
<div class="docs-body">
<!--demo-->
<abbr>css3</abbr> <abbr>html5</abbr>
<!--//demo-->
</div>
<div class="doc-foot">
<pre><abbr>css3</abbr> <abbr>html5</abbr></pre>
</div>
</div>
<h2 id="list">列表</h2>
<h4>无序列表<code>ul</code></h4>
<div class="docs">
<div class="docs-head">example</div>
<div class="docs-body">
<!--demo-->
<ul>
<li>无序列表是这样表现的</li>
<li>无序列表是点点点</li>
<li>无序列表是没有罗马文字的</li>
</ul>
<!--//demo-->
</div>
<div class="doc-foot">
<pre><ul><br> <li>无序列表是这样表现的</li><br> <li>无序列表是点点点</li><br> <li>无序列表是没有罗马文字的</li><br> </ul></pre>
</div>
</div>
<h2> 有序列表<code>ol</code></h2>
<div class="docs">
<div class="docs-head">example</div>
<div class="docs-body">
<!--demo-->
<ol>
<li>有序列表是这样表现的</li>
<li>有序列表不是是点点点</li>
<li>有序列表是有罗马文字的</li>
</ol>
<!--//demo-->
</div>
<div class="doc-foot">
<pre><ol><br> <li>有序列表是这样表现的</li><br> <li>有序列表不是是点点点</li><br> <li>有序列表是有罗马文字的</li><br> </ol></pre>
</div>
</div>
<h2>没有样式的<code><ul class="unstyled"></code></h2>
<div class="docs">
<div class="docs-head">example</div>
<div class="docs-body">
<!--demo-->
<ul class="unstyled">
<li>没有样式是这样表现的</li>
<li>没有样式的列表什么也没有</li>
<li>没有样式比较干净</li>
</ul>
<!--//demo-->
</div>
<div class="doc-foot">
<pre><ul class="unstyled"><br> <li>没有样式是这样表现的</li><br> <li>没有样式的列表什么也没有</li><br> <li>没有样式比较干净</li><br> </ul></pre>
</div>
</div>
<h2>圈圈<code><ul class="circle"></code></h2>
<div class="docs">
<div class="docs-head">example</div>
<div class="docs-body">
<!--demo-->
<ul class="circle">
<li>圈圈列表是这样表现的</li>
<li>圈圈列表是圈圈的</li>
<li>圈圈列表跟点点很相似</li>
</ul>
<!--//demo-->
</div>
<div class="doc-foot">
<pre><ul class="circle"><br> <li>圈圈列表是这样表现的</li><br> <li>圈圈列表是圈圈的</li><br> <li>圈圈列表跟点点很相似</li><br> </ul></pre>
</div>
</div>
<h2>方块<code><ul class="square"></code></h2>
<div class="docs">
<div class="docs-head">example</div>
<div class="docs-body">
<!--demo-->
<ul class="square">
<li>圈圈列表是这样表现的</li>
<li>圈圈列表是圈圈的</li>
<li>圈圈列表跟点点很相似</li>
</ul>
<!--//demo-->
</div>
<div class="doc-foot">
<pre><ul class="square"><br> <li>圈圈列表是这样表现的</li><br> <li>圈圈列表是圈圈的</li><br> <li>圈圈列表跟点点很相似</li><br> </ul></pre>
</div>
</div>
<h2>中文123<code><ul class="cjk"></code></h2>
<div class="docs">
<div class="docs-head">example</div>
<div class="docs-body">
<!--demo-->
<ul class="cjk">
<li>中文123样式是这样表现的</li>
<li>中文123样式的列表什么也没有</li>
<li>中文123样式是用汉字一二三排序的</li>
</ul>
<!--//demo-->
</div>
<div class="doc-foot">
<pre><ul class="cjk"><br> <li>中文123样式是这样表现的</li><br> <li>中文123样式的列表什么也没有</li><br> <li>中文123样式是用汉字一二三排序的</li><br> </ul></pre>
</div>
</div>
<h1 id="code">代码<small>代码区间</small></h1>
<h2>一行代码</h2>
<div class="docs">
<div class="docs-head">example</div>
<div class="docs-body">
<!--demo-->
<pre>body{ background:white;}</pre>
<!--//demo-->
</div>
<div class="doc-foot">
<pre><pre>body{ background:white;}</pre></pre>
</div>
</div>
<h2>多行代码</h2>
<div class="docs">
<div class="docs-head">example</div>
<div class="docs-body">
<!--demo-->
<pre><ol><li>body{</li><li>background:white;</li><li>font-size:13px;</li><li>line-height:22px;</li><li>}</li></ol>
</pre>
<!--//demo-->
</div>
<div class="doc-foot">
<pre><pre><ol><li>body{</li><li>background:white;</li><li>font-size:13px;</li><li>line-height:22px;</li><li>}</li></ol></pre></pre>
</div>
</div>
<h1 id="table">表格<small>表格的表框，间距等进行了重写让table更美观</small></h1>
<h2>带边框的表格<small>加上<code>class="table table-bordered"</code>即可实现带边框的表格</small></h2>
<div class="docs">
<div class="docs-head">example</div>
<div class="docs-body">
<!--demo-->
<table class="table table-bordered">
<tbody>
<tr>
<td>当我还是个小女孩</td>
<td>我问我妈妈</td>
<td>将来我会变成什么样子呢</td>
</tr>
</tbody>
<tbody>
<tr>
<td>会漂亮吗</td>
<td>会富有吗</td>
<td>她对我说：世事不可强求，顺其自然吧</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>当我长大并恋爱了</td>
<td>我问我的心上人</td>
<td>我们将来会怎么样呢</td>
</tr>
<tr>
<td>生活每天都美好吗</td>
<td>我的爱人对我说：</td>
<td>世事不可强求，顺其自然吧</td>
</tr>
</tfoot>
</table>
<!--//demo-->
</div>
<div class="doc-foot">
<pre><table class="table table-bordered"><br> <tbody><br> <tr><br> <td>当我还是个小女孩</td><br> <td>我问我妈妈</td><br> <td>将来我会变成什么样子呢</td><br> </tr><br> </tbody><br> <tbody><br> <tr><br> <td>会漂亮吗</td><br> <td>会富有吗</td><br> <td>她对我说：世事不可强求，顺其自然吧</td><br> </tr><br> </tbody><br> <tfoot><br> <tr><br> <td>当我长大并恋爱了</td><br> <td>我问我的心上人</td><br> <td>我们将来会怎么样呢</td><br> </tr><br> <tr><br> <td>生活每天都美好吗</td><br> <td>我的爱人对我说：</td><br> <td>世事不可强求，顺其自然吧</td><br> </tr><br> </tfoot><br></table></pre>
</div>
</div>
<h2>斑马表格<small>加上<code>class="table table-zebra"</code>即可实现斑马表格</small></h2>
<div class="docs">
<div class="docs-head">example</div>
<div class="docs-body">
<!--demo-->
<table width="100%" border="0" class="table table-zebra">
<tr>
<td>When I was just a little girl </td>
<td>I asked my mother</td>
<td>what will I be</td>
</tr>
<tr>
<td>will I be pretty</td>
<td>will I be rich</td>
<td>here\'s what he said to me</td>
</tr>
<tr>
<td>que sera sera</td>
<td>whatever will be</td>
<td>will be</td>
</tr>
</table>
<!--//demo-->
</div>
<div class="doc-foot">
<pre><table width="100%" border="0" class="table table-zebra"></table></pre>
</div>
</div>
<h1 id="form">表单</h1>
<h4>对文本框等进行了重写，通过美化一些表单元素默认样式，例如文本框，按钮，下拉菜单等，让表单更美观。通过placeholder属性来完成，文本框的默认值，鼠标点击消失，失去光标，默认值恢复的效果。（改效果在firefox浏览器下可见）</h4>
<div class="docs">
<div class="docs-head">example</div>
<div class="docs-body">
<!--demo-->
<form action="" method="get" enctype="multipart/form-data">
<fieldset>
<legend>注册表单</legend>
<div class="form-group">
<div class="form-icon">
fadf
</div>
<label class="form-label">姓名 <small>字符在3~9位</small></label>
<div class="form-input">
</div>
<input name="" type="text" placeholder="请填写真实的姓名">
<input name="" type="text" placeholder="请填写真实的姓名" class="text radius">
</div>
<p>
<label>自我介绍：</label>
<textarea name="textarea" id="textarea" cols="45" rows="5"></textarea>
</p>
<p>
<label>爱好：</label>
<input type="checkbox" name="checkbox" id="checkbox">
踢球
<input type="checkbox" name="checkbox" id="checkbox">
上网
<input type="checkbox" name="checkbox" id="checkbox">
冲浪 </p>
<p>
<label>性别：</label>
<input type="radio" name="radio" id="radio" value="radio">
男
<input type="radio" name="radio" id="radio" value="radio">
女 </p>
<p>
<label>学历：</label>
<select name="select" id="select">
<option value="1">大学/大专</option>
<option value="2">高中/中专</option>
<option>小学</option>
</select>
</p>
<p>
<label>文件域：</label>
<input type="file" name="fileField" id="fileField">
</p>
<p>
<label></label>
<input name="" type="submit" class="button blue" value="提交">
<input name="重置" type="reset" class="button" value="重置">
</p>
</fieldset>
</form>
<!--//demo-->
</div>
<div class="doc-foot">
<pre><form action="" method="get" enctype="multipart/form-data"><br> <fieldset><br> <legend>注册表单</legend><br> <p><br> <label>姓名 <small>字符在3~9位</small></label><br> <input name="" type="text" placeholder="请填写真实的姓名"><br> <input name="" type="text" placeholder="请填写真实的姓名" class="text radius"><br> </p><br> <p><br> <label>自我介绍：</label><br> <textarea name="textarea" id="textarea" cols="45" rows="5"></textarea><br> </p><br> <p><br> <label>爱好：</label><br> <input type="checkbox" name="checkbox" id="checkbox"><br> 踢球<br> <input type="checkbox" name="checkbox" id="checkbox"><br> 上网<br> <input type="checkbox" name="checkbox" id="checkbox"><br> 冲浪 </p><br> <p><br> <label>性别：</label><br> <input type="radio" name="radio" id="radio" value="radio"><br> 男<br> <input type="radio" name="radio" id="radio" value="radio"><br> 女 </p><br> <p><br> <label>学历：</label><br> <select name="select" id="select"><br> <option value="1">大学/大专</option><br> <option value="2">高中/中专</option><br> <option>小学</option><br> </select><br> </p><br> <p><br> <label>文件域：</label><br> <input type="file" name="fileField" id="fileField"><br> </p><br> <p><br> <label></label><br> <input name="" type="submit" class="button blue" value="提交"><br> <input name="重置" type="reset" class="button" value="重置"><br> </p><br> </fieldset><br> </form></pre>
</div>
</div>
<h1 id="button">按钮</h1>
<h4>对按钮或者a标签按钮的样式重写,css3按钮是指通过css3来实现的按钮的效果，css3纯css可以实现立体，渐变，阴影，圆角等很多种特效，如果把这些属性通过各种不同的方式组合在一起就能实现很多不同的炫酷的按钮效果。 <code><a class="button"></code> 或者 <code><input type="button" class="button"></code></h4>
<!--demo-->
<table width="100%" border="0" class="table table-bordered">
<tr>
<td width="17%">演示</td>
<td width="83%">代码</td>
</tr>
<tr>
<td><a href="#" class="button">默认</a></td>
<td><pre><a href="#" class="button">默认</a></pre></td>
</tr>
<tr>
<td><a href="#" class="button button-inverse">反向</a></td>
<td><pre><a href="#" class="button button-inverse">反向</a></pre></td>
</tr>
<tr>
<td><a href="#" class="button bg-red bg-inverse">红色</a></td>
<td><pre><a href="#" class="button bg-red bg-inverse">红色</a></pre></td>
</tr>
<tr>
<td><a href="#" class="button bg-blue bg-inverse">蓝色</a></td>
<td><pre><a href="#" class="button bg-blue bg-inverse">蓝色</a></pre></td>
</tr>
<tr>
<td><a href="#" class="button bg-green bg-inverse">绿色</a></td>
<td><pre><a href="#" class="button bg-green bg-inverse">绿色</a></pre></td>
</tr>
<tr>
<td><a href="#" class="button bg-yellow bg-inverse">黄色</a></td>
<td><pre><a href="#" class="button bg-yellow bg-inverse">黄色</a></pre></td>
</tr>
<tr>
<td><a href="#" class="button button-little">超小号</a></td>
<td><pre><a href="#" class="button button-little">小号</a></pre></td>
</tr>
<tr>
<td><a href="#" class="button button-small">小号</a></td>
<td><pre><a href="#" class="button button-small">小号</a></pre></td>
</tr>
<tr>
<td><a href="#" class="button button-medium">中号</a></td>
<td><pre><a href="#" class="button button-medium">中号</a></pre></td>
</tr>
<tr>
<td><a href="#" class="button button-large">大号</a></td>
<td><pre><a href="#" class="button button-large">大号</a></pre></td>
</tr>
<tr>
<td colspan="2"><a href="#" class="button button-xlarge">加大号</a></td>
</tr>
<tr>
<td colspan="2"><pre><a href="#" class="button button-xlarge">加大号</a></pre></td>
</tr>
</table>
<!--//demo-->
<h1 id="text">文字</h1>
<div class="docs">
<div class="docs-head">example</div>
<div class="docs-body">
<!--demo-->
<p class="text-red">当我还是个小女孩，</p>
<p class="text-yellow">我问妈妈</p>
<p class="text-blue">将来我会变成什么样子呢？</p>
<p class="text-green">会漂亮吗？</p>
<p>会富有吗？</p>
<p>她对我说：</p>
<p>世事不可强求</p>
<p>顺其自然吧</p>
<!--//demo-->
</div>
<div class="doc-foot">
<pre class="prettyprint linenums"><p class="text-red">当我还是个小女孩，</p><br><p class="text-yellow">我问妈妈</p><br><p class="text-blue">将来我会变成什么样子呢？</p><br><p class="text-green">会漂亮吗？</p><br><p>会富有吗？</p><br><p>她对我说：</p><br><p>世事不可强求</p><br><p>顺其自然吧</p></pre>
</div>
</div>
<h2 id="postion">文字位置</h2>
<div class="docs">
<div class="docs-head">example</div>
<div class="docs-body">
<!--demo-->
<p class="border text-left padding-small">当我还是个小女孩，我问妈妈，将来我会变成什么样子呢？</p>
<p class="border text-center padding-small">会漂亮吗？会富有吗？</p>
<p class="border text-right padding-small">她对我说：世事不可强求,顺其自然吧</p>
<p class="border text-justify padding-small">当我长大了，恋爱了，我问我的心上人，“我们将来会怎么样呢？我们的生活每天都会美好吗？”我的爱人对我说：“世事不可强求顺其自然吧。我们不能预见未来。世事不可强求顺其自然吧。”现在我有了自己的孩子，他们问我，“将来我会变成什么样子呢？会英俊吗？会富有吗？”我轻声地回答：“世事不可强求顺其自然吧。我们不能预见未来。世事不可强求顺其自然吧。”</p>
<!--//demo-->
</div>
<div class="doc-foot">
<pre class="prettyprint linenums"><p class="border text-left padding-small">当我还是个小女孩，我问妈妈，将来我会变成什么样子呢？</p><br><p class="border text-center padding-small">会漂亮吗？会富有吗？</p><br><p class="border text-right padding-small">她对我说：世事不可强求,顺其自然吧</p>
<p class="border text-justify padding-small">当我长大了，恋爱了，...世事不可强求顺其自然吧。”</p></pre>
</div>
</div>
<h2 id="background">背景色</h2>
<h4>歌词来自《Whatever Will Be, Will Be》</h4>
<div class="docs">
<div class="docs-head">example</div>
<div class="docs-body">
<!--demo-->
<p class="bg-red bg-inverse padding-small">When I was just a little girl,</p>
<p class="bg-yellow bg-inverse padding-small">I asked my mother, </p>
<p class="bg-blue bg-inverse padding-small">"What will I be?</p>
<p class="bg-green bg-inverse padding-small">Will I be pretty?</p>
<p>Will I be rich?"</p>
<p class="bg-red-light text-red padding-small">When I was just a little girl,</p>
<p class="bg-yellow-light text-yellow padding-small">I asked my mother, </p>
<p class="bg-blue-light text-blue padding-small">"What will I be?</p>
<p class="bg-green-light text-green padding-small">Will I be pretty?</p>
<p>Will I be rich?"</p>
<!--//demo-->
</div>
<div class="doc-foot">
<pre class="prettyprint linenums"><p class="bg-red bg-inverse padding-small">When I was just a little girl,</p><br><p class="bg-yellow bg-inverse padding-small">I asked my mother, </p><br><p class="bg-blue bg-inverse padding-small">"What will I be?</p><br><p class="bg-green bg-inverse padding-small">Will I be pretty?</p>
<p class="bg-red-light text-red padding-small">When I was just a little girl,</p><br><p class="bg-yellow-light text-yellow padding-small">I asked my mother, </p><br><p class="bg-blue-light text-blue padding-small">"What will I be?</p><br><p class="bg-green-light text-green padding-small">Will I be pretty?</p>
</pre>
</div>
</div>
<h2 id="border">边框</h2>
<h4>歌词来自《Whatever Will Be, Will Be》</h4>
<div class="docs">
<div class="docs-head">example</div>
<div class="docs-body">
<!--demo-->
<p class="border border-red text-red padding-small">When I was just a little girl,</p>
<p class="border border-yellow text-yellow padding-small">I asked my mother, </p>
<p class="border border-blue text-blue padding-small">"What will I be?</p>
<p class="border border-green text-green padding-small">Will I be pretty?</p>
<p class="border padding-small">Will I be rich?"</p>
<!--//demo-->
</div>
<div class="doc-foot">
<pre class="prettyprint linenums"><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>
<!--//border-->
<h2 id="image">图片</h2>
<h4>鼠标移上去图片放大类<code>img-scale</code></h4>
<div class="docs">
<div class="docs-head">example</div>
<div class="docs-body">
<!--demo-->
<a href="#"><img src="imgs/docs-img.jpg" class="img-scale" width="200"/></a>
<!--//demo-->
</div>
<div class="doc-foot">
<pre class="prettyprint linenums"><a href="#"><img src="imgs/docs-img.jpg" class="img-scale" width="200"/></a></pre>
</div>
</div>
<!--//图片-->
</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 助手