286 lines
14 KiB
HTML
Executable File
286 lines
14 KiB
HTML
Executable File
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>样式 - Kico Style</title>
|
||
<meta name="theme-color" content="#3498db">
|
||
<link rel="icon" href="static/icon-32.png" sizes="32x32" />
|
||
<link rel="icon" href="static/icon-192.png" sizes="192x192" />
|
||
<link href="static/kico.css" rel="stylesheet" type="text/css" />
|
||
<link href="static/doc.css?v=22.12.25" rel="stylesheet" type="text/css" />
|
||
<meta name="viewport" content="width=device-width, maximum-scale=1, initial-scale=1" />
|
||
</head>
|
||
<body class="has-bar">
|
||
<aside class="sidebar">
|
||
<div class="header">
|
||
<img src="static/kico.svg" title="Kico Style" />
|
||
<span class="title">Style</span>
|
||
</div>
|
||
<nav class="menu">
|
||
<a href="index.html" content="开始">
|
||
<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M893.7 505.9H129.3c-13 0-24.8-7.9-29.8-19.9-5-12-2.2-25.9 7-35.2l307-307c26.1-26.1 60.9-40.5 98-40.5s71.9 14.4 98 40.5l307 307c9.2 9.2 12 23.1 7 35.2-5 12.1-16.7 19.9-29.8 19.9zM673.2 919.9h-31.5c-17.8 0-32.3-14.4-32.3-32.3v-77.4c0-23.1-18.8-42.1-41.9-42.4-22.3 0.3-41.1 19.3-41.1 42.4v77.4c0 17.8-14.4 32.3-32.3 32.3H349.8c-70.9 0-128.7-63.7-128.7-141.9V581.9c0-17.8 14.4-32.3 32.3-32.3h516.2c17.8 0 32.3 14.4 32.3 32.3V778c-0.1 78.3-57.8 141.9-128.7 141.9z"></path>
|
||
</svg>
|
||
</a>
|
||
<a href="wrap.html" content="样式">
|
||
<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M877.3 154.7C836.9 114.3 783 92 725.5 92c-57.5 0-111.4 22.3-151.8 62.7l-48.1 48.1-251.4 251.3 303.6 303.6 299.4-299.4c40.4-40.4 62.7-94.3 62.7-151.8 0-57.4-22.2-111.4-62.6-151.8zM221.5 506.9L177 551.3c-16.8 16.8-27.9 37.9-32.4 61.2l-53.9 285c-2.3 12.1 1.6 24.6 10.3 33.3 7.1 7.1 16.6 10.9 26.4 10.9 2.3 0 4.6-0.2 6.9-0.6l285-53.9c23.3-4.4 44.5-15.6 61.2-32.4l44.4-44.4-303.4-303.5z"></path>
|
||
</svg>
|
||
</a>
|
||
<a href="components.html" content="组件">
|
||
<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M512 510.4m-105.9 0a105.9 105.9 0 1 0 211.8 0 105.9 105.9 0 1 0-211.8 0ZM876 553.6l-8.2-4.8c-20-11.6-22.2-30.7-22.2-38.4 0-7.7 2.2-26.9 22.2-38.4l8.2-4.7c25.3-14.6 43.4-38.1 50.9-66.3 7.6-28.2 3.7-57.6-10.9-82.9l-35.3-61.2c-14.6-25.3-38.1-43.4-66.3-50.9-28.2-7.5-57.6-3.7-82.9 10.9l-8.2 4.7c-20 11.6-37.7 3.9-44.4 0s-22.2-15.3-22.2-38.4v-9.5c0-60.2-49-109.3-109.3-109.3h-70.6c-60.2 0-109.3 49-109.3 109.3v9.5c0 19.6-11.3 30.8-18 35.7-11.6 8.4-30.5 13.6-48.8 2.9l-8.8-5.2c-2.6-1.5-4.8-2.8-7.6-4.1-0.1 0-0.2-0.1-0.2-0.1-51.6-24-112.1-4.9-140.6 44.5L108 318c-14.6 25.3-18.5 54.7-10.9 82.9 7.6 28.2 25.6 51.7 50.9 66.3l8.2 4.8c20 11.6 22.2 30.7 22.2 38.4 0 7.7-2.2 26.9-22.2 38.4l-8.2 4.7c-25.3 14.6-43.4 38.1-50.9 66.3-7.6 28.2-3.7 57.6 10.9 82.9l35.3 61.2c14.6 25.3 38.1 43.4 66.3 50.9 28.2 7.5 57.6 3.7 82.9-10.9l8.2-4.7c20-11.6 37.7-3.9 44.4 0 6.7 3.9 22.2 15.3 22.2 38.4v9.5c0 60.2 49 109.3 109.3 109.3h70.6c60.2 0 109.3-49 109.3-109.3v-9.5c0-23.1 15.5-34.6 22.2-38.4 6.7-3.9 24.3-11.6 44.4 0l8.2 4.8c25.3 14.6 54.7 18.5 82.9 10.9 28.2-7.6 51.7-25.6 66.3-50.9l35.3-61.2c14.6-25.3 18.5-54.7 10.9-82.9-7.4-28.1-25.5-51.7-50.7-66.3zM512 687.8c-97.8 0-177.3-79.5-177.3-177.3S414.2 333.1 512 333.1s177.3 79.5 177.3 177.3S609.8 687.8 512 687.8z"></path>
|
||
</svg>
|
||
</a>
|
||
</nav>
|
||
</aside>
|
||
<aside class="sub-sidebar">
|
||
<ul>
|
||
<li>
|
||
<a href="wrap.html">容器</a>
|
||
<ul>
|
||
<li><a href="wrap.html#resize">全局缩放</a></li>
|
||
<li><a href="wrap.html#wrap-limit">尺寸限制</a></li>
|
||
<li><a href="wrap.html#wrap-padding">保留间距</a></li>
|
||
<li><a href="wrap.html#clearfix">清除浮动</a></li>
|
||
<li><a href="wrap.html#float">设置浮动</a></li>
|
||
<li><a href="wrap.html#align">文字对齐</a></li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<a href="elements.html">常用元素</a>
|
||
<ul>
|
||
<li><a href="elements.html#heading">标题</a></li>
|
||
<li><a href="elements.html#types">文字</a></li>
|
||
<li><a href="elements.html#images">图片</a></li>
|
||
<li><a href="elements.html#article">文章</a></li>
|
||
<li><a href="elements.html#buttons">按钮</a></li>
|
||
<li><a href="elements.html#tag">漂浮提示</a></li>
|
||
<li><a href="elements.html#codes">代码块</a></li>
|
||
<li><a href="elements.html#lists">项目列表</a></li>
|
||
<li><a href="elements.html#forms">表单</a></li>
|
||
<li><a href="elements.html#fieldset">表单小组</a></li>
|
||
<li><a href="elements.html#table">表格</a></li>
|
||
<li><a href="elements.html#media">多媒体</a></li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<a href="grid.html">栅格系统</a>
|
||
<ul>
|
||
<li><a href="grid.html#grids-size">栅格尺寸</a></li>
|
||
<li><a href="grid.html#grids-auto">自动栅格</a></li>
|
||
<li><a href="grid.html#grids-info">栅格类型</a></li>
|
||
<li><a href="grid.html#grids-padding">栅格间距</a></li>
|
||
<li><a href="grid.html#columns-align">对齐方式</a></li>
|
||
<li><a href="grid.html#columns-hide">栅格隐藏</a></li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<a href="animation.html">动画</a>
|
||
<ul>
|
||
<li><a href="animation.html#animate-fade">淡入淡出</a></li>
|
||
<li><a href="animation.html#animate-fade-scale">淡入缩放</a></li>
|
||
<li><a href="animation.html#animate-scale">缩放</a></li>
|
||
<li><a href="animation.html#animate-moving">平移</a></li>
|
||
<li><a href="animation.html#animate-rotate">旋转</a></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</aside>
|
||
<main class="content">
|
||
<div class="wrap min">
|
||
<div class="ks-title">
|
||
<h1>样式</h1>
|
||
<h2>Kico Style 的内置样式</h2>
|
||
</div>
|
||
<div class="ks-content">
|
||
<h1>容器</h1>
|
||
<section>
|
||
<h2 id="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>
|