样式

Kico Style 的内置样式

常用元素

标题：

文字：

正文文字

链接文字

提示文字

较小文字

加粗文字

引用文字

斜体文字

强调文字

加亮文字

含删除线文字

键盘符号 Ctrl + S

这是一个引用段落的测试。Kico Style 最早起源于 2016 年的“缤奇官网”项目，在保罗开发完此项目之后仍有很多的前端项目，保罗在制作过程中发现不同的项目存在很多的重复之处，因此制作了这个框架。Kico Style 仅包含常用的功能，不含其他繁杂的样式，既方便调用也无需像其他框架一样记录各种类名，让你的前端作品装逼更持久~
<p>正文文字</p>
<p><a href="#">链接文字</a></p>
<p><abbr title="Kico Style 自带的提示功能">提示文字</abbr></p>
<p><small>较小文字</small></p>
<p><b>加粗文字</b></p>
<p><cite>引用文字</cite></p>
<p><i>斜体文字</i></p>
<p><em>强调文字</em></p>
<p><mark>加亮文字</mark></p>
<p><del>含删除线文字</del></p>
<p>键盘符号 <kbd>Ctrl + S</kbd></p>
<hr/>
<blockquote>这是一个引用段落的测试。Kico Style 最早起源于 2016 年的“缤奇官网”项目，在保罗开发完此项目之后仍有很多的前端项目，保罗在制作过程中发现不同的项目存在很多的重复之处，因此制作了这个框架。Kico Style 仅包含常用的功能，不含其他繁杂的样式，既方便调用也无需像其他框架一样记录各种类名，让你的前端作品装逼更持久~</blockquote>

图片：

Kico Style 将所有图片响应式处理了，确保图片不会出现过大而溢出页面的现象。

<img src="static/saratoga.jpg"/>
<img src="static/test-image-1.jpg"/>
<img src="static/test-image-2.jpg"/>

文章：

Kico Style 将所有 article 标签的子元素增加间距，并设置新的换行机制，方便文章内容的排版和布局。

这是一个标题

这是一个小标题

这是一条普通的段落

<article>
<h1>这是一个标题</h1>
<h4>这是一个小标题</h4>
<p>这是一条普通的段落</p>
</article>

按钮：

给 a 元素、input 按钮元素或 button 元素添加 btn 类，即可让此元素变成一个按钮。

a 按钮 

<input class="btn" type="button" value="input 按钮"/>
<button class="btn">button 按钮</button>
<a class="btn">a 按钮</a>

给按钮添加 small 和 large 扩展类，可以使按钮变小和变大。

<button class="btn small">小按钮</button>
<button class="btn">一般按钮</button>
<button class="btn middle">中按钮</button>
<button class="btn large">大按钮</button>

按钮默认为纯白色，给按钮添加 red，yellow，blue，green 类可以让按钮变成 红/黄/蓝/绿/透明 的颜色。

<button class="btn red">一枚红色按钮</button>
<button class="btn yellow">一枚黄色按钮</button>
<button class="btn blue">一枚蓝色按钮</button>
<button class="btn green">一枚绿色按钮</button>
<button class="btn transparent">一枚透明按钮</button>

禁用的按钮：

<button class="btn red" disabled>禁用的按钮</button>

漂浮提示：

漂浮提示可以用较为隐藏的方式为用户提供帮助或引导信息。

上方显示 底侧显示 右侧显示 左侧显示

<p>
    <span ks-tag="top" ks-text="我在上方显示">上方显示</span>
    <span ks-tag="bottom" ks-text="我在底侧显示">底侧显示</span>
    <span ks-tag="right" ks-text="我在右侧显示">右侧显示</span>
    <span ks-tag="left" ks-text="我在左侧显示">左侧显示</span>
</p>

左上方显示 右下方显示

<p>
    <span ks-tag="top left" ks-text="我在左上方显示（top left）">左上方显示</span>
    <span ks-tag="bottom right" ks-text="我在右下方显示（bottom right）">右下方显示</span>
</p>

代码块：

