Init: 2023 Version

从服务器拉取的最新版本
This commit is contained in:
2024-09-18 16:55:55 +08:00
commit c8f836c9cf
20 changed files with 4882 additions and 0 deletions
Executable
+874
View File
@@ -0,0 +1,874 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>样式 - Kico Style</title>
<meta name="theme-color" content="#3498db" />
<link rel="icon" href="static/icon-32.png" sizes="32x32" />
<link rel="icon" href="static/icon-192.png" sizes="192x192" />
<link href="static/kico.css" rel="stylesheet" type="text/css" />
<link href="static/doc.css?v=22.12.25" rel="stylesheet" type="text/css" />
<meta name="viewport" content="width=device-width, maximum-scale=1, initial-scale=1" />
</head>
<body class="has-bar">
<aside class="sidebar">
<div class="header">
<img src="static/kico.svg" title="Kico Style" />
<span class="title">Style</span>
</div>
<nav class="menu">
<a href="index.html" content="开始">
<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="M893.7 505.9H129.3c-13 0-24.8-7.9-29.8-19.9-5-12-2.2-25.9 7-35.2l307-307c26.1-26.1 60.9-40.5 98-40.5s71.9 14.4 98 40.5l307 307c9.2 9.2 12 23.1 7 35.2-5 12.1-16.7 19.9-29.8 19.9zM673.2 919.9h-31.5c-17.8 0-32.3-14.4-32.3-32.3v-77.4c0-23.1-18.8-42.1-41.9-42.4-22.3 0.3-41.1 19.3-41.1 42.4v77.4c0 17.8-14.4 32.3-32.3 32.3H349.8c-70.9 0-128.7-63.7-128.7-141.9V581.9c0-17.8 14.4-32.3 32.3-32.3h516.2c17.8 0 32.3 14.4 32.3 32.3V778c-0.1 78.3-57.8 141.9-128.7 141.9z"></path>
</svg>
</a>
<a href="wrap.html" content="样式">
<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="M877.3 154.7C836.9 114.3 783 92 725.5 92c-57.5 0-111.4 22.3-151.8 62.7l-48.1 48.1-251.4 251.3 303.6 303.6 299.4-299.4c40.4-40.4 62.7-94.3 62.7-151.8 0-57.4-22.2-111.4-62.6-151.8zM221.5 506.9L177 551.3c-16.8 16.8-27.9 37.9-32.4 61.2l-53.9 285c-2.3 12.1 1.6 24.6 10.3 33.3 7.1 7.1 16.6 10.9 26.4 10.9 2.3 0 4.6-0.2 6.9-0.6l285-53.9c23.3-4.4 44.5-15.6 61.2-32.4l44.4-44.4-303.4-303.5z"></path>
</svg>
</a>
<a href="components.html" content="组件">
<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="M512 510.4m-105.9 0a105.9 105.9 0 1 0 211.8 0 105.9 105.9 0 1 0-211.8 0ZM876 553.6l-8.2-4.8c-20-11.6-22.2-30.7-22.2-38.4 0-7.7 2.2-26.9 22.2-38.4l8.2-4.7c25.3-14.6 43.4-38.1 50.9-66.3 7.6-28.2 3.7-57.6-10.9-82.9l-35.3-61.2c-14.6-25.3-38.1-43.4-66.3-50.9-28.2-7.5-57.6-3.7-82.9 10.9l-8.2 4.7c-20 11.6-37.7 3.9-44.4 0s-22.2-15.3-22.2-38.4v-9.5c0-60.2-49-109.3-109.3-109.3h-70.6c-60.2 0-109.3 49-109.3 109.3v9.5c0 19.6-11.3 30.8-18 35.7-11.6 8.4-30.5 13.6-48.8 2.9l-8.8-5.2c-2.6-1.5-4.8-2.8-7.6-4.1-0.1 0-0.2-0.1-0.2-0.1-51.6-24-112.1-4.9-140.6 44.5L108 318c-14.6 25.3-18.5 54.7-10.9 82.9 7.6 28.2 25.6 51.7 50.9 66.3l8.2 4.8c20 11.6 22.2 30.7 22.2 38.4 0 7.7-2.2 26.9-22.2 38.4l-8.2 4.7c-25.3 14.6-43.4 38.1-50.9 66.3-7.6 28.2-3.7 57.6 10.9 82.9l35.3 61.2c14.6 25.3 38.1 43.4 66.3 50.9 28.2 7.5 57.6 3.7 82.9-10.9l8.2-4.7c20-11.6 37.7-3.9 44.4 0 6.7 3.9 22.2 15.3 22.2 38.4v9.5c0 60.2 49 109.3 109.3 109.3h70.6c60.2 0 109.3-49 109.3-109.3v-9.5c0-23.1 15.5-34.6 22.2-38.4 6.7-3.9 24.3-11.6 44.4 0l8.2 4.8c25.3 14.6 54.7 18.5 82.9 10.9 28.2-7.6 51.7-25.6 66.3-50.9l35.3-61.2c14.6-25.3 18.5-54.7 10.9-82.9-7.4-28.1-25.5-51.7-50.7-66.3zM512 687.8c-97.8 0-177.3-79.5-177.3-177.3S414.2 333.1 512 333.1s177.3 79.5 177.3 177.3S609.8 687.8 512 687.8z"></path>
</svg>
</a>
</nav>
</aside>
<aside class="sub-sidebar">
<ul>
<li>
<a href="wrap.html">容器</a>
<ul>
<li><a href="wrap.html#resize">全局缩放</a></li>
<li><a href="wrap.html#wrap-limit">尺寸限制</a></li>
<li><a href="wrap.html#wrap-padding">保留间距</a></li>
<li><a href="wrap.html#clearfix">清除浮动</a></li>
<li><a href="wrap.html#float">设置浮动</a></li>
<li><a href="wrap.html#align">文字对齐</a></li>
</ul>
</li>
<li>
<a href="elements.html">常用元素</a>
<ul>
<li><a href="elements.html#heading">标题</a></li>
<li><a href="elements.html#types">文字</a></li>
<li><a href="elements.html#images">图片</a></li>
<li><a href="elements.html#article">文章</a></li>
<li><a href="elements.html#buttons">按钮</a></li>
<li><a href="elements.html#tag">漂浮提示</a></li>
<li><a href="elements.html#codes">代码块</a></li>
<li><a href="elements.html#lists">项目列表</a></li>
<li><a href="elements.html#forms">表单</a></li>
<li><a href="elements.html#fieldset">表单小组</a></li>
<li><a href="elements.html#table">表格</a></li>
<li><a href="elements.html#media">多媒体</a></li>
</ul>
</li>
<li>
<a href="grid.html">栅格系统</a>
<ul>
<li><a href="grid.html#grids-size">栅格尺寸</a></li>
<li><a href="grid.html#grids-auto">自动栅格</a></li>
<li><a href="grid.html#grids-info">栅格类型</a></li>
<li><a href="grid.html#grids-padding">栅格间距</a></li>
<li><a href="grid.html#columns-align">对齐方式</a></li>
<li><a href="grid.html#columns-hide">栅格隐藏</a></li>
</ul>
</li>
<li>
<a href="animation.html">动画</a>
<ul>
<li><a href="animation.html#animate-fade">淡入淡出</a></li>
<li><a href="animation.html#animate-fade-scale">淡入缩放</a></li>
<li><a href="animation.html#animate-scale">缩放</a></li>
<li><a href="animation.html#animate-moving">平移</a></li>
<li><a href="animation.html#animate-rotate">旋转</a></li>
</ul>
</li>
</ul>
</aside>
<main class="content">
<div class="wrap min">
<div class="ks-title">
<h1>样式</h1>
<h2>Kico Style 的内置样式</h2>
</div>
<div class="ks-content">
<h1>常用元素</h1>
<section>
<h2 id="heading">标题:</h2>
<div class="demo-block">
<h1>H1 超大标题</h1>
<h2>H2 大标题</h2>
<h3>H3 小标题</h3>
<h4>H4 标题</h4>
<h5>H5 标题</h5>
<h6>H6 标题</h6>
</div>
<details class="code-block">
<summary>查看代码:</summary>
<pre class="language-html"><code>&lt;h1&gt;H1 超大标题&lt;/h1&gt;
&lt;h2&gt;H2 大标题&lt;/h2&gt;
&lt;h3&gt;H3 小标题&lt;/h3&gt;
&lt;h4&gt;H4 标题&lt;/h4&gt;
&lt;h5&gt;H5 标题&lt;/h5&gt;
&lt;h6&gt;H6 标题&lt;/h6&gt;</code></pre>
</details>
</section>
<section>
<h2 id="types">文字:</h2>
<div class="demo-block">
<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>
</div>
<details class="code-block">
<summary>查看代码:</summary>
<pre class="language-html"><code>&lt;p&gt;正文文字&lt;/p&gt;
&lt;p&gt;&lt;a href="#"&gt;链接文字&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;abbr title="Kico Style 自带的提示功能"&gt;提示文字&lt;/abbr&gt;&lt;/p&gt;
&lt;p&gt;&lt;small&gt;较小文字&lt;/small&gt;&lt;/p&gt;
&lt;p&gt;&lt;b&gt;加粗文字&lt;/b&gt;&lt;/p&gt;
&lt;p&gt;&lt;cite&gt;引用文字&lt;/cite&gt;&lt;/p&gt;
&lt;p&gt;&lt;i&gt;斜体文字&lt;/i&gt;&lt;/p&gt;
&lt;p&gt;&lt;em&gt;强调文字&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;&lt;mark&gt;加亮文字&lt;/mark&gt;&lt;/p&gt;
&lt;p&gt;&lt;del&gt;含删除线文字&lt;/del&gt;&lt;/p&gt;
&lt;p&gt;键盘符号 &lt;kbd&gt;Ctrl + S&lt;/kbd&gt;&lt;/p&gt;
&lt;hr/&gt;
&lt;blockquote&gt;这是一个引用段落的测试。Kico Style 最早起源于 2016 年的“缤奇官网”项目,在保罗开发完此项目之后仍有很多的前端项目,保罗在制作过程中发现不同的项目存在很多的重复之处,因此制作了这个框架。Kico Style 仅包含常用的功能,不含其他繁杂的样式,既方便调用也无需像其他框架一样记录各种类名,让你的前端作品装逼更持久~&lt;/blockquote&gt;</code></pre>
</details>
</section>
<section>
<h2 id="images">图片:</h2>
<p>Kico Style 将所有图片响应式处理了,确保图片不会出现过大而溢出页面的现象。</p>
<div class="demo-block">
<img src="static/saratoga.jpg" />
<img src="static/test-image-1.jpg" />
<img src="static/test-image-2.jpg" />
</div>
<details class="code-block">
<summary>查看代码:</summary>
<pre class="language-html"><code>&lt;img src="static/saratoga.jpg"/&gt;
&lt;img src="static/test-image-1.jpg"/&gt;
&lt;img src="static/test-image-2.jpg"/&gt;</code></pre>
</details>
</section>
<section>
<h2 id="article">文章:</h2>
<p>Kico Style 默认将所有 <code>article</code> 标签的子元素做了排版优化,增加间距、设置新的换行机制等,减少重复编写对应的排版样式代码。</p>
<div class="demo-block">
<article>
<p>早上在 B 站一个原神的视频下方评论了,结果意外的上了热评,这是我少见的第一次上热评,究竟评论了啥捏?</p>
<blockquote>原神这么火 我还是遇不到一个玩原神的女朋友 😭</blockquote>
<p>都知道我喜欢自嘲,我心里就想着肯定会有人说其实是因为我本来就没有女朋友,结果这个人他确实出现了!</p>
<blockquote>有没有一种可能,你是遇不到女朋友 😂</blockquote>
<p>主要还是受到了此前那位前同事的朋友圈的影响(他说自己是提瓦特认识的女朋友),总不能在朋友圈里发自己是废物吧,就只能把其他地方当树洞,在网上和群里面吐槽了。这下子不少人都知道我母胎单身 20 年了吧!</p>
</article>
</div>
<details class="code-block">
<summary>查看代码:</summary>
<pre class="language-html"><code>&lt;article&gt;
&lt;p&gt;早上在 B 站一个原神的视频下方评论了,结果意外的上了热评,这是我少见的第一次上热评,究竟评论了啥捏?&lt;/p&gt;
&lt;blockquote&gt;原神这么火 我还是遇不到一个玩原神的女朋友 😭&lt;/blockquote&gt;
&lt;p&gt;都知道我喜欢自嘲,我心里就想着肯定会有人说其实是因为我本来就没有女朋友,结果这个人他确实出现了!&lt;/p&gt;
&lt;blockquote&gt;有没有一种可能,你是遇不到女朋友 😂&lt;/blockquote&gt;
&lt;p&gt;主要还是受到了此前那位前同事的朋友圈的影响(他说自己是提瓦特认识的女朋友),总不能在朋友圈里发自己是废物吧,就只能把其他地方当树洞,在网上和群里面吐槽了。这下子不少人都知道我母胎单身 20 年了吧!&lt;/p&gt;
&lt;/article&gt;</code></pre>
</details>
</section>
<section>
<h2 id="buttons">按钮:</h2>
<p>给 <code>a</code> 元素、<code>input</code> 按钮元素或 <code>button</code> 元素添加 <code>btn</code> 类,即可让此元素变成一个按钮。</p>
<div class="demo-block">
<input class="btn" type="button" value="input 按钮" />
<button class="btn">button 按钮</button>
<a class="btn">a 按钮</a>
</div>
<details class="code-block">
<summary>查看代码:</summary>
<pre class="language-html"><code>&lt;input class="btn" type="button" value="input 按钮"/&gt;
&lt;button class="btn"&gt;button 按钮&lt;/button&gt;
&lt;a class="btn"&gt;a 按钮&lt;/a&gt;</code></pre>
</details>
<p>给按钮添加 <code>small</code> 和 <code>large</code> 扩展类,可以使按钮变小和变大。</p>
<div class="demo-block">
<button class="btn blue small">小按钮</button>
<button class="btn blue">一般按钮</button>
<button class="btn blue middle">中按钮</button>
<button class="btn blue large">大按钮</button>
</div>
<details class="code-block">
<summary>查看代码:</summary>
<pre class="language-html"><code>&lt;button class="btn blue small"&gt;小按钮&lt;/button&gt;
&lt;button class="btn blue"&gt;一般按钮&lt;/button&gt;
&lt;button class="btn blue middle"&gt;中按钮&lt;/button&gt;
&lt;button class="btn blue large"&gt;大按钮&lt;/button&gt;</code></pre>
</details>
<p>按钮默认为纯白色,给按钮添加 <code>red</code>,<code>yellow</code>,<code>blue</code>,<code>green</code> 类可以让按钮变成 红/黄/蓝/绿/透明 的颜色。</p>
<div class="demo-block">
<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>
</div>
<details class="code-block">
<summary>查看代码:</summary>
<pre class="language-html"><code>&lt;button class="btn red"&gt;一枚红色按钮&lt;/button&gt;
&lt;button class="btn yellow"&gt;一枚黄色按钮&lt;/button&gt;
&lt;button class="btn blue"&gt;一枚蓝色按钮&lt;/button&gt;
&lt;button class="btn green"&gt;一枚绿色按钮&lt;/button&gt;
&lt;button class="btn transparent"&gt;一枚透明按钮&lt;/button&gt;</code></pre>
</details>
<p>禁用的按钮:</p>
<div class="demo-block">
<button class="btn red" disabled>禁用的按钮</button>
</div>
<details class="code-block">
<summary>查看代码:</summary>
<pre class="language-html"><code>&lt;button class="btn red" disabled&gt;禁用的按钮&lt;/button&gt;</code></pre>
</details>
</section>
<section>
<h2 id="tag">漂浮提示:</h2>
<p>漂浮提示可以用较为隐藏的方式为用户提供帮助或引导信息,将鼠标移入文字内容后展示。</p>
<div class="demo-block">
<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>
</div>
<details class="code-block">
<summary>查看代码:</summary>
<pre class="language-html"><code>&lt;span ks-tag="top" ks-text="我在上方显示"&gt;上方显示&lt;/span&gt;
&lt;span ks-tag="bottom" ks-text="我在底侧显示"&gt;底侧显示&lt;/span&gt;
&lt;span ks-tag="right" ks-text="我在右侧显示"&gt;右侧显示&lt;/span&gt;
&lt;span ks-tag="left" ks-text="我在左侧显示"&gt;左侧显示&lt;/span&gt;</code></pre>
</details>
<p>它们还可以自由组合使用呢:</p>
<div class="demo-block">
<span ks-tag="top left" ks-text="我在左上方显示(top left)">左上方显示</span>
<span ks-tag="bottom right" ks-text="我在右下方显示(bottom right)">右下方显示</span>
</div>
<details class="code-block">
<summary>查看代码:</summary>
<pre class="language-html"><code>&lt;span ks-tag="top left" ks-text="我在左上方显示(top left)"&gt;
左上方显示
&lt;/span&gt;
&lt;span ks-tag="bottom right" ks-text="我在右下方显示(bottom right)"&gt;
右下方显示
&lt;/span&gt;</code></pre>
</details>
</section>
<section>
<h2 id="codes">代码块:</h2>
<div class="demo-block">
<p><code>alert("Hello World!")</code></p>
<pre><code>function Drawer({ visible, children }) {
return (
&lt;div className={clsx(styles.drawer, visible && styles.active)}&gt;
{children}
&lt;/div&gt;
);
}</code></pre>
</div>
<details class="code-block">
<summary>查看代码:</summary>
<pre class="language-html"><code>&lt;p&gt;&lt;code&gt;alert("Hello World!")&lt;/code&gt;&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;function Drawer({ visible, children }) {
return (
&lt;div className={clsx(styles.drawer, visible && styles.active)}&gt;
{children}
&lt;/div&gt;
);
}&lt;/code&gt;&lt;/pre&gt;
</code></pre>
</details>
</section>
<section>
<h2 id="lists">项目列表:</h2>
<blockquote>PS:给 ul 元素添加 <code>clear</code> 扩展类可以去除左侧小点点</blockquote>
<div class="demo-block">
<h3>自驾游采购清单:</h3>
<ul>
<li>帐篷</li>
<li>
吃的
<ul>
<li>零食</li>
<li>钓上来的鱼</li>
<li>鱼丸、火腿肠</li>
</ul>
</li>
<li>旅行背包</li>
<li>烧烤、钓鱼装备</li>
</ul>
</div>
<details class="code-block">
<summary>查看代码:</summary>
<pre class="language-html"><code>&lt;h3&gt;自驾游采购清单:&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;帐篷&lt;/li&gt;
&lt;li&gt;
吃的
&lt;ul&gt;
&lt;li&gt;零食&lt;/li&gt;
&lt;li&gt;钓上来的鱼&lt;/li&gt;
&lt;li&gt;鱼丸、火腿肠&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;旅行背包&lt;/li&gt;
&lt;li&gt;烧烤、钓鱼装备&lt;/li&gt;
&lt;/ul&gt;</code></pre>
</details>
<div class="demo-block">
<h3>明天要做的事情:</h3>
<ol>
<li>去公司上班
<ol>
<li>和同事问好</li>
<li>完善项目代码</li>
<li>和项目组交谈事务</li>
</ol>
</li>
<li>和公司同事去吃下午茶</li>
<li>和女朋友约会(并不可能)</li>
</ol>
</div>
<details class="code-block">
<summary>查看代码:</summary>
<pre class="language-html"><code>&lt;h3&gt;明天要做的事情:&lt;/h3&gt;
&lt;ol&gt;
&lt;li&gt;去公司上班
&lt;ol&gt;
&lt;li&gt;和同事问好&lt;/li&gt;
&lt;li&gt;完善项目代码&lt;/li&gt;
&lt;li&gt;和项目组交谈事务&lt;/li&gt;
&lt;/ol&gt;
&lt;/li&gt;
&lt;li&gt;和公司同事去吃下午茶&lt;/li&gt;
&lt;li&gt;和女朋友约会(并不可能)&lt;/li&gt;
&lt;/ol&gt;</code></pre>
</details>
<div class="demo-block">
<h3>我的梦想:</h3>
<dl>
<dt>拥有一只女朋友</dt>
<dd>长相可爱,愿意相互包容</dd>
<dt>开发属于自己的 CSS 框架</dt>
<dd>已实现,也就是 Kico Style</dd>
<dt>建立缤奇科技公司</dt>
<dd>主要业务是做游戏的</dd>
</dl>
</div>
<details class="code-block">
<summary>查看代码:</summary>
<pre class="language-html"><code>&lt;h3&gt;我的梦想:&lt;/h3&gt;
&lt;dl&gt;
&lt;dt&gt;拥有一只女朋友&lt;/dt&gt;
&lt;dd&gt;长相可爱,愿意相互包容&lt;/dd&gt;
&lt;dt&gt;开发属于自己的框架&lt;/dt&gt;
&lt;dd&gt;已实现,也就是 Kico Style&lt;/dd&gt;
&lt;dt&gt;建立缤奇科技公司&lt;/dt&gt;
&lt;dd&gt;选址在珠三角地区为宜&lt;/dd&gt;
&lt;/dl&gt;</code></pre>
</details>
</section>
<section>
<h2 id="forms">表单:</h2>
<div class="demo-block">
<fieldset>
<label>
<span>活动的文本框:</span>
<input type="text" value="奇趣保罗" />
</label>
<label>
<span>数字形文本框:</span>
<input type="number" value="5678" />
</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="date" />
</label>
<label>
<span>日期 + 时间形文本框:</span>
<input type="datetime-local" />
</label>
<label>
<span>禁用的文本框:</span>
<input type="text" value="2333" disabled />
</label>
<label>
<span>只读的文本框:</span>
<input type="text" value="2333" readonly />
</label>
<label>
<span>滑动条:</span>
<input type="range" name="points" min="1" max="10" value="5" />
</label>
<label>
<span>开关按钮:</span>
<input type="checkbox" class="switch" />
</label>
<label>
<span>上传文件:</span>
<input type="file" />
</label>
<label>
<span>上传多文件:</span>
<input type="file" multiple />
</label>
<label>
<span>选择颜色:</span>
<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>
<option>小缤</option>
<option>小奇</option>
<option>保罗</option>
<option>路人甲</option>
<option>路人乙</option>
</select>
</label>
<label>
<span>选择适合你的伙伴:</span>
<select multiple>
<option>拉菲</option>
<option>索菲</option>
<option>阿卡林</option>
<option>萨拉托加</option>
<option>萌田薰子</option>
<option>埃尔德里奇</option>
</select>
</label>
<label>
<span>原生进度条:</span>
<progress value="10" max="50"></progress>
</label>
</fieldset>
</div>
<details class="code-block">
<summary>查看代码:</summary>
<pre class="language-html"><code>&lt;fieldset&gt;
&lt;label&gt;
&lt;span&gt;活动的文本框:&lt;/span&gt;
&lt;input type="text" value="奇趣保罗" /&gt;
&lt;/label&gt;
&lt;label&gt;
&lt;span&gt;数字形文本框:&lt;/span&gt;
&lt;input type="number" value="5678" /&gt;
&lt;/label&gt;
&lt;label&gt;
&lt;span&gt;超出数字的文本框:&lt;/span&gt;
&lt;input type="number" min="1" max="100" value="101" /&gt;
&lt;/label&gt;
&lt;label&gt;
&lt;span&gt;搜索形文本框:&lt;/span&gt;
&lt;input type="search" placeholder="搜索..." /&gt;
&lt;/label&gt;
&lt;label&gt;
&lt;span&gt;禁用的文本框:&lt;/span&gt;
&lt;input type="text" value="2333" disabled /&gt;
&lt;/label&gt;
&lt;label&gt;
&lt;span&gt;只读的文本框:&lt;/span&gt;
&lt;input type="text" value="2333" readonly /&gt;
&lt;/label&gt;
&lt;label&gt;
&lt;span&gt;滑动条:&lt;/span&gt;
&lt;input type="range" name="points" min="1" max="10" value="5" /&gt;
&lt;/label&gt;
&lt;label&gt;
&lt;span&gt;开关按钮:&lt;/span&gt;
&lt;input type="checkbox" class="switch" /&gt;
&lt;/label&gt;
&lt;label&gt;
&lt;span&gt;上传文件:&lt;/span&gt;
&lt;input type="file" /&gt;
&lt;/label&gt;
&lt;label&gt;
&lt;span&gt;上传多文件:&lt;/span&gt;
&lt;input type="file" multiple /&gt;
&lt;/label&gt;
&lt;label&gt;
&lt;span&gt;选择颜色:&lt;/span&gt;
&lt;input type="color" /&gt;
&lt;/label&gt;
&lt;label&gt;
&lt;input type="checkbox" /&gt;多选选项
&lt;/label&gt;
&lt;label&gt;
&lt;input type="radio" /&gt;单选选项
&lt;/label&gt;
&lt;label&gt;
&lt;input type="checkbox" disabled /&gt;禁用的多选选项
&lt;/label&gt;
&lt;label&gt;
&lt;input type="radio" disabled /&gt;禁用的单选选项
&lt;/label&gt;
&lt;label&gt;
&lt;span&gt;个人介绍:&lt;/span&gt;
&lt;textarea placeholder="在此编写你的个人介绍" rows="3"&gt;&lt;/textarea&gt;
&lt;/label&gt;
&lt;label&gt;
&lt;span&gt;选择适合你的英雄:&lt;/span&gt;
&lt;select&gt;
&lt;option&gt;小缤&lt;/option&gt;
&lt;option&gt;小奇&lt;/option&gt;
&lt;option&gt;保罗&lt;/option&gt;
&lt;option&gt;路人甲&lt;/option&gt;
&lt;option&gt;路人乙&lt;/option&gt;
&lt;/select&gt;
&lt;/label&gt;
&lt;label&gt;
&lt;span&gt;选择适合你的伙伴:&lt;/span&gt;
&lt;select multiple&gt;
&lt;option&gt;拉菲&lt;/option&gt;
&lt;option&gt;索菲&lt;/option&gt;
&lt;option&gt;阿卡林&lt;/option&gt;
&lt;option&gt;混沌老师&lt;/option&gt;
&lt;option&gt;埃尔德里奇&lt;/option&gt;
&lt;/select&gt;
&lt;/label&gt;
&lt;label&gt;
&lt;span&gt;原生进度条:&lt;/span&gt;
&lt;progress value="10" max="50"&gt;&lt;/progress&gt;
&lt;/label&gt;
&lt;/fieldset&gt;</code></pre>
</details>
</section>
<section>
<h2 id="fieldset">表单小组:</h2>
<blockquote>PS:给使用 <code>form</code> 或 <code>fieldset</code> 标签的元素添加 <code>inline</code> 类可以使其子选项单行显示。</blockquote>
<div class="demo-block">
<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>
<legend>混搭:</legend>
<div class="row s">
<div class="col-m-4">
<label>
<input type="text" placeholder="名字:" />
</label>
</div>
<div class="col-m-4">
<label>
<input type="text" placeholder="邮箱:" />
</label>
</div>
<div class="col-m-4">
<label>
<input type="text" placeholder="网站:" />
</label>
</div>
<div class="col-m-12">
<label>
<textarea placeholder="在这里留言吧"></textarea>
</label>
</div>
<div class="col-m-12">
<button class="btn yellow" type="submit">提交</button>
</div>
</div>
</fieldset>
</form>
</div>
<details class="code-block">
<summary>查看代码:</summary>
<pre class="language-html"><code>&lt;form&gt;
&lt;fieldset&gt;
&lt;legend&gt;多行:&lt;/legend&gt;
&lt;label&gt;&lt;input type="checkbox" /&gt;多选选项 1&lt;/label&gt;
&lt;label&gt;&lt;input type="checkbox" /&gt;多选选项 2&lt;/label&gt;
&lt;label&gt;&lt;input type="checkbox" /&gt;多选选项 3&lt;/label&gt;
&lt;/fieldset&gt;
&lt;fieldset class="inline"&gt;
&lt;legend&gt;单行:&lt;/legend&gt;
&lt;label&gt;&lt;input type="radio" name="radio" /&gt;单选选项 1&lt;/label&gt;
&lt;label&gt;&lt;input type="radio" name="radio" /&gt;单选选项 2&lt;/label&gt;
&lt;label&gt;&lt;input type="radio" name="radio" /&gt;单选选项 3&lt;/label&gt;
&lt;/fieldset&gt;
&lt;fieldset&gt;
&lt;legend&gt;混搭:&lt;/legend&gt;
&lt;div class="row s"&gt;
&lt;div class="col-m-4"&gt;
&lt;label&gt;
&lt;input type="text" placeholder="名字:" /&gt;
&lt;/label&gt;
&lt;/div&gt;
&lt;div class="col-m-4"&gt;
&lt;label&gt;
&lt;input type="text" placeholder="邮箱:" /&gt;
&lt;/label&gt;
&lt;/div&gt;
&lt;div class="col-m-4"&gt;
&lt;label&gt;
&lt;input type="text" placeholder="网站:" /&gt;
&lt;/label&gt;
&lt;/div&gt;
&lt;div class="col-m-12"&gt;
&lt;label&gt;
&lt;textarea placeholder="在这里留言吧"&gt;&lt;/textarea&gt;
&lt;/label&gt;
&lt;/div&gt;
&lt;div class="col-m-12"&gt;
&lt;button class="btn yellow" type="submit"&gt;提交&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/fieldset&gt;
&lt;/form&gt;</code></pre>
</details>
</section>
<section>
<h2 id="table">表格:</h2>
<p>Kico Style 自带响应式表格系统,须在 <code>table</code> 元素前添加一个类名为 <code>ks-table</code> 的 <code>div</code> 盒子。</p>
<blockquote>PS:表格默认为 100% 尺寸,待表格内文字空间不足时,将会自动出现滚动条以实现响应式。如果想限制表格宽度,请使用栅格系统。</blockquote>
<div class="demo-block">
<div class="ks-table">
<table>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>介绍</th>
</tr>
</thead>
<tbody>
<tr>
<td>小缤</td>
<td>女</td>
<td>13</td>
<td>缤奇的萌妹子,小明很想抱着软哒哒的她呢!</td>
</tr>
<tr>
<td>小奇</td>
<td>男</td>
<td>13</td>
<td>缤奇的全栈工程师,小明认为他是只大佬。</td>
</tr>
<tr>
<td>小明</td>
<td>男</td>
<td>17</td>
<td>缤奇的前端工程师,就是写这个框架的逗比。</td>
</tr>
</tbody>
</table>
</div>
</div>
<details class="code-block">
<summary>查看代码:</summary>
<pre class="language-html"><code data-fill-content></code></pre>
</details>
<blockquote>在提交 <a href="https://github.com/Dreamer-Paul/Kico-Style/commit/a991a2721196a3c529cb872d2d879e2bbaef5902">a991a2</a> 中,已经不会默认禁止元素换行了。如果想要回到此前的方式布局表格,你不妨可以尝试一下 <code>.text-nowrap</code> 类名。</blockquote>
<div class="demo-block">
<div class="ks-table text-nowrap">
<table>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>介绍</th>
</tr>
</thead>
<tbody>
<tr>
<td>小缤</td>
<td>女</td>
<td>13</td>
<td>缤奇的萌妹子,小明很想抱着软哒哒的她呢!</td>
</tr>
<tr>
<td>小奇</td>
<td>男</td>
<td>13</td>
<td>缤奇的全栈工程师,小明认为他是只大佬。</td>
</tr>
<tr>
<td>小明</td>
<td>男</td>
<td>17</td>
<td>缤奇的前端工程师,就是写这个框架的逗比。</td>
</tr>
</tbody>
</table>
</div>
</div>
<details class="code-block">
<summary>查看代码:</summary>
<pre class="language-html"><code data-fill-content></code></pre>
</details>
<p>给表格添加 <code>fill</code> 扩展类即可获得色彩版的效果。</p>
<div class="demo-block">
<div class="ks-table text-nowrap">
<table class="fill">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>介绍</th>
</tr>
</thead>
<tbody>
<tr>
<td>小缤</td>
<td>女</td>
<td>13</td>
<td>缤奇的萌妹子,小明很想抱着软哒哒的她呢!</td>
</tr>
<tr>
<td>小奇</td>
<td>男</td>
<td>13</td>
<td>缤奇的全栈工程师,小明认为他是只大佬。</td>
</tr>
<tr>
<td>小明</td>
<td>男</td>
<td>17</td>
<td>缤奇的前端工程师,就是写这个框架的逗比。</td>
</tr>
</tbody>
</table>
</div>
</div>
<details class="code-block">
<summary>查看代码:</summary>
<pre class="language-html"><code data-fill-content></code></pre>
</details>
<p>如果想做一个内容复杂的表格,需要部分列换行,部分列固定,且不能出现滚动条,你可以结合 HTML 的 <code>colgroup</code> 标签,或者使用 <code>.text-nowrap</code> 类名。</p>
<div class="demo-block">
<table>
<colgroup align="right" style="width: 15em"></colgroup>
<thead>
<tr>
<th>Features</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>Easy Customized</td>
<td>
Use CSS Variable, you can modify the colors, paddings,
and more thing.
</td>
</tr>
<tr>
<td>Reset Default Styles</td>
<td>
Just write HTML code, the default CSS style is just
enough. It looks better than the browser's.
</td>
</tr>
<tr>
<td>Lightweight Code</td>
<td>
Use Kico Style, the base CSS filesize with GZIP can be
less than 7kb. that isn't great?
</td>
</tr>
</tbody>
</table>
</div>
<details class="code-block">
<summary>查看代码:</summary>
<pre class="language-html"><code data-fill-content></code></pre>
</details>
</section>
<section>
<h2 id="media">多媒体:</h2>
<p>一首随机动漫音乐:</p>
<div class="demo-block">
<audio src="https://api.paugram.com/acgm?play=true" controls></audio>
</div>
<details class="code-block">
<summary>查看代码:</summary>
<pre class="language-html"><code data-fill-content></code></pre>
</details>
<p>一个小视频(来源自 <a href="https://cplayer.js.org" target="_blank" rel="nofollow noreferer">cPlayer</a> 项目):</p>
<div class="demo-block">
<video src="https://cplayer.js.org/be6485cecc8295363e6df9fc9b947ce5.mp4" controls></video>
</div>
<details class="code-block">
<summary>查看代码:</summary>
<pre class="language-html"><code data-fill-content></code></pre>
</details>
</section>
</div>
</div>
</main>
<footer>
<a class="to-top" href="#"></a>
<p>© 2023 By <a href="https://paugram.com" target="_blank">Dreamer-Paul</a>.</p>
</footer>
<script src="static/kico.js"></script>
<script src="static/doc.js?v=22.12.25"></script>
<script src="https://cdn.jsdelivr.net/gh/Dreamer-Paul/Single@2.1/static/prism.js"></script>
</body>
</html>