常用元素
标题:
文字:
正文文字
提示文字
较小文字
加粗文字
引用文字
斜体文字
强调文字
加亮文字
含删除线文字
键盘符号 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>
漂浮提示:
漂浮提示可以用较为隐藏的方式为用户提供帮助或引导信息。
上方显示 底侧显示 右侧显示 左侧显示
<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
扩展类可以去除左侧小点点
自驾游采购清单:
- 帐篷
- 吃的
- 零食
- 钓上来的鱼
- 鱼丸、火腿肠
- 旅行背包
- 烧烤、钓鱼装备
明天要做的事情:
- 去公司上班
- 和同事问好
- 完善项目代码
- 和项目组交谈事务
- 和公司同事去吃下午茶
- 和女朋友约会(并不可能)
我的梦想:
- 拥有一只女朋友
- 长相可爱,愿意相互包容
- 开发属于自己的框架
- 已实现,也就是 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>