一个普通的代码块

黑色代码块
<p><code>一个普通的代码块</code></p>
<pre><code>黑色代码块</code></pre>

项目列表：

PS：给 ul 元素添加 clear 扩展类可以去除左侧小点点

自驾游采购清单：

  • 帐篷
  • 吃的
    • 零食
    • 钓上来的鱼
    • 鱼丸、火腿肠
  • 旅行背包
  • 烧烤、钓鱼装备

明天要做的事情：

  1. 去公司上班
    1. 和同事问好
    2. 完善项目代码
    3. 和项目组交谈事务
  2. 和公司同事去吃下午茶
  3. 和女朋友约会（并不可能）

我的梦想：

拥有一只女朋友
长相可爱，愿意相互包容
开发属于自己的框架
已实现，也就是 Kico Style
建立缤奇科技公司
选址在珠三角地区为宜
<div class="row">
    <div class="col-m-4">
        <h3>自驾游采购清单：</h3>
        <ul>
            <li>帐篷</li>
            <li>吃的
                <ul>
                    <li>零食</li>
                    <li>钓上来的鱼</li>
                    <li>鱼丸、火腿肠</li>
                </ul>
            </li>
            <li>旅行背包</li>
            <li>烧烤、钓鱼装备</li>
        </ul>
    </div>
    <div class="col-m-4">
        <h3>明天要做的事情：</h3>
        <ol>
            <li>去公司上班
                <ol>
                    <li>和同事问好</li>
                    <li>完善项目代码</li>
                    <li>和项目组交谈事务</li>
                </ol>
            </li>
            <li>和公司同事去吃下午茶</li>
            <li>和女朋友约会（并不可能）</li>
        </ol>
    </div>
    <div class="col-m-4">
        <h3>我的梦想：</h3>
        <dl>
            <dt>拥有一只女朋友</dt>
            <dd>长相可爱，愿意相互包容</dd>
            <dt>开发属于自己的框架</dt>
            <dd>已实现，也就是 Kico Style</dd>
            <dt>建立缤奇科技公司</dt>
            <dd>选址在珠三角地区为宜</dd>
        </dl>
    </div>
</div>

表单：

<fieldset>
    <label>
        <span>活动的文本框：</span>
        <input type="text" value="奇趣保罗">
    </label>
    <label>
        <span>数字形文本框：</span>
        <input type="number" value="7030">
    </label>
    <label>
        <span>超出数字的文本框：</span>
        <input type="number" min="1" max="100" value="101">
    </label>
    <label>
        <span>搜索形文本框：</span>
        <input type="search" placeholder="搜索...">
    </label>
    <label>
        <span>禁用的文本框：</span>
        <input type="text" value="2333" name="disabled-text" disabled="">
    </label>
    <label>
        <span>只读的文本框：</span>
        <input type="text" value="2333" title="2333" readonly="">
    </label>
    <label class="submit">
        <span>带按钮的文本框：</span>
        <input type="text" value="2333" title="2333">
        <button class="btn blue">提交</button>
    </label>
    <label>
        <span>滑动条：</span>
        <input type="range" name="points" min="1" max="10" value="5">
    </label>
    <label>
        <span>开关按钮：</span>
        <input type="checkbox" class="switch" name="test-switch">
    </label>
    <label>
        <span>上传文件：</span>
        <input type="file" name="test-file">
    </label>
    <label>
        <span>上传多文件：</span>
        <input type="file" name="test-file" multiple="">
    </label>
    <label>
        <input type="color">
    </label>
    <label><input type="checkbox">多选选项</label>
    <label><input type="radio">单选选项</label>
    <label><input type="checkbox" disabled="">禁用的多选选项</label>
    <label><input type="radio" disabled="">禁用的单选选项</label>
    <label>
        <span>个人介绍：</span>
        <textarea placeholder="在此编写你的个人介绍" rows="3"></textarea>
    </label>
    <label>
        <span>选择适合你的英雄：</span>
        <select name="test-hero">
            <option>小缤</option>
            <option>小奇</option>
            <option>保罗</option>
            <option>路人甲</option>
            <option>路人乙</option>
        </select>
    </label>
    <label>
        <span>选择适合你的伙伴：</span>
        <select name="test-pet" multiple="">
            <option>拉菲</option>
            <option>索菲</option>
            <option>阿卡林</option>
            <option>混沌老师</option>
            <option>埃尔德里奇</option>
        </select>
    </label>
    <label>
        <span>原生进度条：</span>
        <progress value="10" max="50"></progress>
    </label>
