Слияние кода завершено, страница обновится автоматически
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="gb2312" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<title>基础css - 快切</title>
<meta name="keywords" content="快切,中文css框架,css框架,开源css框架,css框架下载"/>
<meta name="description" content="快切是一个开源中文 (X)HTML/CSS 框架 ,它的目的是减少你的css开发时间。它提供一个可靠的css基础去创建你的项目,能够用于网站的快速设计,通过重设和重建浏览器标准，可以让每个网站防 止枯燥的跨浏览器兼容性测试。"/>
<meta name="author" content="快切 kuai.qietu.com">
<link rel="stylesheet" href="assets/css/quick.css">
<link rel="stylesheet" href="css/addons.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.3.2.min.js"></script>
<script src="assets/js/quick.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body>
<div class="naver">
<div class="wrapper">
<div class="brand"> <a href="./index.html"><img src="imgs/logo.png"/></a> </div>
<div class="collapse"><span></span><span></span><span></span></div>
<div class="module">
<ul>
<li> <strong><a href="started.html">入门</a></strong> </li>
<li> <strong><a href="grid.html">12列栅格</a></strong> </li>
<li> <strong><a href="base.html" class="selected">基础css</a></strong> </li>
<li> <strong><a href="widget.html">组件</a></strong> </li>
<li> <strong><a href="javascript.html">javascript插件</a></strong> </li>
<li>
<strong><a href="icon.html">图标</a></strong> </li>
</ul>
</div>
<div class="sub"> <a href="http://kuai.qietu.com">前往官网</a> </div>
</div>
</div>
<div class="heading">
<div class="wrapper">
<h1>基础css</h1>
<h2>通过重置一些不兼容的css代码，能够避免一些不必要的跨浏览器兼容问题，定义了一些常用的css<br>
类，能够用于快速开发，也能统一网页的风格。</h2>
</div>
</div>
<div class="wrapper">
<div class="row">
<div class="col3">
<ul class="sidebar">
<li class="selected">
<a href="#typography">排版</a></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>
</ul>
</div>
<div class="col9">
<div class="part" id="typography">
<h1 class="phead">排版<small></small></h1>
<h4>默认设置,段落,标题,文本，对字体颜色，锚文本的下划线，颜色，字体做了重写，均采用了最符合中国网站体验的12号字体和 Verdana, Arial, Helvetica, sans-serif 字体。行距22px。这些重写参考了，盛大，腾讯，百度，新浪等众多网站对css重写的选择。</h4>
<div class="row">
<div class="col3">
<h2>默认设置</h2>
采用了符合中国人阅读习惯的font-size:12px像素字体，行距line-height:22px像素。字体font-family:Verdana,Arial,Helvetica,sans-serif, body背景background:white;</div>
<div class="col3">
<h2>段落排版</h2>
<p>级联样式表（Cascading Style Sheet）简称“CSS”，通常又称为“风格样式表（Style Sheet）”，它是用来进行网页风格设计的。</p>
<p>比如，如果想让链接字未点击时是蓝色的，当鼠标移上去后字变成红色的且有下划线，这就是一种风格。通过设立样式表，可以统一地控制HTML中各标志的显示属性。</p>
</div>
<div class="col3">
<h2>标题排版</h2>
<h1>H1文本演示</h1>
<h2>H2文本演示</h2>
<h3>H3文本演示</h3>
<h4>H4文本演示</h4>
<h5>H5文本演示</h5>
</div>
</div>
<div class="row">
<div class="col9">
<h2>加粗，小号，大号，上标，下标</h2>
<div>
<table width="200" border="0" class="table">
<tr>
<td>元素</td>
<td>演示</td>
<td>说明</td>
</tr>
<tr>
<td><code><strong></code></td>
<td><strong>这是一段加粗的文字</strong></td>
<td><strong>...</strong> <b>在w3c新标准中已经不建议使用了</td>
</tr>
<tr>
<td><code><u></code></td>
<td><u>这是一段下划线的文字</u></td>
<td><u>...</u></td>
</tr>
<tr>
<td><code><em></code></td>
<td><em>这是一段斜体的文字</em></td>
<td><em>...</em> <i>在w3c新标准中已经不建议使用了</td>
</tr>
<tr>
<td><code><del></code></td>
<td><del>这是一段删除线文字</del></td>
<td>不赞成使用。使用<del>代替。</td>
</tr>
<tr>
<td><code><sup></code></td>
<td>演示<sup>这是一段上标文字</sup></td>
<td>定义上标字。</td>
</tr>
<tr>
<td><code><sub></code></td>
<td>演示<sup>这是一段下标文字</sup></td>
<td>定义下标字。</td>
</tr>
<tr>
<td><code><small></code></td>
<td>演示<small>这是一段小号文字</small></td>
<td>定义小号字。</td>
</tr>
<tr>
<td><code><big></code></td>
<td>演示<big>这是一段加大号文字</big></td>
<td>定义加大号字。</td>
</tr>
</table>
</div>
</div>
</div>
<h2>引用</h2>
<h4>引用常常被用于评论中，在网页中非常常见，用<code><blockquote></code>就可以轻松实现一段美观的引用。</h4>
<div class="row">
<div class="col9">
<blockquote>级联样式表（Cascading Style Sheet）简称“CSS”，通常又称为“风格样式表（Style Sheet）”，它是用来进行网页风格设计的。比如，如果想让链接字未点击时是蓝色的，当鼠标移上去后字变成红色的且有下划线，这就是一种风格。
<blockquote>通过设立样式表，可以统一地控制HTML中各标志的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表，可以扩充精确指定网页元素位置，外观以及创建特殊效果的能力。</blockquote>
</blockquote>
</div>
</div>
<h2>abbr</h2>
<h4>标签常常用于关键字tag等地方，用<code><abbr></code>就可以轻松实现。</h4>
<div class="row">
<div class="col9"> <abbr>css3</abbr> <abbr>html5</abbr> </div>
</div>
<h2>列表</h2>
<div class="row">
<div class="col3">
<h2>无序列表</h2>
<p><code>ul</code></p>
<ul>
<li>无序列表是这样表现的</li>
<li>无序列表是点点点</li>
<li>无序列表是没有罗马文字的</li>
</ul>
</div>
<div class="col3">
<h2>有序列表</h2>
<p><code>ol</code></p>
<ol>
<li>有序列表是这样表现的</li>
<li>有序列表不是是点点点</li>
<li>有序列表是有罗马文字的</li>
</ol>
</div>
<div class="col3">
<h2>没有样式的</h2>
<p><code><ul class="unstyled"></code></p>
<ul class="unstyled">
<li>没有样式是这样表现的</li>
<li>没有样式的列表什么也没有</li>
<li>没有样式比较干净</li>
</ul>
</div>
</div>
<div class="row">
<div class="col3">
<h2>圈圈</h2>
<p><code><ul class="circle"></code></p>
<ul class="circle">
<li>圈圈列表是这样表现的</li>
<li>圈圈列表是圈圈的</li>
<li>圈圈列表跟点点很相似</li>
</ul>
</div>
<div class="col3">
<h2>方块</h2>
<p><code><ul class="square"></code></p>
<ul class="square">
<li>圈圈列表是这样表现的</li>
<li>圈圈列表是圈圈的</li>
<li>圈圈列表跟点点很相似</li>
</ul>
</div>
<div class="col3">
<h2>中文123</h2>
<p><code><ul class="cjk"></code></p>
<ul class="cjk">
<li>中文123样式是这样表现的</li>
<li>中文123样式的列表什么也没有</li>
<li>中文123样式是用汉字一二三排序的</li>
</ul>
</div>
</div>
<div class="part" id="code">
<h1 class="phead">代码<small>代码区间</small></h1>
<div class="row">
<div class="col3">
<h2>一行代码</h2>
<pre>body{ background:white;}</pre>
</div>
<div class="col3">
<h2>多行代码</h2>
<pre><ol><li>body{</li><li>background:white;</li><li>font-size:13px;</li><li>line-height:22px;</li><li>}</li></ol>
</pre>
<pre class="unstyled"><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 class="col3">
<h2>代码着色</h2>
<pre><ol><li class="pink">body{</li><li>background:white;</li><li>font-size:13px;</li><li>line-height:22px;</li><li class="pink">}</li></ol>
</pre>
<pre class="unstyled"><pre><ol>
<li class="pink">body{</li>
<li>background:white;</li>
<li>font-size:13px;</li>
<li>line-height:22px;</li>
<li class="pink">}</li>
</ol></pre></pre>
</div>
</div>
</div>
<div class="part" id="table">
<h1 class="phead">表格<small>表格的表框，间距等进行了重写让table更美观</small></h1>
<div class="row">
<div class="col9">
<h2>标记方式</h2>
<pre><table class="table bordered">
<tbody><br> <tr><br> <td>/</td><br> <td>&nbsp;</td><br> <td>&nbsp;</td><br> </tr>
</tbody>
<tbody><br> <tr><br> <td>&nbsp;</td><br> <td>&nbsp;</td><br> <td>&nbsp;</td><br> </tr>
</tbody>
<tfoot><br> <tr><br> <td>&nbsp;</td><br> <td>&nbsp;</td><br> <td>&nbsp;</td><br> </tr>
</tfoot><br></table></pre>
</div>
<div class="col9">
<h2>效果演示</h2>
<pre><table border="0" class="table"></pre>
<table width="100%" border="0" class="table">
<tr>
<td>/</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<h2>斑马表格<small>加上<code>class="table zebra"</code>即可实现斑马表格</small></h2>
<table width="100%" border="0" class="table zebra">
<tr>
<td>/</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<h2>带边框的表格<small>加上<code>class="table bordered"</code>即可实现带边框的表格</small></h2>
<table width="100%" border="0" class="table bordered">
<thead>
<tr>
<td>/</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</thead>
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td class="selected">selected</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="part" id="form">
<h1 class="phead">表单<small></small></h1>
<h4>对文本框等进行了重写，通过美化一些表单元素默认样式，例如文本框，按钮，下拉菜单等，让表单更美观。通过placeholder属性来完成，文本框的默认值，鼠标点击消失，失去光标，默认值恢复的效果。（改效果在firefox浏览器下可见）</h4>
<div class="row">
<div class="col9">
<form action="" method="get" enctype="multipart/form-data">
<fieldset>
<legend>注册表单</legend>
<p>
<label>姓名 <small>字符在3~9位</small></label>
<input name="" type="text" placeholder="请填写真实的姓名">
<input name="" type="text" placeholder="请填写真实的姓名" class="text radius">
</p>
<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>
</div>
</div>
</div>
<div class="part" id="button">
<h1 class="phead">按钮<small></small></h1>
<h4>对按钮或者a标签按钮的样式重写,css3按钮是指通过css3来实现的按钮的效果，css3纯css可以实现立体，渐变，阴影，圆角等很多种特效，如果把这些属性通过各种不同的方式组合在一起就能实现很多不同的炫酷的按钮效果。 </h4>
<div class="row">
<div class="col9">
<table width="100%" border="0" class="table bordered">
<tr>
<td>演示</td>
<td>代码</td>
<td>功能</td>
</tr>
<tr>
<td><a href="#" class="button">默认</a></td>
<td><code><a class="button"></code> 或者 <code><input type="button" class="button"></code></td>
<td>默认按钮</td>
</tr>
<tr>
<td><a href="#" class="button inverse">反向</a></td>
<td><code><a class="button inverse"></code> 或者 <code><input type="button" class="button inverse"></code></td>
<td>反向按钮</td>
</tr>
<tr>
<td><a href="#" class="button black">黑色</a></td>
<td><code><a class="button black"></code> 或者...</td>
<td>黑色的按钮</td>
</tr>
<tr>
<td><a href="#" class="button orange">橙色</a></td>
<td><code><a class="button orange"></code> 或者...</td>
<td>橙色按钮</td>
</tr>
<tr>
<td><a href="#" class="button red">红色</a></td>
<td><code><a class="button red"></code> 或者...</td>
<td>红色按钮</td>
</tr>
<tr>
<td><a href="#" class="button blue">蓝色</a></td>
<td><code><a class="button blue"></code> 或者...</td>
<td>蓝色按钮</td>
</tr>
<tr>
<td><a href="#" class="button rosy">玫瑰红</a></td>
<td><code><a class="button rosy"></code> 或者...</td>
<td>玫瑰红按钮</td>
</tr>
<tr>
<td><a href="#" class="button green">绿色</a></td>
<td><code><a class="button green"></code> 或者...</td>
<td>绿色按钮</td>
</tr>
<tr>
<td><a href="#" class="button pink">粉红</a></td>
<td><code><a class="button pink"></code> 或者...</td>
<td>粉红按钮</td>
</tr>
<tr>
<td><a href="#" class="button yellow">黄色</a></td>
<td><code><a class="button yellow"></code> 或者...</td>
<td>黄色按钮</td>
</tr>
<tr>
<td><a href="#" class="button black bigrounded">圆角</a></td>
<td><code><a class="button black bigrounded"></code> 或者...</td>
<td>圆角的按钮</td>
</tr>
<tr>
<td><a href="#" class="button black medium">适中号</a></td>
<td><code><a class="button black medium"></code> 或者...</td>
<td>中等号按钮</td>
</tr>
<tr>
<td><a href="#" class="button black small">小号</a></td>
<td><code><a class="button black small"></code> 或者...</td>
<td>小号按钮</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="wrapper footer">
<p>© CopyRight 2002-2013, 快切 kuai.qietu.com, Inc.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>
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Опубликовать ( 0 )