commit
c8f836c9cf
|
|
@ -0,0 +1,282 @@
|
||||||
|
<!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>
|
||||||
|
<p>优雅的过渡动画，为你的页面添加另一份趣味！</p>
|
||||||
|
<blockquote>使用 CSS 引用对应的动画，这样会使得你的代码简洁且能更好的扩展特性。</blockquote>
|
||||||
|
<p>在你的选择器里插入 <code>animation</code> 属性，并添加框架内置的 <code>@keyframes</code> 即可实现！</p>
|
||||||
|
<div class="demo-block animation-demo">
|
||||||
|
<button class="btn yellow" style="animation: rotate linear 2s infinite; -webkit-animation: rotate linear 2s infinite">_(:з」∠)_</button>
|
||||||
|
</div>
|
||||||
|
<details class="code-block">
|
||||||
|
<summary>查看代码：</summary>
|
||||||
|
<pre class="language-css"><code>.test-animation {
|
||||||
|
animation: rotate linear 2s infinite; /* 动画名称 动画函数曲线 时长 */
|
||||||
|
}</code></pre>
|
||||||
|
</details>
|
||||||
|
<div class="ks-table">
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>类型</th>
|
||||||
|
<th>名称</th>
|
||||||
|
<th>行为</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>淡入淡出</td>
|
||||||
|
<td>fade-in</td>
|
||||||
|
<td>一般淡入</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>淡入淡出</td>
|
||||||
|
<td>fade-off</td>
|
||||||
|
<td>一般淡出</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>淡入淡出</td>
|
||||||
|
<td>fade-in-top</td>
|
||||||
|
<td>向上淡入</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>淡入淡出</td>
|
||||||
|
<td>fade-in-bottom</td>
|
||||||
|
<td>向下淡入</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>淡入淡出</td>
|
||||||
|
<td>fade-in-left</td>
|
||||||
|
<td>向左淡入</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>淡入淡出</td>
|
||||||
|
<td>fade-in-right</td>
|
||||||
|
<td>向右淡入</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>淡入缩放</td>
|
||||||
|
<td>fade-small-large</td>
|
||||||
|
<td>从大变小的淡入</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>淡入缩放</td>
|
||||||
|
<td>fade-large-small</td>
|
||||||
|
<td>从小变大的淡入</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>淡入缩放</td>
|
||||||
|
<td>fade-larger-small</td>
|
||||||
|
<td>从更大变小的淡入</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>淡入缩放</td>
|
||||||
|
<td>fade-small-larger</td>
|
||||||
|
<td>从小变更大的淡出</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<tr>
|
||||||
|
<td>缩放</td>
|
||||||
|
<td>scale-small-large</td>
|
||||||
|
<td>从小变大</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>缩放</td>
|
||||||
|
<td>scale-large-small</td>
|
||||||
|
<td>从大变小</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>平移</td>
|
||||||
|
<td>up-and-down</td>
|
||||||
|
<td>上下摆动</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>平移</td>
|
||||||
|
<td>left-and-right</td>
|
||||||
|
<td>左右摆动</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>旋转</td>
|
||||||
|
<td>rotate</td>
|
||||||
|
<td>旋转</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2 id="animate-fade">淡入淡出动画：</h2>
|
||||||
|
<div class="demo-block animation-demo">
|
||||||
|
<button class="btn yellow" style="animation: fade-in 1s infinite">一般淡入</button>
|
||||||
|
<button class="btn yellow" style="animation: fade-off 1s infinite">一般淡出</button>
|
||||||
|
<button class="btn yellow" style="animation: fade-in-top 1s infinite">向上淡入</button>
|
||||||
|
<button class="btn yellow" style="animation: fade-in-bottom 1s infinite">向下淡入</button>
|
||||||
|
<button class="btn yellow" style="animation: fade-in-left 1s infinite">向左淡入</button>
|
||||||
|
<button class="btn yellow" style="animation: fade-in-right 1s infinite">向右淡入</button>
|
||||||
|
</div>
|
||||||
|
<details class="code-block">
|
||||||
|
<summary>查看代码：</summary>
|
||||||
|
<pre class="language-html"><code><button class="btn yellow" style="animation: fade-in 1s infinite">一般淡入</button>
|
||||||
|
<button class="btn yellow" style="animation: fade-off 1s infinite">一般淡出</button>
|
||||||
|
<button class="btn yellow" style="animation: fade-in-top 1s infinite">向上淡入</button>
|
||||||
|
<button class="btn yellow" style="animation: fade-in-bottom 1s infinite">向下淡入</button>
|
||||||
|
<button class="btn yellow" style="animation: fade-in-left 1s infinite">向左淡入</button>
|
||||||
|
<button class="btn yellow" style="animation: fade-in-right 1s infinite">向右淡入</button></code></pre>
|
||||||
|
</details>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<h2 id="animate-fade-scale">淡入缩放动画：</h2>
|
||||||
|
<div class="demo-block animation-demo">
|
||||||
|
<button class="btn yellow" style="animation: fade-small-large 1s infinite">从小到大</button>
|
||||||
|
<button class="btn yellow" style="animation: fade-large-small 1s infinite">从大到小</button>
|
||||||
|
<button class="btn yellow" style="animation: fade-larger-small 1s infinite">从更大缩小</button>
|
||||||
|
<button class="btn yellow" style="animation: fade-small-larger 1s infinite">从正常放大</button>
|
||||||
|
</div>
|
||||||
|
<details class="code-block">
|
||||||
|
<summary>查看代码：</summary>
|
||||||
|
<pre class="language-html"><code><button class="btn yellow" style="animation: fade-small-large 1s infinite">从小到大</button>
|
||||||
|
<button class="btn yellow" style="animation: fade-large-small 1s infinite">从大到小</button>
|
||||||
|
<button class="btn yellow" style="animation: fade-larger-small 1s infinite">从更大缩小</button>
|
||||||
|
<button class="btn yellow" style="animation: fade-small-larger 1s infinite">从正常放大</button></code></pre>
|
||||||
|
</details>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<h2 id="animate-scale">缩放动画：</h2>
|
||||||
|
<div class="demo-block animation-demo">
|
||||||
|
<button class="btn yellow" style="animation: scale-small-large 1s infinite">从小变大</button>
|
||||||
|
<button class="btn yellow" style="animation: scale-large-small 1s infinite">从大变小</button>
|
||||||
|
</div>
|
||||||
|
<details class="code-block">
|
||||||
|
<summary>查看代码：</summary>
|
||||||
|
<pre class="language-html"><code><button class="btn yellow" style="animation: scale-small-large 1s infinite"">从小变大</button>
|
||||||
|
<button class="btn yellow" style="animation: scale-large-small 1s infinite">从大变小</button></code></pre>
|
||||||
|
</details>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<h2 id="animate-moving">平移动画：</h2>
|
||||||
|
<div class="demo-block animation-demo">
|
||||||
|
<button class="btn yellow" style="animation: up-and-down alternate 1s infinite">上下运动</button>
|
||||||
|
<button class="btn yellow" style="animation: left-and-right alternate 1s infinite">左右运动</button>
|
||||||
|
</div>
|
||||||
|
<details class="code-block">
|
||||||
|
<summary>查看代码：</summary>
|
||||||
|
<pre class="language-html"><code><button class="btn yellow" style="animation: up-and-down alternate 1s infinite">上下运动</button>
|
||||||
|
<button class="btn yellow" style="animation: left-and-right alternate 1s infinite">左右运动</button></code></pre>
|
||||||
|
</details>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<h2 id="animate-rotate">旋转动画：</h2>
|
||||||
|
<div class="demo-block animation-demo">
|
||||||
|
<button class="btn yellow" style="animation: rotate 1s infinite">旋转</button>
|
||||||
|
</div>
|
||||||
|
<details class="code-block">
|
||||||
|
<summary>查看代码：</summary>
|
||||||
|
<pre class="language-html"><code><button class="btn yellow" style="animation: rotate 1s infinite">旋转</button></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>
|
||||||
|
|
@ -0,0 +1,424 @@
|
||||||
|
<!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" class="active" 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="#creator">文档操作</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#creator">元素创建</a></li>
|
||||||
|
<li><a href="#selector">元素选择</a></li>
|
||||||
|
<li><a href="#each">批量运行</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li><a href="#notice">浏览体验</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#notice">消息弹框</a></li>
|
||||||
|
<li><a href="#image">图片灯箱</a></li>
|
||||||
|
<li><a href="#lazy">图片懒加载</a></li>
|
||||||
|
<li><a href="#ajax">快速 AJAX</a></li>
|
||||||
|
<li><a href="#scroll-to">平滑滚动</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</aside>
|
||||||
|
<main class="content">
|
||||||
|
<div class="wrap min">
|
||||||
|
<div class="ks-title">
|
||||||
|
<h1>组件</h1>
|
||||||
|
<h2>Kico Style 的扩展组件，可提升网页的交互体验</h2>
|
||||||
|
</div>
|
||||||
|
<article class="ks-content">
|
||||||
|
<blockquote>📢：作者已经逐渐转移至 Vue/React 阵营，本框架的原生 JS 组件及其样式则不再作为优先维护对象，敬请谅解～ 但基础的 CSS 框架依然会持续更新！</blockquote>
|
||||||
|
<section id="creator">
|
||||||
|
<h1>元素创建</h1>
|
||||||
|
<p>快速创建虚拟 DOM 元素。</p>
|
||||||
|
<div class="ks-table">
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>参数</th>
|
||||||
|
<th>可选值</th>
|
||||||
|
<th>说明</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>obj <code>必须</code></td>
|
||||||
|
<td>字符串</td>
|
||||||
|
<td>新建元素采用的标签名</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>prop { id }</td>
|
||||||
|
<td>字符串</td>
|
||||||
|
<td>新建元素的 ID（id）</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>prop { href }</td>
|
||||||
|
<td>字符串</td>
|
||||||
|
<td>新建外联元素的地址（href）</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>prop { class }</td>
|
||||||
|
<td>字符串</td>
|
||||||
|
<td>新建元素的类名（class）</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>prop { text }</td>
|
||||||
|
<td>字符串</td>
|
||||||
|
<td>新建元素的内容（innerText）</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>prop { html }</td>
|
||||||
|
<td>字符串</td>
|
||||||
|
<td>新建元素的 HTML 内容（innerHTML）</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>prop { child }</td>
|
||||||
|
<td>DOM 对象 | 数组</td>
|
||||||
|
<td>新建元素添加的子元素，支持单条或是以数组形式添加多条</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>prop { attr }</td>
|
||||||
|
<td>对象 | 数组</td>
|
||||||
|
<td>新建元素添加的属性，支持单条或是以数组形式添加多条</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<p>示例：创建一个 <code>p</code> 标签的对象</p>
|
||||||
|
<pre class="language-javascript"><code>ks.create("p");
|
||||||
|
|
||||||
|
// 返回 <p></p></code></pre>
|
||||||
|
<p>示例：创建一个 <code>div</code> 标签的对象，并给予 <code>test</code> 类名</p>
|
||||||
|
<pre><code>ks.create("div", {class: "test"});
|
||||||
|
|
||||||
|
// 返回 <div class="test"></div></code></pre>
|
||||||
|
<p>示例：创建一个 <code>div</code> 标签的对象，并给予 <code>ks-thumb</code> 和 <code>ks-original</code> 属性用于设置懒加载的图片灯箱</p>
|
||||||
|
<pre class="language-javascript"><code>var item = ks.create("div", {
|
||||||
|
class: "gallery-item",
|
||||||
|
attr: [
|
||||||
|
{name: "ks-thumb", value: `/static/saratoga-thumb.jpg`},
|
||||||
|
{name: "ks-original", value: `/static/saratoga.jpg`}
|
||||||
|
]
|
||||||
|
});
|
||||||
|
|
||||||
|
// 返回 <div class="gallery-item" ks-thumb="static/saratoga-thumb.jpg" ks-original="static/saratoga.jpg"></div>
|
||||||
|
|
||||||
|
// 设置图片灯箱与懒加载
|
||||||
|
ks.image(".gallery-item");
|
||||||
|
ks.lazy(".gallery-item", true);
|
||||||
|
</code></pre>
|
||||||
|
<p>示例：创建一个 <code>div</code> 标签的对象，在给予 <code>hello</code> 类名的同时，写入“这是一个 DIV”的内容</p>
|
||||||
|
<pre class="language-javascript"><code>ks.create("div", {
|
||||||
|
class: "hello",
|
||||||
|
text: "这是一个 DIV"
|
||||||
|
});
|
||||||
|
|
||||||
|
// 返回 <div class="hello">这是一个 DIV</div></code></pre>
|
||||||
|
<p>示例：添加一个有多重子元素的 <code>div</code> 对象</p>
|
||||||
|
<pre class="language-javascript"><code>ks.create("div", {
|
||||||
|
class: "first",
|
||||||
|
text: "这是第一层 DIV",
|
||||||
|
child: ks.create("div", {
|
||||||
|
class: "second",
|
||||||
|
text: "这是第二层 DIV",
|
||||||
|
child: ks.create("div", {
|
||||||
|
class: "third",
|
||||||
|
text: "这是第三层 DIV"
|
||||||
|
})
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
// 返回
|
||||||
|
// <div class="first">这是第一层 DIV
|
||||||
|
// <div class="second">这是第二层 DIV
|
||||||
|
// <div class="third">这是第三层 DIV</div>
|
||||||
|
// </div>
|
||||||
|
// </div>
|
||||||
|
</code></pre>
|
||||||
|
</section>
|
||||||
|
<section id="selector">
|
||||||
|
<h1>元素选择器</h1>
|
||||||
|
<p>快速选择单个/多个符合条件的元素，像编写 CSS 选择器一样简单。</p>
|
||||||
|
<p>示例：选择标签为 <code>header</code> 的第一个对象</p>
|
||||||
|
<pre class="language-javascript"><code>ks.select("header");</code></pre>
|
||||||
|
<p>示例：选择类名为 <code>post-content</code> 的所有图片</p>
|
||||||
|
<pre class="language-javascript"><code>ks.selectAll(".post-content img");</code></pre>
|
||||||
|
<blockquote>PS：ks() 返回的内容和 ks.selectAll() 是相同的，所以上面的代码也可以这样写：</blockquote>
|
||||||
|
<pre class="language-javascript"><code>ks(".post-content img");</code></pre>
|
||||||
|
</section>
|
||||||
|
<section id="each">
|
||||||
|
<h1>批量运行</h1>
|
||||||
|
<p>快速设置多个数组或是 DOM 元素。</p>
|
||||||
|
<div class="ks-table">
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>参数</th>
|
||||||
|
<th>可选值</th>
|
||||||
|
<th>说明</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>obj <code>必须</code></td>
|
||||||
|
<td>数组 | NodeList</td>
|
||||||
|
<td>被执行操作的对象</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>fn <code>必须</code></td>
|
||||||
|
<td>函数</td>
|
||||||
|
<td>对 obj 执行的操作</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>fn(i)</td>
|
||||||
|
<td>被执行的其中一个对象</td>
|
||||||
|
<td>当前执行的 obj 对象</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>fn(j)</td>
|
||||||
|
<td>被执行的对象索引值</td>
|
||||||
|
<td>当前执行的 obj 对象索引值</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>fn(k)</td>
|
||||||
|
<td>被执行的对象整体</td>
|
||||||
|
<td>也就是 obj 本身</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<p>示例：批量选择 <code>h1</code> 元素，并设置其字体样式</p>
|
||||||
|
<pre class="language-javascript"><code>ks("h1").each(function (i) {
|
||||||
|
i.style.color = "green";
|
||||||
|
i.style.fontWeight = "bold";
|
||||||
|
})</code></pre>
|
||||||
|
</section>
|
||||||
|
<section id="notice">
|
||||||
|
<h1>消息弹框</h1>
|
||||||
|
<p>使用消息弹框，比 <code>alert</code> 更加友好，提升用户体验。</p>
|
||||||
|
<div class="show-notice">
|
||||||
|
<div class="ks-notice">
|
||||||
|
<span class="content">静态的消息弹框样式</span>
|
||||||
|
</div>
|
||||||
|
<div class="ks-notice dismiss">
|
||||||
|
<span class="content">静态的消息弹框样式</span>
|
||||||
|
<span class="close"></span>
|
||||||
|
</div>
|
||||||
|
<div class="ks-notice red">
|
||||||
|
<span class="content">静态的消息弹框样式</span>
|
||||||
|
</div>
|
||||||
|
<div class="ks-notice yellow">
|
||||||
|
<span class="content">静态的消息弹框样式</span>
|
||||||
|
</div>
|
||||||
|
<div class="ks-notice blue">
|
||||||
|
<span class="content">静态的消息弹框样式</span>
|
||||||
|
</div>
|
||||||
|
<div class="ks-notice green">
|
||||||
|
<span class="content">静态的消息弹框样式</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ks-table">
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>参数</th>
|
||||||
|
<th>可选值</th>
|
||||||
|
<th>说明</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>content <code>必须</code></td>
|
||||||
|
<td>字符串</td>
|
||||||
|
<td>要输出给弹框的内容</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>attr</td>
|
||||||
|
<td><code>time</code> <code>color</code> <code>overlay</code></td>
|
||||||
|
<td>子属性，配置时间、颜色和遮罩</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>attr { time }</td>
|
||||||
|
<td>整数，单位为毫秒</td>
|
||||||
|
<td>指定弹框显示之后的移除时间，默认为手动关闭</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>attr { color }</td>
|
||||||
|
<td><code>red</code> <code>yellow</code> <code>blue</code> <code>green</code></td>
|
||||||
|
<td>指定弹框颜色，默认为 <code>null</code></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<p>示例：一个在 1.5 秒后自动清除的弹窗</p>
|
||||||
|
<pre class="language-javascript"><code>ks.notice("这是一个有时间的弹窗测试", {
|
||||||
|
time: 1500
|
||||||
|
});</code></pre>
|
||||||
|
<p><button class="btn blue small customed" onclick="ks.notice('这是一个有时间的弹窗', {time: 1500});">点击激活</button></p>
|
||||||
|
<p>示例：没有时长的蓝色弹窗</p>
|
||||||
|
<pre class="language-javascript"><code>ks.notice("这是一个蓝色的可关闭弹窗", {
|
||||||
|
color: "blue"
|
||||||
|
});</code></pre>
|
||||||
|
<p><button class="btn blue small customed" onclick="ks.notice('这是一个蓝色的可关闭弹窗', {color: 'blue'});">点击激活</button></p>
|
||||||
|
</section>
|
||||||
|
<!--<section id="overlay">
|
||||||
|
<h1>屏幕遮罩</h1>
|
||||||
|
<p>使用屏幕遮罩可以突出显示一些内容，支持添加点击事件。</p>
|
||||||
|
<div class="ks-table">
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>参数</th>
|
||||||
|
<th>可选值</th>
|
||||||
|
<th>说明</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>attr</td>
|
||||||
|
<td><code>time</code> <code>code</code></td>
|
||||||
|
<td>属性对象</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>attr { time }</td>
|
||||||
|
<td>整数，单位为毫秒</td>
|
||||||
|
<td>遮罩消失的时间</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>attr { code }</td>
|
||||||
|
<td>函数体</td>
|
||||||
|
<td>点击遮罩触发执行的代码</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<p>示例：添加一个 1.5 秒的弹窗</p>
|
||||||
|
<pre><code>ks.overlay({
|
||||||
|
time: 1500
|
||||||
|
});</code></pre>
|
||||||
|
<p><button class="btn blue small" onclick="ks.overlay({time: 1500});">点击激活</button></p>
|
||||||
|
<p>示例：添加一个执行代码的弹窗</p>
|
||||||
|
<pre><code>ks.overlay({
|
||||||
|
code: function () {
|
||||||
|
alert("执行了一段代码");
|
||||||
|
}
|
||||||
|
});</code></pre>
|
||||||
|
<p><button class="btn blue small" onclick="ks.overlay({code: function () {alert('执行了一段代码');}});">点击激活</button></p>
|
||||||
|
</section>-->
|
||||||
|
<section id="image">
|
||||||
|
<h1>图片灯箱</h1>
|
||||||
|
<p>使用图片灯箱可以让页面的图片放大展示。</p>
|
||||||
|
<p><img src="static/saratoga.jpg" title="萨拉托加"/></p>
|
||||||
|
<img src="static/test-image-1.jpg"/>
|
||||||
|
<p>通过增加 <code>ks.original</code> 字段，还可以实现缩略图点击变成原图的效果！</p>
|
||||||
|
<p><img src="static/saratoga-thumb.jpg" title="萨拉托加缩略图" ks-original="static/saratoga.jpg"/></p>
|
||||||
|
<p>使用 <code>div</code> 也可以增加灯箱，只是必须增加 <code>ks.original</code> 字段才可以展示出来。</p>
|
||||||
|
<p class="original" style="max-width: 300px; height: 300px; background-image: url(static/saratoga-thumb.jpg)" ks-original="static/saratoga.jpg"></p>
|
||||||
|
<p>示例：选中所有 <code>article</code> 标签里面的图片</p>
|
||||||
|
<pre class="language-javascript"><code>ks.image("article img");</code></pre>
|
||||||
|
<p>示例：选中包含原图字段的可触发 <code>div</code></p>
|
||||||
|
<pre class="language-javascript"><code>ks.image(".original");</code></pre>
|
||||||
|
<blockquote>PS：如果在一个页面里反复调用本函数，将等同于 <b>重置</b>，此前执行的对象将失效！</blockquote>
|
||||||
|
</section>
|
||||||
|
<section id="lazy">
|
||||||
|
<h1>图片懒加载</h1>
|
||||||
|
<p>使用图片懒加载可以提升浏览体验，减小服务器并发压力。</p>
|
||||||
|
<p>通过给 <code>img</code> 元素增加 <code>ks.original</code> 字段，并运行即可实现懒加载。</p>
|
||||||
|
<p>如果想让用户认为这是一个正在加载的图片，建议你将图片的 <code>src</code> 设置成一张以示加载的图片。</p>
|
||||||
|
<pre class="language-javascript"><code><img src="示例加载的图片地址" ks-original="懒加载完成后的图片地址"/></code></pre>
|
||||||
|
<p><img id="you" src="static/load.gif" alt="萨拉托加缩略图" ks-original="static/test-image-1.jpg"/></p>
|
||||||
|
<p>如果想使得一个块元素的 <code>background</code> 背景图片实现懒加载，依旧需要只需要增加 <code>ks.original</code> 字段，并将额外一个参数设置为 <code>true</code> 字段才可以实现懒加载。</p>
|
||||||
|
<p class="original" style="height: 500px; background: url(static/load.gif) center/cover" ks-original="static/test-image-1.jpg"></p>
|
||||||
|
<p>示例：选中所有 <code>img</code> 图片，并开启懒加载</p>
|
||||||
|
<pre class="language-javascript"><code>ks.lazy("img");</code></pre>
|
||||||
|
<p>示例：选中所有类名为 <code>original</code> 的块元素，并对其实现背景形式的懒加载。</p>
|
||||||
|
<pre class="language-javascript"><code>ks.lazy(".original", true);</code></pre>
|
||||||
|
</section>
|
||||||
|
<section id="ajax">
|
||||||
|
<h1>快速 AJAX</h1>
|
||||||
|
<p>和 JQuery 类似的一个简易 AJAX 功能，在不刷新网页的情况下快速更新页面内容。</p>
|
||||||
|
<p>示例：一个带了请求头的 GET 请求</p>
|
||||||
|
<pre class="language-javascript"><code>ks.ajax({
|
||||||
|
method: "GET",
|
||||||
|
data: {
|
||||||
|
text: "Yeah!"
|
||||||
|
},
|
||||||
|
header: [
|
||||||
|
["sended", "Dreamer-Paul"]
|
||||||
|
],
|
||||||
|
url: 手动指定 URL,
|
||||||
|
success: function (req){
|
||||||
|
console.log("成功了");
|
||||||
|
console.log(req); // 返回的 XHR 对象
|
||||||
|
},
|
||||||
|
failed: function (req){
|
||||||
|
console.log("失败了");
|
||||||
|
console.log(req); // 返回的 XHR 对象
|
||||||
|
}
|
||||||
|
});</code></pre>
|
||||||
|
<p>示例：一个 POST 请求</p>
|
||||||
|
<pre class="language-javascript"><code>ks.ajax({
|
||||||
|
method: "POST",
|
||||||
|
data: {
|
||||||
|
id: 5,
|
||||||
|
text: "Yeah!"
|
||||||
|
},
|
||||||
|
url: "post",
|
||||||
|
success: function (req){
|
||||||
|
console.log("成功了");
|
||||||
|
console.log(req); // 返回的 XHR 对象
|
||||||
|
},
|
||||||
|
failed: function (req){
|
||||||
|
console.log("失败了");
|
||||||
|
console.log(req); // 返回的 XHR 对象
|
||||||
|
}
|
||||||
|
});</code></pre>
|
||||||
|
</section>
|
||||||
|
<section id="scroll-to">
|
||||||
|
<h1>平滑滚动 <em>Beta</em></h1>
|
||||||
|
<p>通过添加了页面锚链接的 <code>a</code> 元素，平滑滚动页面到对应的元素，可添加偏移值。</p>
|
||||||
|
<p>示例：选中 <code>.sub-sidebar</code> 元素里面的所有 <code>a</code> 链接，在点击它们的时候，页面将会平滑滚动到其指定的对应内容。同时保留 <code>100px</code> 的偏移间距。</p>
|
||||||
|
<pre class="language-javascript"><code>ks.scrollTo(".sub-sidebar a", 100);</code></pre>
|
||||||
|
<p>或者是</p>
|
||||||
|
<pre class="language-javascript"><code>ks(".sub-sidebar a").scrollTo(100);</code></pre>
|
||||||
|
</section>
|
||||||
|
</article>
|
||||||
|
</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>
|
||||||
|
ks("#you").lazy();
|
||||||
|
ks(".original").lazy(true);
|
||||||
|
</script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/Dreamer-Paul/Single@2.1/static/prism.js"></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -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><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>
|
||||||
|
|
@ -0,0 +1,400 @@
|
||||||
|
<!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>
|
||||||
|
<p>Kico Style 采用了类似 BootStrap 的 12 格布局，可用于手机，平板和台式机，并设置有三个尺寸的栅格系统。通过改变您的浏览器宽度，即可体验到不同类的效果 😉</p>
|
||||||
|
<p><del>建议在一行内不要使栅格超过总和 12，避免间距出现错误。</del>（在新版已经支持多行展示，但会通过清除底部 <code>margin</code> 的方式纠正间距，建议为此保留足够的空间）同时建议在一行内不要混用不同类型的 Column 列元素。</p>
|
||||||
|
<section>
|
||||||
|
<h2 id="grids-size">栅格尺寸：</h2>
|
||||||
|
<p>通过设置栅格尺寸，就可以快速构建一套多元化的响应式布局。</p>
|
||||||
|
<div class="demo-block grids-size-demo">
|
||||||
|
<div class="row s">
|
||||||
|
<div class="col-6">
|
||||||
|
<p>col-6</p>
|
||||||
|
</div>
|
||||||
|
<div class="col-6">
|
||||||
|
<p>col-6</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-s-4">
|
||||||
|
<p>col-s-4</p>
|
||||||
|
</div>
|
||||||
|
<div class="col-s-4">
|
||||||
|
<p>col-s-4</p>
|
||||||
|
</div>
|
||||||
|
<div class="col-s-4">
|
||||||
|
<p>col-s-4</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-m-3">
|
||||||
|
<p>.col-m-3</p>
|
||||||
|
</div>
|
||||||
|
<div class="col-m-3">
|
||||||
|
<p>.col-m-3</p>
|
||||||
|
</div>
|
||||||
|
<div class="col-m-3">
|
||||||
|
<p>.col-m-3</p>
|
||||||
|
</div>
|
||||||
|
<div class="col-m-3">
|
||||||
|
<p>.col-m-3</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-l-6">
|
||||||
|
<p>col-l-6</p>
|
||||||
|
</div>
|
||||||
|
<div class="col-l-6">
|
||||||
|
<p>col-l-6</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<details class="code-block">
|
||||||
|
<summary>查看代码：</summary>
|
||||||
|
<pre class="language-html"><code data-fill-content></code></pre>
|
||||||
|
</details>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<h2 id="grids-auto">自动栅格</h2>
|
||||||
|
<p>通过设置自动栅格，可以构建五栏布局（需根据子元素内容来决定），或是填充单行其余剩下的空间。</p>
|
||||||
|
<div class="demo-block grids-auto-demo">
|
||||||
|
<div class="row s">
|
||||||
|
<div class="col-auto">
|
||||||
|
<p>col-auto</p>
|
||||||
|
</div>
|
||||||
|
<div class="col-auto">
|
||||||
|
<p>col-auto</p>
|
||||||
|
</div>
|
||||||
|
<div class="col-auto">
|
||||||
|
<p>col-auto</p>
|
||||||
|
</div>
|
||||||
|
<div class="col-auto">
|
||||||
|
<p>col-auto</p>
|
||||||
|
</div>
|
||||||
|
<div class="col-auto">
|
||||||
|
<p>col-auto</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-3">
|
||||||
|
<p>col-3</p>
|
||||||
|
</div>
|
||||||
|
<div class="col-4">
|
||||||
|
<p>col-4</p>
|
||||||
|
</div>
|
||||||
|
<div class="col-auto">
|
||||||
|
<p>col-auto</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<details class="code-block">
|
||||||
|
<summary>查看代码：</summary>
|
||||||
|
<pre class="language-html"><code data-fill-content></code></pre>
|
||||||
|
</details>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<h2 id="grids-info">栅格类型：</h2>
|
||||||
|
<p>通过设置栅格类型，可以增强该栅格的响应式效果。</p>
|
||||||
|
<div class="ks-table">
|
||||||
|
<table style="min-width: 45em">
|
||||||
|
<colgroup align="right" style="width: 7em"></colgroup>
|
||||||
|
<colgroup align="right" style="width: 8em"></colgroup>
|
||||||
|
<colgroup align="right" style="width: 20em"></colgroup>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>适用环境</th>
|
||||||
|
<th>类名</th>
|
||||||
|
<th>行为</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>固定</td>
|
||||||
|
<td><code>.col-*</code></td>
|
||||||
|
<td>始终为横向摆放，死都不会改（叠加后面的类则作为小于 600px 的设置，不竖向摆放）</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>手机</td>
|
||||||
|
<td><code>.col-s-*</code></td>
|
||||||
|
<td>大于 600px 的屏幕将更换为横向摆放</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>平板</td>
|
||||||
|
<td><code>.col-m-*</code></td>
|
||||||
|
<td>大于 900px 的屏幕将更换为横向摆放</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>台式机</td>
|
||||||
|
<td><code>.col-l-*</code></td>
|
||||||
|
<td>大于 1024px 的屏幕将更换为横向摆放</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<h2 id="grids-padding">栅格间距：</h2>
|
||||||
|
<p>通过栅格间距，可以用更窄的方式设计较为传统的页面。在 <code>.row</code> 元素上设置即可。</p>
|
||||||
|
<div class="ks-table">
|
||||||
|
<table style="min-width: 40em">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>间距大小</th>
|
||||||
|
<th>类名</th>
|
||||||
|
<th>描述</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>0</td>
|
||||||
|
<td><code>.full</code></td>
|
||||||
|
<td>没有间距</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>1em</td>
|
||||||
|
<td><code>.s</code></td>
|
||||||
|
<td>较窄的间距</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>2em</td>
|
||||||
|
<td>无需添加</td>
|
||||||
|
<td>默认间距</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>2.5em</td>
|
||||||
|
<td><code>.m</code></td>
|
||||||
|
<td>较宽间距</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>3em</td>
|
||||||
|
<td><code>.l</code></td>
|
||||||
|
<td>宽间距</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>1em/2em</td>
|
||||||
|
<td><code>auto</code></td>
|
||||||
|
<td>自适应间距 <em>新/推荐</em></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<div class="demo-block grids-padding-demo">
|
||||||
|
<div class="row auto">
|
||||||
|
<div class="col-6">
|
||||||
|
<p>自动间距的栅格</p>
|
||||||
|
</div>
|
||||||
|
<div class="col-6">
|
||||||
|
<p>手机上变窄</p>
|
||||||
|
</div>
|
||||||
|
<div class="col-6">
|
||||||
|
<p>电脑上默认宽</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<details class="code-block">
|
||||||
|
<summary>查看代码：</summary>
|
||||||
|
<pre class="language-html"><code data-fill-content></code></pre>
|
||||||
|
</details>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<h2 id="columns-align">对齐方式：</h2>
|
||||||
|
<p>通过设置对齐方式，可以实现一些用 <code>Float</code> 浮动方案较难解决的垂直居中对齐方式。</p>
|
||||||
|
<div class="ks-table">
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>对齐方式</th>
|
||||||
|
<th>类名</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>左上</td>
|
||||||
|
<td>不添加任何类</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>右上</td>
|
||||||
|
<td><code>right</code> 或 <code>right top</code></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>左下</td>
|
||||||
|
<td><code>bottom</code> 或 <code>left bottom</code></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>右下</td>
|
||||||
|
<td><code>right bottom</code></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>全局居中</td>
|
||||||
|
<td><code>center</code></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>左居中</td>
|
||||||
|
<td><code>left center</code></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>右居中</td>
|
||||||
|
<td><code>right center</code></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>上居中</td>
|
||||||
|
<td><code>top center</code></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>下居中</td>
|
||||||
|
<td><code>bottom center</code></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>左下</td>
|
||||||
|
<td><code>bottom</code> 或 <code>left bottom</code></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>右下</td>
|
||||||
|
<td><code>right bottom</code></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>电脑为左，手机为横向居中</td>
|
||||||
|
<td><code>to-center</code> 或 <code>left to-center</code></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>电脑为右，手机为横向居中</td>
|
||||||
|
<td><code>right to-center</code></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<h2 id="columns-hide">栅格隐藏：</h2>
|
||||||
|
<p>通过设置栅格隐藏扩展类 <code>hide-s</code>，<code>hide-m</code>，<code>hide-l</code> 就可以在对应宽度时隐藏该栅格。</p>
|
||||||
|
<div class="demo-block columns-hide-demo">
|
||||||
|
<div class="row s">
|
||||||
|
<div class="col-s-4 hide-s">
|
||||||
|
<p>在小于 600px 时隐藏</p>
|
||||||
|
</div>
|
||||||
|
<div class="col-m-4 hide-m">
|
||||||
|
<p>在小于 900px 时隐藏</p>
|
||||||
|
</div>
|
||||||
|
<div class="col-l-4 hide-l">
|
||||||
|
<p>在小于 1024px 时隐藏</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<details class="code-block">
|
||||||
|
<summary>查看代码：</summary>
|
||||||
|
<pre class="language-html"><code><div class="row s">
|
||||||
|
<div class="col-s-4 hide-s">
|
||||||
|
<p>在小于 600px 时隐藏</p>
|
||||||
|
</div>
|
||||||
|
<div class="col-m-4 hide-m">
|
||||||
|
<p>在小于 900px 时隐藏</p>
|
||||||
|
</div>
|
||||||
|
<div class="col-l-4 hide-l">
|
||||||
|
<p>在小于 1024px 时隐藏</p>
|
||||||
|
</div>
|
||||||
|
</div></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>
|
||||||
|
|
@ -0,0 +1,134 @@
|
||||||
|
<!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>
|
||||||
|
<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>
|
||||||
|
<main class="content">
|
||||||
|
<div class="wrap min">
|
||||||
|
<div class="ks-title">
|
||||||
|
<h1>开始</h1>
|
||||||
|
<h2>如何使用 Kico Style</h2>
|
||||||
|
</div>
|
||||||
|
<div class="ks-content">
|
||||||
|
<h1>介绍</h1>
|
||||||
|
<p>Kico Style 是一个简洁轻盈的前端框架，由 <a href="https://paul.ren">奇趣保罗</a> 开发，是 Kico 前端作品系列的一员。</p>
|
||||||
|
<ul>
|
||||||
|
<li>最新版本：1.0.2</li>
|
||||||
|
<li>上次更新：2023.4.15</li>
|
||||||
|
<li>上次修订：2021.12.24</li>
|
||||||
|
</ul>
|
||||||
|
<section>
|
||||||
|
<h2 id="thanks">致敬</h2>
|
||||||
|
<p>奇趣框架的开发，不仅源自我的开发经验，更少不了来自开源社区广大项目的馈赠。在奇趣框架的设计过程中，我多少参考或引用了这些项目的内容（仅按照项目名称长度排序，不分前后）：</p>
|
||||||
|
<ul>
|
||||||
|
<li>Tabler</li>
|
||||||
|
<li>JQuery</li>
|
||||||
|
<li>Bootstrap</li>
|
||||||
|
<li>Normalize.css</li>
|
||||||
|
</ul>
|
||||||
|
<p>Bootstrap 虽然功能齐全，但是有很多类名，我就几乎没有使用过。能用一行 CSS 样式附加在指定元素上面，为什么还得额外记类名呢？如果你要写一个拥有自己设计风格的块，肯定是用自己的类名来定义，才能更快速的实现吧！</p>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<h2 id="notice">注意</h2>
|
||||||
|
<p>Kico Style 是一个从简优化的框架。和其他前端框架（例如 <code>Bootstrap</code>、<code>Foundation</code>）不同的是，它不可以快速搭建用户界面。因此，它没有提供大量丰富的组件和样式，不必担心类名命名空间的问题，覆盖样式也更容易。如果你不想自主编写样式，而是更偏向快速搭建网站结构，请尝试 <a href="https://getbootstrap.com" target="_blank">Bootstrap</a> 吧。</p>
|
||||||
|
<p>如果想要在 React/Vue 的开发环境下搭建一个用于生产力的应用，需要大量交互组件，不如在使用 Kico Style 的基础上，再使用 <a href="https://ant.design" target="_blank">Ant Design</a> 组件库吧，作者实测基本上是没有冲突问题的。</p>
|
||||||
|
<p>Kico Style 为支持 <code>HTML5</code>、<code>CSS3</code> 的浏览器所打造，谷歌（Webkit）、火狐（Gecko）等现代浏览器效果最佳。经过日月沧桑，<code>IE</code> 已经逐渐退出市场，取而代之的是基于 <code>Webkit</code> 的国产浏览器，所以开发者完全没有必要为了一款上古产品而消耗时间优化改良自己的产品。</p>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<h2 id="why">为何使用？</h2>
|
||||||
|
<p>它拥有类似 Bootstrap 的栅格系统，并且用法相似。并为移动设备的展示提供了更好的解决方案。</p>
|
||||||
|
<p>它拥有高度的 DIY 空间，你不需要像 Bootstrap 一样必须编写其固定的结构并思考如何覆盖其内置的样式。</p>
|
||||||
|
<p>它重写了很多基础风格，<code>article</code> 文章标签内的元素无论是字体大小还是间距都进行了优化，在版式上几乎无需二次重写。</p>
|
||||||
|
<p>它结合了作者的实战开发经验，内置了一些常用的 JavaScript 组件，例如 “AJAX”、“图片灯箱”、“消息弹框”、“图片懒加载”...</p>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<h2 id="download">下载与使用</h2>
|
||||||
|
<p>
|
||||||
|
<a class="btn blue customed" href="https://github.com/Dreamer-Paul/Kico-Style" target="_blank">在 GitHub 上获取</a>
|
||||||
|
</p>
|
||||||
|
<p>1. 引用 CSS 样式</p>
|
||||||
|
<pre class="language-html"><code><!-- 直接引用项目文件夹 -->
|
||||||
|
<link href="kico.css" rel="stylesheet" type="text/css"/>
|
||||||
|
|
||||||
|
<!-- JSDelivr 免费提供的 CDN 链接 -->
|
||||||
|
<link href="https://cdn.jsdelivr.net/gh/Dreamer-Paul/Kico-Style/kico.min.css" rel="stylesheet" type="text/css"/>
|
||||||
|
|
||||||
|
<!-- 最新开发版（和文档始终同步）-->
|
||||||
|
<link href="https://cdn.jsdelivr.net/gh/Dreamer-Paul/Kico-Style@master/kico.min.css" rel="stylesheet" type="text/css"/>
|
||||||
|
</code></pre>
|
||||||
|
<p>2. 在 <code>head</code> 标签内插入可视区域代码，开启响应式功能</p>
|
||||||
|
<pre class="language-html"><code><meta name="viewport" content="width=device-width, maximum-scale=1, initial-scale=1"/></code></pre>
|
||||||
|
<p>3. 如需使用本框架的原生 JS 组件，请在 <code>body</code> 标签结尾之前引用 JavaScript。</p>
|
||||||
|
<pre class="language-html"><code><!-- 直接引用项目文件夹 -->
|
||||||
|
<script src="kico.js"></script>
|
||||||
|
|
||||||
|
<!-- JSDelivr 免费提供的 CDN 链接 -->
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/Dreamer-Paul/Kico-Style/kico.min.js"></script>
|
||||||
|
|
||||||
|
<!-- 最新开发版（和文档始终同步）-->
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/Dreamer-Paul/Kico-Style@master/kico.min.js"></script></code></pre>
|
||||||
|
<blockquote>PS：CDN 上的版本跟随的是最新的 Release，开发版本也有一定时长的缓存时间，开发版本之间产生的差异可能会多一些，所以暂时建议进行本地引入</blockquote>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<h2 id="more">另请参阅</h2>
|
||||||
|
<p>还有音乐播放器 Kico Player、时钟小工具 Kico Tools 等有趣的前端作品，欢迎关注！</p>
|
||||||
|
<div class="more-product">
|
||||||
|
<h4>奇趣播放器（Kico Player）</h4>
|
||||||
|
<p>功能强大的前端音乐播放器，同样由保罗开发。</p>
|
||||||
|
<p>
|
||||||
|
<a class="btn blue customed" href="https://github.com/Dreamer-Paul/Kico-Player" target="_blank">项目地址</a>
|
||||||
|
<a class="btn blue customed" href="https://works.paugram.com/player" target="_blank">文档地址</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="more-product">
|
||||||
|
<h4>奇趣小工具 (Kico Tools)</h4>
|
||||||
|
<p>一个集合了时钟、秒表、倒计时和随机数的小工具，依旧是由保罗开发。它采用 SvelteJS 框架进行开发。</p>
|
||||||
|
<p>
|
||||||
|
<a class="btn blue customed" href="https://github.com/Dreamer-Paul/Kico-Tools">项目地址</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</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>
|
||||||
|
|
@ -0,0 +1,372 @@
|
||||||
|
/* ----
|
||||||
|
|
||||||
|
# Kico Style Docs
|
||||||
|
# By: Dreamer-Paul
|
||||||
|
# Last Update: 2022.12.25
|
||||||
|
|
||||||
|
---- */
|
||||||
|
|
||||||
|
/* 0 - 全局
|
||||||
|
-------------------------------- */
|
||||||
|
:root {
|
||||||
|
--light-blue: #57c4fd;
|
||||||
|
--darker-gray: #666;
|
||||||
|
|
||||||
|
--bg-dark: #fafafa;
|
||||||
|
--bg-darker: #f4f4f4;
|
||||||
|
|
||||||
|
--padding: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin-left: 3.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.has-bar {
|
||||||
|
margin-left: 15.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 600px) {
|
||||||
|
body, body.has-bar {
|
||||||
|
margin-top: 3.5em;
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3 { font-weight: lighter }
|
||||||
|
h4, h5, h6 { font-weight: normal }
|
||||||
|
|
||||||
|
.btn.customed { border-radius: 3em }
|
||||||
|
|
||||||
|
.btn.blue.customed {
|
||||||
|
background: #57c4fd;
|
||||||
|
box-shadow: 0 4px #41a5cd;
|
||||||
|
transition: background .3s, box-shadow .3s, transform .3s;
|
||||||
|
}
|
||||||
|
.btn.blue.customed:active {
|
||||||
|
box-shadow: none;
|
||||||
|
background: #41a5cd;
|
||||||
|
transform: translateY(4px);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* 1 - 页眉
|
||||||
|
-------------------------------- */
|
||||||
|
.sidebar {
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: 3;
|
||||||
|
color: #fff;
|
||||||
|
position: fixed;
|
||||||
|
background-color: var(--light-blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar img, .sidebar svg {
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar .header {
|
||||||
|
padding: 1em;
|
||||||
|
cursor: pointer;
|
||||||
|
background-color: #3fb2ed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar .header img {
|
||||||
|
width: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar .title {
|
||||||
|
display: none;
|
||||||
|
margin-left: .25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar .menu a {
|
||||||
|
color: #fff;
|
||||||
|
padding: 1em;
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.sidebar .menu a:hover svg {
|
||||||
|
transform: scale(1.1)
|
||||||
|
}
|
||||||
|
.sidebar .menu svg {
|
||||||
|
fill: #fff;
|
||||||
|
width: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar .menu a::before, .sidebar .menu a::after {
|
||||||
|
opacity: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
.sidebar .menu a:before {
|
||||||
|
left: 3em;
|
||||||
|
top: 1.25em;
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
border: .5em solid transparent;
|
||||||
|
border-right-color: rgba(0, 0, 0, .6);
|
||||||
|
}
|
||||||
|
.sidebar .menu a::after {
|
||||||
|
top: .5em;
|
||||||
|
left: 4em;
|
||||||
|
padding: .5em 1em;
|
||||||
|
position: absolute;
|
||||||
|
white-space: nowrap;
|
||||||
|
border-radius: .5em;
|
||||||
|
content: attr(content);
|
||||||
|
background: rgba(0, 0, 0, .6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar .menu a:hover::before, .sidebar .menu a:hover::after {
|
||||||
|
opacity: 1;
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 600px) {
|
||||||
|
.sidebar {
|
||||||
|
right: 0;
|
||||||
|
bottom: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar .header { float: left }
|
||||||
|
.sidebar .title { display: inline-block }
|
||||||
|
.sidebar .menu { float: right }
|
||||||
|
.sidebar .menu a { float: left }
|
||||||
|
|
||||||
|
.sidebar .menu a::before {
|
||||||
|
top: 3em;
|
||||||
|
left: 1.25em;
|
||||||
|
border-color: transparent;
|
||||||
|
border-bottom-color: rgba(0, 0, 0, .6);
|
||||||
|
}
|
||||||
|
.sidebar .menu a::after {
|
||||||
|
top: 4em;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sub-sidebar {
|
||||||
|
top: 0;
|
||||||
|
left: 3.5em;
|
||||||
|
bottom: 0;
|
||||||
|
width: 12em;
|
||||||
|
padding: 1em;
|
||||||
|
z-index: 1;
|
||||||
|
position: fixed;
|
||||||
|
overflow-y: auto;
|
||||||
|
border-right: 1px solid #eee;
|
||||||
|
}
|
||||||
|
.sub-sidebar > ul {
|
||||||
|
margin: 0;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
.sub-sidebar > ul > li {
|
||||||
|
margin-bottom: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sub-sidebar > ul > li > ul a {
|
||||||
|
color: #555;
|
||||||
|
font-weight: lighter;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sub-sidebar a {
|
||||||
|
color: inherit;
|
||||||
|
line-height: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 600px) {
|
||||||
|
.sub-sidebar {
|
||||||
|
left: -12em;
|
||||||
|
top: 3.5em;
|
||||||
|
background: #fff;
|
||||||
|
border-right: none;
|
||||||
|
transition: transform .3s;
|
||||||
|
}
|
||||||
|
.sub-sidebar.active {
|
||||||
|
outline: 50em solid rgba(0, 0, 0, .5);
|
||||||
|
transform: translateX(100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* 2 - 主体内容
|
||||||
|
-------------------------------- */
|
||||||
|
main .ks-title {
|
||||||
|
padding: 1em;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 2em;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
main .ks-title h2 {
|
||||||
|
color: var(--darker-gray);
|
||||||
|
font-size: 1.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
main .ks-content {
|
||||||
|
margin-bottom: 2em;
|
||||||
|
padding-bottom: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
main .ks-content section { margin-top: 5em }
|
||||||
|
main .ks-content section:first-child { margin-top: 0 }
|
||||||
|
|
||||||
|
main .ks-content section > * { margin-bottom: 1em }
|
||||||
|
main .ks-content section > *:last-child { margin-bottom: 0 }
|
||||||
|
|
||||||
|
main .ks-content > h1 {
|
||||||
|
color: var(--darker-gray);
|
||||||
|
font-size: 1.6em;
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 1.5em;
|
||||||
|
padding-bottom: .5em;
|
||||||
|
display: inline-block;
|
||||||
|
scroll-margin-top: 5em;
|
||||||
|
}
|
||||||
|
main .ks-content > h1::before {
|
||||||
|
content: "";
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: -1;
|
||||||
|
width: 1.5em;
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 1em;
|
||||||
|
border-bottom: .25em solid var(--yellow);
|
||||||
|
}
|
||||||
|
|
||||||
|
main .ks-content section > h2[id] { font-size: 1.4em }
|
||||||
|
main .ks-content section > h2[id]::before {
|
||||||
|
content: "#";
|
||||||
|
color: var(--light-blue);
|
||||||
|
margin-right: .25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
main .ks-content .demo-block {
|
||||||
|
padding: var(--padding);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
background-color: var(--bg-dark);
|
||||||
|
margin-bottom: 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
main .ks-content .code-block {
|
||||||
|
padding: var(--padding);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
background-color: var(--bg-darker);
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
margin-bottom: 3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
main .ks-content .code-block:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
main .ks-content .code-block summary {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
main .ks-content .code-block[open] summary {
|
||||||
|
margin-bottom: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 首页更多产品 */
|
||||||
|
.more-product {
|
||||||
|
padding: 1.5em;
|
||||||
|
border-radius: 1em;
|
||||||
|
background: #fafafa;
|
||||||
|
}
|
||||||
|
main .more-product + .more-product { margin-top: 1em }
|
||||||
|
|
||||||
|
main .more-product p {
|
||||||
|
color: var(--darker-gray);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Demo 样式 */
|
||||||
|
.show-notice .ks-notice {
|
||||||
|
animation: none;
|
||||||
|
margin: 0 0 1em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.float-demo .float-left, .float-demo .float-right {
|
||||||
|
color: #fff;
|
||||||
|
padding: 1em;
|
||||||
|
background: #3fb2ed;
|
||||||
|
border-radius: .5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grids-size-demo p, .grids-auto-demo p, .grids-padding-demo p, .columns-hide-demo p {
|
||||||
|
color: #fff;
|
||||||
|
padding: 1em;
|
||||||
|
background: #3fb2ed;
|
||||||
|
border-radius: .5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.animation-demo {
|
||||||
|
padding-top: 5em !important;
|
||||||
|
padding-bottom: 5em !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* 3 - 页尾
|
||||||
|
-------------------------------- */
|
||||||
|
footer {
|
||||||
|
color: #666;
|
||||||
|
padding: 1em 0;
|
||||||
|
text-align: center;
|
||||||
|
border-top: 1px solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 返回页首 */
|
||||||
|
footer .to-top {
|
||||||
|
z-index: 1;
|
||||||
|
color: #fff;
|
||||||
|
width: 2em;
|
||||||
|
right: 1em;
|
||||||
|
bottom: -2em;
|
||||||
|
display: block;
|
||||||
|
position: fixed;
|
||||||
|
border-radius: 50%;
|
||||||
|
text-align: center;
|
||||||
|
background: rgba(0, 0, 0, .2);
|
||||||
|
transition: background .3s, bottom .3s;
|
||||||
|
}
|
||||||
|
footer .to-top.active {
|
||||||
|
bottom: .85em;
|
||||||
|
}
|
||||||
|
footer .to-top:hover {
|
||||||
|
color: #fff;
|
||||||
|
background: #ffc670;
|
||||||
|
}
|
||||||
|
footer .to-top:before {
|
||||||
|
content: "\f106";
|
||||||
|
font: 1em/2em "FontAwesome";
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* 4 - 附加
|
||||||
|
-------------------------------- */
|
||||||
|
.gt-container .gt-meta { z-index: auto !important }
|
||||||
|
.gt-comment-text, .gt-header-controls-tip { display: none }
|
||||||
|
|
||||||
|
.token.comment, .token.block-comment, .token.prolog, .token.doctype, .token.cdata { color: slategray }
|
||||||
|
.token.punctuation { color: #f8f8f2 }
|
||||||
|
.token.namespace { opacity: .7 }
|
||||||
|
.token.property, .token.tag, .token.function-name, .token.constant, .token.symbol, .token.deleted { color: #f92672 }
|
||||||
|
.token.boolean, .token.number { color: #ae81ff }
|
||||||
|
.token.selector, .token.attr-name, .token.string, .token.char, .token.function, .token.builtin, .token.inserted { color: #a6e22e }
|
||||||
|
|
||||||
|
.token.operator, .token.entity, .token.url, .token.variable { color: #f8f8f2 }
|
||||||
|
.token.atrule, .token.attr-value, .token.class-name { color: #e6db74 }
|
||||||
|
.token.keyword { color: #66d9ef }
|
||||||
|
.token.regex, .token.important { color: #fd971f }
|
||||||
|
|
||||||
|
.language-css .token.string, .style .token.string { color: #28b9be }
|
||||||
|
|
||||||
|
.token.important, .token.bold { font-weight: bold }
|
||||||
|
.token.italic { font-style: italic }
|
||||||
|
.token.entity { cursor: help }
|
||||||
|
.token.important { font-weight: normal }
|
||||||
|
|
@ -0,0 +1,59 @@
|
||||||
|
/* ----
|
||||||
|
|
||||||
|
# Kico Style Docs
|
||||||
|
# By: Dreamer-Paul
|
||||||
|
# Last Update: 2022.12.25
|
||||||
|
|
||||||
|
---- */
|
||||||
|
|
||||||
|
const app = () => {
|
||||||
|
ks.image("main img");
|
||||||
|
|
||||||
|
var obj = {
|
||||||
|
toggle: ks.select(".sidebar .header"),
|
||||||
|
sidebar: ks.select(".sub-sidebar"),
|
||||||
|
};
|
||||||
|
|
||||||
|
if (obj.sidebar) {
|
||||||
|
obj.toggle.onclick = () => {
|
||||||
|
obj.sidebar.classList.toggle("active");
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
const renderCodeBlock = () => {
|
||||||
|
const demoBlocks = ks.selectAll(".demo-block");
|
||||||
|
const codeBlocks = ks.selectAll(".code-block code");
|
||||||
|
|
||||||
|
if (demoBlocks.length !== codeBlocks.length) {
|
||||||
|
console.log(demoBlocks, codeBlocks);
|
||||||
|
throw new Error("数量不匹配，请检查");
|
||||||
|
}
|
||||||
|
|
||||||
|
codeBlocks.forEach((block, index) => {
|
||||||
|
const clearedRows = demoBlocks[index].innerHTML.split("\n").filter((row) => row.search(/\S+/) !== -1);
|
||||||
|
|
||||||
|
if (!("fillContent" in block.dataset) || !clearedRows.length) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const firstSpaceBlock = clearedRows[0].match(/\s+/);
|
||||||
|
let firstSpaceBlockLength = 0;
|
||||||
|
let clearedContents;
|
||||||
|
|
||||||
|
if (firstSpaceBlock) {
|
||||||
|
firstSpaceBlockLength = firstSpaceBlock[0].length;
|
||||||
|
|
||||||
|
clearedContents = clearedRows.map((item) => item.substring(firstSpaceBlockLength)).join("\n");
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
clearedContents = demoBlocks[index].innerHTML;
|
||||||
|
}
|
||||||
|
|
||||||
|
block.innerHTML = clearedContents.replaceAll("<", "<").replaceAll(">", ">");
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
renderCodeBlock();
|
||||||
|
};
|
||||||
|
|
||||||
|
app();
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 609 B |
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,418 @@
|
||||||
|
/* ----
|
||||||
|
|
||||||
|
# Kico Style 1.0
|
||||||
|
# By: Dreamer-Paul
|
||||||
|
# Last Update: 2020.4.10
|
||||||
|
|
||||||
|
一个可口的极简响应式前端框架。
|
||||||
|
|
||||||
|
本代码为奇趣保罗原创，并遵守 MIT 开源协议。欢迎访问我的博客：https://paugram.com
|
||||||
|
|
||||||
|
---- */
|
||||||
|
|
||||||
|
Array.prototype.remove = function (value) {
|
||||||
|
var index = this.indexOf(value);
|
||||||
|
if(index > -1) this.splice(index, 1);
|
||||||
|
};
|
||||||
|
|
||||||
|
(function (global, setting) {
|
||||||
|
var KStyle = function (a, b) {
|
||||||
|
return KStyle.fn.init(a, b);
|
||||||
|
};
|
||||||
|
|
||||||
|
KStyle.fn = KStyle.prototype = {
|
||||||
|
construtor: KStyle,
|
||||||
|
init: function (a, b) {
|
||||||
|
a = KStyle.selectAll(a);
|
||||||
|
|
||||||
|
a.each = function (fn){
|
||||||
|
return KStyle.each(a, fn);
|
||||||
|
};
|
||||||
|
|
||||||
|
a.image = function () {
|
||||||
|
return KStyle.image(a);
|
||||||
|
};
|
||||||
|
|
||||||
|
a.lazy = function (bg) {
|
||||||
|
return KStyle.lazy(a, bg);
|
||||||
|
};
|
||||||
|
|
||||||
|
a.scrollTo = function (offset) {
|
||||||
|
return KStyle.scrollTo(a, offset);
|
||||||
|
};
|
||||||
|
|
||||||
|
a.empty = function () {
|
||||||
|
return KStyle.each(a, function (item) { KStyle.empty(item); });
|
||||||
|
}
|
||||||
|
|
||||||
|
return a;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 批量处理
|
||||||
|
KStyle.each = function (data, fn) {
|
||||||
|
for(var i = 0; i < data.length; i++){
|
||||||
|
fn(data[i], i, data);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 创建对象
|
||||||
|
KStyle.create = function (tag, prop) {
|
||||||
|
var obj = document.createElement(tag);
|
||||||
|
|
||||||
|
if(prop){
|
||||||
|
if(prop.id) obj.id = prop.id;
|
||||||
|
if(prop.src) obj.src = prop.src;
|
||||||
|
if(prop.href) obj.href = prop.href;
|
||||||
|
if(prop.class) obj.className = prop.class;
|
||||||
|
if(prop.text) obj.innerText = prop.text;
|
||||||
|
if(prop.html) obj.innerHTML = prop.html;
|
||||||
|
|
||||||
|
if(prop.child){
|
||||||
|
if(prop.child.constructor === Array){
|
||||||
|
KStyle.each(prop.child, (i) => {
|
||||||
|
obj.appendChild(i);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
obj.appendChild(prop.child);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if(prop.attr){
|
||||||
|
if(prop.attr.constructor === Array){
|
||||||
|
KStyle.each(prop.attr, (i) => {
|
||||||
|
obj.setAttribute(i.name, i.value);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
else if(prop.attr.constructor === Object){
|
||||||
|
obj.setAttribute(prop.attr.name, prop.attr.value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if(prop.parent) prop.parent.appendChild(obj);
|
||||||
|
}
|
||||||
|
|
||||||
|
return obj;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 选择对象
|
||||||
|
KStyle.select = function (obj) {
|
||||||
|
switch(typeof obj){
|
||||||
|
case "object": return obj; break;
|
||||||
|
case "string": return document.querySelector(obj); break;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
KStyle.selectAll = function (obj) {
|
||||||
|
switch(typeof obj){
|
||||||
|
case "object": return obj; break;
|
||||||
|
case "string": return document.querySelectorAll(obj); break;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 清空子元素
|
||||||
|
KStyle.empty = function (obj) {
|
||||||
|
while(obj.firstChild){
|
||||||
|
obj.removeChild(obj.firstChild);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 弹窗
|
||||||
|
var notice = {
|
||||||
|
wrap: KStyle.create("notice"),
|
||||||
|
list: []
|
||||||
|
};
|
||||||
|
|
||||||
|
KStyle.notice = function (content, attr) {
|
||||||
|
var item = KStyle.create("div", {class: "ks-notice", html: "<span class='content'>" + content + "</span>", parent: notice.wrap});
|
||||||
|
|
||||||
|
notice.list.push(item);
|
||||||
|
|
||||||
|
if(!document.querySelector("body > notice")) document.body.appendChild(notice.wrap);
|
||||||
|
|
||||||
|
if(attr && attr.time){
|
||||||
|
setTimeout(notice_remove, attr.time);
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
var close = KStyle.create("span", {class: "close", parent: item});
|
||||||
|
|
||||||
|
close.onclick = notice_remove;
|
||||||
|
}
|
||||||
|
|
||||||
|
if(attr && attr.color){
|
||||||
|
item.classList.add(attr.color);
|
||||||
|
}
|
||||||
|
|
||||||
|
function notice_remove() {
|
||||||
|
item.classList.add("remove");
|
||||||
|
notice.list.remove(item);
|
||||||
|
|
||||||
|
setTimeout(function () {
|
||||||
|
try{
|
||||||
|
notice.wrap.removeChild(item);
|
||||||
|
item = null;
|
||||||
|
}
|
||||||
|
catch(err) {}
|
||||||
|
|
||||||
|
if(document.querySelector("body > notice") && notice.list.length === 0){
|
||||||
|
document.body.removeChild(notice.wrap);
|
||||||
|
}
|
||||||
|
}, 300);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 灯箱
|
||||||
|
var image_box = {
|
||||||
|
img: KStyle.create("img"),
|
||||||
|
prev: KStyle.create("div", {class: "ks-prev"}),
|
||||||
|
next: KStyle.create("div", {class: "ks-next"}),
|
||||||
|
ball: KStyle.create("div", {class: "ks-ball"})
|
||||||
|
};
|
||||||
|
image_box.wrap = KStyle.create("div", {class: "ks-image", child: [
|
||||||
|
image_box.prev, image_box.img, image_box.next, image_box.ball
|
||||||
|
]});
|
||||||
|
|
||||||
|
image_box.wrap.onclick = function (e) {
|
||||||
|
image_box.wrap.classList.add("remove");
|
||||||
|
setTimeout(function () {
|
||||||
|
try{
|
||||||
|
document.body.removeChild(image_box.wrap);
|
||||||
|
image_box.wrap.classList.remove("remove");
|
||||||
|
}
|
||||||
|
catch (err){}
|
||||||
|
}, 300);
|
||||||
|
};
|
||||||
|
|
||||||
|
image_box.img.onload = function () {
|
||||||
|
image_box.wrap.classList.remove("loading");
|
||||||
|
};
|
||||||
|
|
||||||
|
KStyle.image = function (selector) {
|
||||||
|
var current = 0;
|
||||||
|
var get_images = KStyle.selectAll(selector);
|
||||||
|
|
||||||
|
var actions = {
|
||||||
|
ori: function (obj, num) {
|
||||||
|
obj.setAttribute("ks-image", "active");
|
||||||
|
|
||||||
|
obj.onclick = function () {
|
||||||
|
current = num;
|
||||||
|
actions.set();
|
||||||
|
document.body.appendChild(image_box.wrap);
|
||||||
|
};
|
||||||
|
},
|
||||||
|
set: function () {
|
||||||
|
var img = get_images[current];
|
||||||
|
|
||||||
|
current === 0 ? image_box.prev.classList.add("ended") : image_box.prev.classList.remove("ended");
|
||||||
|
current === get_images.length - 1 ? image_box.next.classList.add("ended") : image_box.next.classList.remove("ended");
|
||||||
|
|
||||||
|
if(img.getAttribute("ks-original") !== null){
|
||||||
|
image_box.img.src = img.getAttribute("ks-original");
|
||||||
|
}
|
||||||
|
else if(img.src){
|
||||||
|
image_box.img.src = img.src;
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
console.error("This image has no valid tag!");
|
||||||
|
}
|
||||||
|
|
||||||
|
image_box.wrap.classList.add("loading");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
KStyle.each(get_images, function (item, id) {
|
||||||
|
if(item.src || item.getAttribute("ks-original")){
|
||||||
|
actions.ori(item, id);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 设置按钮
|
||||||
|
image_box.prev.onclick = function (e) {
|
||||||
|
e.stopPropagation();
|
||||||
|
if(current - 1 >= 0) current--;
|
||||||
|
|
||||||
|
actions.set();
|
||||||
|
};
|
||||||
|
image_box.next.onclick = function (e) {
|
||||||
|
e.stopPropagation();
|
||||||
|
if(current + 1 < get_images.length) current++;
|
||||||
|
|
||||||
|
actions.set();
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
// 懒加载
|
||||||
|
KStyle.lazy = function (elements, bg) {
|
||||||
|
//elements = Array.from(KStyle.selectAll(elements));
|
||||||
|
elements = KStyle.selectAll(elements);
|
||||||
|
|
||||||
|
var list = [];
|
||||||
|
|
||||||
|
var action = {
|
||||||
|
setFront: function (item) {
|
||||||
|
if(item.intersectionRatio > 0) {
|
||||||
|
item.target.src = item.target.link;
|
||||||
|
item.target.setAttribute("ks-lazy", "finished");
|
||||||
|
obs.unobserve(item.target);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
setBack: function (item) {
|
||||||
|
if(item.boundingClientRect.top <= window.innerHeight + 100) {
|
||||||
|
var img = new Image();
|
||||||
|
img.src = item.target.link;
|
||||||
|
|
||||||
|
img.onload = function () {
|
||||||
|
item.target.setAttribute("ks-lazy", "finished");
|
||||||
|
item.target.style.backgroundImage = "url(" + item.target.link + ")";
|
||||||
|
};
|
||||||
|
|
||||||
|
obs.unobserve(item.target);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 是否支持 OBS
|
||||||
|
if(global.IntersectionObserver){
|
||||||
|
var obs = new IntersectionObserver(function (changes) {
|
||||||
|
if (bg) {
|
||||||
|
changes.forEach(function (t) {
|
||||||
|
action.setBack(t);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
changes.forEach(function (t) {
|
||||||
|
action.setFront(t);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
KStyle.each(elements, function (item) {
|
||||||
|
item.link = item.getAttribute("ks-thumb") || item.getAttribute("ks-original");
|
||||||
|
|
||||||
|
if(!item.getAttribute("ks-lazy")) obs.observe(item);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
function back() {
|
||||||
|
KStyle.each(list, function (item) {
|
||||||
|
var check = item.el.getBoundingClientRect().top <= window.innerHeight;
|
||||||
|
|
||||||
|
if(check && !item.showed){
|
||||||
|
action.setBack(item.el);
|
||||||
|
list.remove(item);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function front() {
|
||||||
|
KStyle.each(list, function (item) {
|
||||||
|
var check = item.el.getBoundingClientRect().top <= window.innerHeight;
|
||||||
|
|
||||||
|
if(check && !item.showed){
|
||||||
|
action.setFront(item.el);
|
||||||
|
list.remove(item);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
KStyle.each(elements, function (item) {
|
||||||
|
item.link = item.getAttribute("ks-thumb") || item.getAttribute("ks-original");
|
||||||
|
|
||||||
|
if(!item.getAttribute("ks-lazy")) list.push({el: item, link: item.link});
|
||||||
|
});
|
||||||
|
|
||||||
|
bg ? back() : front();
|
||||||
|
bg ? document.addEventListener("scroll", back) : document.addEventListener("scroll", front);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// AJAX
|
||||||
|
KStyle.ajax = function (prop) {
|
||||||
|
if(!prop.url) prop.url = document.location.href;
|
||||||
|
if(!prop.method) prop.method = "GET";
|
||||||
|
|
||||||
|
if(prop.method === "POST"){
|
||||||
|
var data = new FormData();
|
||||||
|
|
||||||
|
for(var d in prop.data){
|
||||||
|
data.append(d, prop.data[d]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else if(prop.method === "GET"){
|
||||||
|
var url = prop.url + "?";
|
||||||
|
|
||||||
|
for(var d in prop.data){
|
||||||
|
url += d + "=" + prop.data[d] + "&";
|
||||||
|
}
|
||||||
|
|
||||||
|
prop.url = url.substr(0, url.length - 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
var request = new XMLHttpRequest();
|
||||||
|
request.open(prop.method, prop.url);
|
||||||
|
if(prop.crossDomain){ request.setRequestHeader("X-Requested-With", "XMLHttpRequest"); }
|
||||||
|
|
||||||
|
if(prop.header){
|
||||||
|
for(var i in prop.header){
|
||||||
|
request.setRequestHeader(prop.header[i][0], prop.header[i][1]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
request.send(data);
|
||||||
|
|
||||||
|
request.onreadystatechange = function () {
|
||||||
|
if(request.readyState === 4){
|
||||||
|
if(request.status === 200 || request.status === 304){
|
||||||
|
if(prop.type){
|
||||||
|
switch(prop.type){
|
||||||
|
case "text": prop.success(request.responseText); break;
|
||||||
|
case "json": prop.success(JSON.parse(request.response)); break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
prop.success ? prop.success(request) : console.log(prop.method + " 请求发送成功");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
prop.failed ? prop.failed(request) : console.log(prop.method + " 请求发送失败");
|
||||||
|
}
|
||||||
|
|
||||||
|
request = null;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return request;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 平滑滚动
|
||||||
|
KStyle.scrollTo = function (el, offset) {
|
||||||
|
el = KStyle.selectAll(el);
|
||||||
|
|
||||||
|
el.forEach(function (t) {
|
||||||
|
t.onclick = function (e) {
|
||||||
|
var l = e.target.pathname;
|
||||||
|
var c = window.location.pathname;
|
||||||
|
|
||||||
|
var t = e.target.href.match(/#[\s\S]+/);
|
||||||
|
if(t) t = ks.select(t[0]);
|
||||||
|
|
||||||
|
if(c === l){
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
var top = t ? (offset ? t.offsetTop - offset : t.offsetTop) : 0;
|
||||||
|
|
||||||
|
"scrollBehavior" in document.documentElement.style ? global.scrollTo({top: top, left: 0, behavior: "smooth"}) : global.scrollTo(0, top);
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
console.log(c, l);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
};
|
||||||
|
|
||||||
|
global.ks = KStyle;
|
||||||
|
|
||||||
|
console.log("%c Kico Style %c https://paugram.com ","color: #fff; margin: 1em 0; padding: 5px 0; background: #3498db;","margin: 1em 0; padding: 5px 0; background: #efefef;");
|
||||||
|
})(window);
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40px" height="40px" viewBox="0 0 40 40" xml:space="preserve">
|
||||||
|
<ellipse fill="#F7C170" cx="20" cy="35.5" rx="20" ry="4.5"/>
|
||||||
|
<g opacity="0.2">
|
||||||
|
<path d="M8.066,8.429c0,0,3.92,5.305,3.872,11.618S8,35.799,8,35.799h8.679l-1.297-7.725l10.948,6.994l4.803-6.217
|
||||||
|
c0,0-13.502-1.666-13.485-8.636c0.017-6.969,15.922-6.906,15.922-6.906l-5.725-7.771l-11.165,6.994l-2.952-7.878L8.066,8.429z"/>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
<path fill="#FFFFFF" d="M6.066,8.429c0,0,3.92,5.305,3.872,11.618S6,35.799,6,35.799h8.679l-1.297-7.725l10.948,6.994
|
||||||
|
l4.803-6.217c0,0-13.502-1.666-13.485-8.636c0.017-6.969,15.922-6.906,15.922-6.906l-5.725-7.771l-11.165,6.994l-2.952-7.878
|
||||||
|
L6.066,8.429z"/>
|
||||||
|
</g>
|
||||||
|
<g opacity="0.2">
|
||||||
|
<circle cx="19.635" cy="4.117" r="4.117"/>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
<circle fill="#FFFFFF" cx="17.635" cy="4.117" r="4.117"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 938 B |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 239 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 424 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 407 KiB |
|
|
@ -0,0 +1,87 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-cmn-hans">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Title</title>
|
||||||
|
<link href="../static/kico.css" rel="stylesheet" type="text/css"/>
|
||||||
|
<style>
|
||||||
|
.ks-tab{
|
||||||
|
|
||||||
|
}
|
||||||
|
.ks-tab-toggle{
|
||||||
|
display: flex;
|
||||||
|
flex: 1 1 100%;
|
||||||
|
text-align: center;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
.ks-tab-toggle span{
|
||||||
|
width: 100%;
|
||||||
|
padding: 1em;
|
||||||
|
display: block;
|
||||||
|
cursor: pointer;
|
||||||
|
background: #e0e0e0;
|
||||||
|
}
|
||||||
|
.ks-tab-content{
|
||||||
|
display: none;
|
||||||
|
padding: 1em;
|
||||||
|
background: #efefef;
|
||||||
|
}
|
||||||
|
.ks-tab-content.active{
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<tab class="ks-tab">
|
||||||
|
<section class="ks-tab-toggle">
|
||||||
|
<span>效果</span>
|
||||||
|
<span>代码</span>
|
||||||
|
</section>
|
||||||
|
<section class="ks-tab-content">
|
||||||
|
<h1>H1 超大标题</h1>
|
||||||
|
<h2>H2 大标题</h2>
|
||||||
|
<h3>H3 小标题</h3>
|
||||||
|
<h4>H4 标题</h4>
|
||||||
|
<h5>H5 标题</h5>
|
||||||
|
<h6>H6 标题</h6>
|
||||||
|
</section>
|
||||||
|
<section class="ks-tab-content">
|
||||||
|
<pre><code><h1>H1 超大标题</h1>
|
||||||
|
<h2>H2 大标题</h2>
|
||||||
|
<h3>H3 小标题</h3>
|
||||||
|
<h4>H4 标题</h4>
|
||||||
|
<h5>H5 标题</h5>
|
||||||
|
<h6>H6 标题</h6></code></pre>
|
||||||
|
</section>
|
||||||
|
</tab>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
function tab(actions, contents){
|
||||||
|
var act = [];
|
||||||
|
var cont = [];
|
||||||
|
|
||||||
|
contents[0].classList.add("active");
|
||||||
|
|
||||||
|
function aaa(obj, obj2) {
|
||||||
|
obj.onclick = function () {
|
||||||
|
var aaa = cont;
|
||||||
|
aaa.splice(cont.indexOf(obj2), 1);
|
||||||
|
|
||||||
|
for(var n in aaa){
|
||||||
|
aaa[n].classList.remove("active");
|
||||||
|
}
|
||||||
|
|
||||||
|
obj2.classList.add("active");
|
||||||
|
};
|
||||||
|
}
|
||||||
|
for(var i = 0; i < actions.length; i++){
|
||||||
|
act.push(actions[i]);
|
||||||
|
cont.push(contents[i]);
|
||||||
|
aaa(actions[i], contents[i]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
tab(document.getElementsByClassName("ks-tab-toggle")[0].getElementsByTagName("span"), document.getElementsByClassName("ks-tab-content"));
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,37 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-cmn-hans">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Types</title>
|
||||||
|
<link href="../static/kico.css" rel="stylesheet" type="text/css"/>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<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>
|
||||||
|
<pre><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>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,285 @@
|
||||||
|
<!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="resize">全局缩放：</h2>
|
||||||
|
<p>给 <code>html</code> 元素添加 <code>font-auto</code> 类，即可让全局字体实现自动缩放。</p>
|
||||||
|
<blockquote>PS：如果你的网站样式采用 <code>px</code> 单位编写，则该功能将会对相应元素失效。</blockquote>
|
||||||
|
<div class="ks-table">
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>分辨率</th>
|
||||||
|
<th>效果</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>小于 500px 时（移动设备）</td>
|
||||||
|
<td>基础字体大小 14px</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>正常分辨率</td>
|
||||||
|
<td>基础字体大小 16px</td>
|
||||||
|
<tr>
|
||||||
|
<td>大于 1930px 时（2K 屏幕）</td>
|
||||||
|
<td>基础字体大小 18px</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<h2 id="wrap-limit">尺寸限制：</h2>
|
||||||
|
<p>添加 <code>wrap</code> 类，即可布置一个限制尺寸的框架。</p>
|
||||||
|
<pre class="language-html"><code><div class="wrap min">
|
||||||
|
<p>我被限制了</p>
|
||||||
|
</div></code></pre>
|
||||||
|
<p>wrap 也提供了多种扩展类，可以使用不同宽度的同时，也可以清除边距。</p>
|
||||||
|
<div class="ks-table">
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>类名</th>
|
||||||
|
<th>行为</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>wrap</td>
|
||||||
|
<td>保留 1em 的边距，宽度限制到 1200px</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>wrap min</td>
|
||||||
|
<td>保留 1em 的边距，宽度限制到 800px</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>wrap mid</td>
|
||||||
|
<td>保留 1em 的边距，宽度限制到 1000px</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>wrap max</td>
|
||||||
|
<td>保留 1em 的边距，宽度限制到 1400px</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>wrap full</td>
|
||||||
|
<td>保留 1em 的边距，不限制宽度</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<p>当然，你也可以直接使用 CSS 变量的方式，直接修改默认的边距和宽度限制。它们分别是 <code>--wrapper-gap</code> 和 <code>--wrapper-width</code>。结合 <code>:root</code> 选择器就可以完成替换：</p>
|
||||||
|
<pre class="language-css"><code>:root {
|
||||||
|
--wrapper-gap: 1.5em;
|
||||||
|
--wrapper-width: 1400px;
|
||||||
|
}</code></pre>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<h2 id="wrap-padding">保留间距：</h2>
|
||||||
|
<p>框架默认保留 1.25em 的左右间距，你也可以修改成细的（0.75em）、粗的（1.5em）或者清除掉。</p>
|
||||||
|
<blockquote>PS：如果你的页面包含栅格系统，并使用了比容器更大的间距，则会出现页面溢出的现象。可以通过 CSS 的 <code>overflow: hidden</code> 方法清除间距。或者干脆使得页面间距和容器间距相同即可。</blockquote>
|
||||||
|
<div class="ks-table">
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>类名</th>
|
||||||
|
<th>行为</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>wrap thin</td>
|
||||||
|
<td>边距改为 0.75em</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>wrap thick</td>
|
||||||
|
<td>边距改为 1.5em</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>wrap clear</td>
|
||||||
|
<td>清除边距</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<h2 id="clearfix">清除浮动：</h2>
|
||||||
|
<p>部分情况下使用 <code>float</code> 布局方案会导致父元素塌陷，给元素添加 <code>.clearfix</code> 类即可清除浮动，改善塌陷的问题。</p>
|
||||||
|
<div class="demo-block float-demo">
|
||||||
|
<div class="clearfix">
|
||||||
|
<p class="float-left">此元素的浮动可以被清除掉，防止布局坍塌</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<details class="code-block">
|
||||||
|
<summary>查看代码：</summary>
|
||||||
|
<pre class="language-html"><code><div class="clearfix">
|
||||||
|
<p class="float-left">此元素的浮动可以被清除掉，防止布局坍塌</p>
|
||||||
|
</div></code></pre>
|
||||||
|
</details>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<h2 id="float">设置浮动：</h2>
|
||||||
|
<p>给元素添加 <code>.float-left</code> 和 <code>.float-right</code> 类，迅速设置左/右浮动，浮动可以清除元素与元素之间的微小间距。</p>
|
||||||
|
<div class="demo-block float-demo">
|
||||||
|
<div class="clearfix">
|
||||||
|
<p class="float-right">我浮动到右边了</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<details class="code-block">
|
||||||
|
<summary>查看代码：</summary>
|
||||||
|
<pre class="language-html"><code><div class="clearfix">
|
||||||
|
<p class="float-right">我浮动到右边了</p>
|
||||||
|
</div></code></pre>
|
||||||
|
</details>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<h2 id="align">文字对齐：</h2>
|
||||||
|
<p>给元素添加 <code>.text-left</code> <code>.text-right</code> 类，迅速设置左/右对齐方式。</p>
|
||||||
|
<div class="demo-block">
|
||||||
|
<p class="text-center">居中对齐的文字</p>
|
||||||
|
<p class="text-right">靠右对齐的文字</p>
|
||||||
|
<p class="text-justify">两侧对齐的文字，要这段文字出现换行才有效果呢</p>
|
||||||
|
</div>
|
||||||
|
<details class="code-block">
|
||||||
|
<summary>查看代码：</summary>
|
||||||
|
<pre class="language-html"><code><p class="text-center">居中对齐的文字</p>
|
||||||
|
<p class="text-right">靠右对齐的文字</p>
|
||||||
|
<p class="text-justify">两侧对齐的文字，要这段文字出现换行才有效果呢</p></code></pre>
|
||||||
|
</details>
|
||||||
|
<div class="ks-table">
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>类名</th>
|
||||||
|
<th>行为</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>text-left</td>
|
||||||
|
<td>靠左对齐</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>text-right</td>
|
||||||
|
<td>靠右对齐</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>text-center</td>
|
||||||
|
<td>居中对齐</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>text-justify</td>
|
||||||
|
<td>两侧对齐</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</article>
|
||||||
|
</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>
|
||||||
Loading…
Reference in New Issue