</fieldset>

表单小组：

PS：给使用“ks-form”类的元素添加“inline”类可以使其子选项单行显示
多行：
单行：
混搭： 
<form class="ks-form">
    <fieldset>
        <legend>多行：</legend>
        <label><input type="checkbox"/>多选选项 1</label>
        <label><input type="checkbox"/>多选选项 2</label>
        <label><input type="checkbox"/>多选选项 3</label>
    </fieldset>
    <fieldset class="inline">
        <legend>单行：</legend>
        <label><input type="radio" name="radio"/>单选选项 1</label>
        <label><input type="radio" name="radio"/>单选选项 2</label>
        <label><input type="radio" name="radio"/>单选选项 3</label>
    </fieldset>
    <fieldset class="inline">
        <legend>混搭：</legend>
        <label><input type="text" placeholder="名字："/></label>
        <label><input type="text" placeholder="邮箱："/></label>
        <label><input type="text" placeholder="网站："/></label>
        <textarea placeholder="在这里留言吧"></textarea>
        <button class="btn yellow small" type="submit">提交</button>
    </fieldset>
</form>

表格：

Kico Style 自带响应式表格系统，须在 table 元素前添加一个类名为 “ks-table” 的DIV盒子。

PS：表格默认为 100% 尺寸，待表格内文字空间不足时，将会自动出现滚动条以实现响应式。如果想限制表格宽度，请使用栅格系统。
姓名 性别 年龄 介绍
小缤 女 13 缤奇的萌妹子，小明很想抱着软哒哒的她呢！
小奇 男 13 缤奇的全栈工程师，小明认为他是只大佬。
小明 男 17 缤奇的前端工程师，就是写这个框架的逗比。
在提交 a991a2 中，已经不会默认禁止元素换行了。如果想要回到此前的方式布局表格，你不妨可以尝试一下 .text-nowrap 类名。
姓名 性别 年龄 介绍
小缤 女 13 缤奇的萌妹子，小明很想抱着软哒哒的她呢！
小奇 男 13 缤奇的全栈工程师，小明认为他是只大佬。
小明 男 17 缤奇的前端工程师，就是写这个框架的逗比。

给表格添加 fill 扩展类即可获得色彩版的效果。

姓名 性别 年龄 介绍
小缤 女 13 缤奇的萌妹子，小明很想抱着软哒哒的她呢！
小奇 男 13 缤奇的全栈工程师，小明认为他是只大佬。
小明 男 17 缤奇的前端工程师，就是写这个框架的逗比。

如果想做一个内容复杂的表格，需要部分列换行，部分列固定，且不能出现滚动条，你可以结合 HTML 的 colgroup 标签，或者使用 .text-nowrap 类名。

Features Description
Easy Customized Use CSS Variable, you can modify the colors, paddings, and more thing.
Reset Default Styles Just write HTML code, the default CSS style is just enough. It looks better than the browser's.
Lightweight Code Use Kico Style, the base CSS filesize with GZIP can be less than 7kb. that isn't great?
ssss dsdad

多媒体：

一首随机动漫音乐：

一个小视频（来源自 cPlayer 项目）：

<p>一首随机动漫音乐：</p>
<audio src="https://api.paugram.com/acgm?play=true" controls></audio>
<p>一个小视频（来源自 <a href="https://cplayer.js.org" target="_blank" rel="nofollow">cPlayer</a> 项目）：</p>
<video src="https://cplayer.js.org/be6485cecc8295363e6df9fc9b947ce5.mp4" controls></video>