875 lines
38 KiB
HTML
Executable File
875 lines
38 KiB
HTML
Executable File
<!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><h1>H1 超大标题</h1>
|
||
<h2>H2 大标题</h2>
|
||
<h3>H3 小标题</h3>
|
||
<h4>H4 标题</h4>
|
||
<h5>H5 标题</h5>
|
||
<h6>H6 标题</h6></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><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></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><img src="static/saratoga.jpg"/>
|
||
<img src="static/test-image-1.jpg"/>
|
||
<img src="static/test-image-2.jpg"/></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><article>
|
||
<p>早上在 B 站一个原神的视频下方评论了，结果意外的上了热评，这是我少见的第一次上热评，究竟评论了啥捏？</p>
|
||
<blockquote>原神这么火 我还是遇不到一个玩原神的女朋友 😭</blockquote>
|
||
<p>都知道我喜欢自嘲，我心里就想着肯定会有人说其实是因为我本来就没有女朋友，结果这个人他确实出现了！</p>
|
||
<blockquote>有没有一种可能，你是遇不到女朋友 😂</blockquote>
|
||
<p>主要还是受到了此前那位前同事的朋友圈的影响（他说自己是提瓦特认识的女朋友），总不能在朋友圈里发自己是废物吧，就只能把其他地方当树洞，在网上和群里面吐槽了。这下子不少人都知道我母胎单身 20 年了吧！</p>
|
||
</article></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><input class="btn" type="button" value="input 按钮"/>
|
||
<button class="btn">button 按钮</button>
|
||
<a class="btn">a 按钮</a></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><button class="btn blue small">小按钮</button>
|
||
<button class="btn blue">一般按钮</button>
|
||
<button class="btn blue middle">中按钮</button>
|
||
<button class="btn blue large">大按钮</button></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><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></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><button class="btn red" disabled>禁用的按钮</button></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><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></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><span ks-tag="top left" ks-text="我在左上方显示（top left）">
|
||
左上方显示
|
||
</span>
|
||
<span ks-tag="bottom right" ks-text="我在右下方显示（bottom right）">
|
||
右下方显示
|
||
</span></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 (
|
||
<div className={clsx(styles.drawer, visible && styles.active)}>
|
||
{children}
|
||
</div>
|
||
);
|
||
}</code></pre>
|
||
</div>
|
||
<details class="code-block">
|
||
<summary>查看代码：</summary>
|
||
<pre class="language-html"><code><p><code>alert("Hello World!")</code></p>
|
||
<pre><code>function Drawer({ visible, children }) {
|
||
return (
|
||
<div className={clsx(styles.drawer, visible && styles.active)}>
|
||
{children}
|
||
</div>
|
||
);
|
||
}</code></pre>
|
||
</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><h3>自驾游采购清单：</h3>
|
||
<ul>
|
||
<li>帐篷</li>
|
||
<li>
|
||
吃的
|
||
<ul>
|
||
<li>零食</li>
|
||
<li>钓上来的鱼</li>
|
||
<li>鱼丸、火腿肠</li>
|
||
</ul>
|
||
</li>
|
||
<li>旅行背包</li>
|
||
<li>烧烤、钓鱼装备</li>
|
||
</ul></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><h3>明天要做的事情：</h3>
|
||
<ol>
|
||
<li>去公司上班
|
||
<ol>
|
||
<li>和同事问好</li>
|
||
<li>完善项目代码</li>
|
||
<li>和项目组交谈事务</li>
|
||
</ol>
|
||
</li>
|
||
<li>和公司同事去吃下午茶</li>
|
||
<li>和女朋友约会（并不可能）</li>
|
||
</ol></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><h3>我的梦想：</h3>
|
||
<dl>
|
||
<dt>拥有一只女朋友</dt>
|
||
<dd>长相可爱，愿意相互包容</dd>
|
||
<dt>开发属于自己的框架</dt>
|
||
<dd>已实现，也就是 Kico Style</dd>
|
||
<dt>建立缤奇科技公司</dt>
|
||
<dd>选址在珠三角地区为宜</dd>
|
||
</dl></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><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="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>
|
||
</select>
|
||
</label>
|
||
<label>
|
||
<span>原生进度条：</span>
|
||
<progress value="10" max="50"></progress>
|
||
</label>
|
||
</fieldset></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><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></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>
|