commit c8f836c9cfb0d6c6508b6da1aaf5b18898606287 Author: 奇趣保罗 Date: Wed Sep 18 16:55:55 2024 +0800 Init: 2023 Version 从服务器拉取的最新版本 diff --git a/animation.html b/animation.html new file mode 100644 index 0000000..e43fe06 --- /dev/null +++ b/animation.html @@ -0,0 +1,282 @@ + + + + + 动画 - Kico Style + + + + + + + + + + +
+
+
+

样式

+

Kico Style 的内置样式

+
+
+

动画

+

优雅的过渡动画，为你的页面添加另一份趣味！

+
使用 CSS 引用对应的动画，这样会使得你的代码简洁且能更好的扩展特性。
+

在你的选择器里插入 animation 属性，并添加框架内置的 @keyframes 即可实现！

+
+ +
+
+ 查看代码： + 
.test-animation {
+  animation: rotate linear 2s infinite; /* 动画名称 动画函数曲线 时长 */
+}
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
类型名称行为
淡入淡出fade-in一般淡入
淡入淡出fade-off一般淡出
淡入淡出fade-in-top向上淡入
淡入淡出fade-in-bottom向下淡入
淡入淡出fade-in-left向左淡入
淡入淡出fade-in-right向右淡入
淡入缩放fade-small-large从大变小的淡入
淡入缩放fade-large-small从小变大的淡入
淡入缩放fade-larger-small从更大变小的淡入
淡入缩放fade-small-larger从小变更大的淡出
缩放scale-small-large从小变大
缩放scale-large-small从大变小
平移up-and-down上下摆动
平移left-and-right左右摆动
旋转rotate旋转
+
+ +
+

淡入淡出动画：

+
+ + + + + + +
+
+ 查看代码： + 
<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>
+
+
+
+

淡入缩放动画：

+
+ + + + +
+
+ 查看代码： + 
<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>
+
+
+
+

缩放动画：

+
+ + +
+
+ 查看代码： + 
<button class="btn yellow" style="animation: scale-small-large 1s infinite"">从小变大</button>
+<button class="btn yellow" style="animation: scale-large-small 1s infinite">从大变小</button>
+
+
+
+

平移动画：

+
+ + +
+
+ 查看代码： + 
<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>
+
+
+
+

旋转动画：

+
+ +
+
+ 查看代码： + 
<button class="btn yellow" style="animation: rotate 1s infinite">旋转</button>
+
+
+
+
+
+ + + + + + + diff --git a/components.html b/components.html new file mode 100755 index 0000000..00466b1 --- /dev/null +++ b/components.html @@ -0,0 +1,424 @@ + + + + + 组件 - Kico Style + + + + + + + + + + +
+
+
+

组件

+

Kico Style 的扩展组件，可提升网页的交互体验

+
+
+
📢：作者已经逐渐转移至 Vue/React 阵营，本框架的原生 JS 组件及其样式则不再作为优先维护对象，敬请谅解～ 但基础的 CSS 框架依然会持续更新！
+
+

元素创建

+

快速创建虚拟 DOM 元素。

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
参数可选值说明
obj 必须字符串新建元素采用的标签名
prop { id }字符串新建元素的 ID（id）
prop { href }字符串新建外联元素的地址（href）
prop { class }字符串新建元素的类名（class）
prop { text }字符串新建元素的内容（innerText）
prop { html }字符串新建元素的 HTML 内容（innerHTML）
prop { child }DOM 对象 | 数组新建元素添加的子元素，支持单条或是以数组形式添加多条
prop { attr }对象 | 数组新建元素添加的属性，支持单条或是以数组形式添加多条
+
+

示例：创建一个 p 标签的对象

+ 
ks.create("p");
+
+// 返回 <p></p>
+

示例：创建一个 div 标签的对象，并给予 test 类名

+ 
ks.create("div", {class: "test"});
+
+// 返回 <div class="test"></div>
+

示例：创建一个 div 标签的对象，并给予 ks-thumb 和 ks-original 属性用于设置懒加载的图片灯箱

+ 
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);
+
+

示例：创建一个 div 标签的对象，在给予 hello 类名的同时，写入“这是一个 DIV”的内容

+ 
ks.create("div", {
+    class: "hello",
+    text: "这是一个 DIV"
+});
+
+// 返回 <div class="hello">这是一个 DIV</div>
+

示例：添加一个有多重子元素的 div 对象

+ 
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>
+
+
+
+

元素选择器

+

快速选择单个/多个符合条件的元素，像编写 CSS 选择器一样简单。

+

示例：选择标签为 header 的第一个对象

+ 
ks.select("header");
+

示例：选择类名为 post-content 的所有图片

+ 
ks.selectAll(".post-content img");
+
PS：ks() 返回的内容和 ks.selectAll() 是相同的，所以上面的代码也可以这样写：
+ 
ks(".post-content img");
+
+
+

批量运行

+

快速设置多个数组或是 DOM 元素。

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
参数可选值说明
obj 必须数组 | NodeList被执行操作的对象
fn 必须函数对 obj 执行的操作
fn(i)被执行的其中一个对象当前执行的 obj 对象
fn(j)被执行的对象索引值当前执行的 obj 对象索引值
fn(k)被执行的对象整体也就是 obj 本身
+
+

示例：批量选择 h1 元素，并设置其字体样式

+ 
ks("h1").each(function (i) {
+    i.style.color = "green";
+    i.style.fontWeight = "bold";
+})
+
+
+

消息弹框

+

使用消息弹框，比 alert 更加友好，提升用户体验。

+
+
+ 静态的消息弹框样式 +
+
+ 静态的消息弹框样式 + +
+
+ 静态的消息弹框样式 +
+
+ 静态的消息弹框样式 +
+
+ 静态的消息弹框样式 +
+
+ 静态的消息弹框样式 +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
参数可选值说明
content 必须字符串要输出给弹框的内容
attrtime color overlay子属性，配置时间、颜色和遮罩
attr { time }整数，单位为毫秒指定弹框显示之后的移除时间，默认为手动关闭
attr { color }red yellow blue green指定弹框颜色，默认为 null
+
+

示例：一个在 1.5 秒后自动清除的弹窗

+
ks.notice("这是一个有时间的弹窗测试", {
+    time: 1500
+});
+

+

示例：没有时长的蓝色弹窗

+ 
ks.notice("这是一个蓝色的可关闭弹窗", {
+    color: "blue"
+});
+

+
+ +
+

图片灯箱

+

使用图片灯箱可以让页面的图片放大展示。

+

+ +

通过增加 ks.original 字段，还可以实现缩略图点击变成原图的效果！

+

+

使用 div 也可以增加灯箱，只是必须增加 ks.original 字段才可以展示出来。

+

+

示例：选中所有 article 标签里面的图片

+ 
ks.image("article img");
+

示例：选中包含原图字段的可触发 div

+ 
ks.image(".original");
+
PS：如果在一个页面里反复调用本函数，将等同于 重置，此前执行的对象将失效！
+
+
+

图片懒加载

+

使用图片懒加载可以提升浏览体验，减小服务器并发压力。

+

通过给 img 元素增加 ks.original 字段，并运行即可实现懒加载。

+

如果想让用户认为这是一个正在加载的图片，建议你将图片的 src 设置成一张以示加载的图片。

+ 
<img src="示例加载的图片地址" ks-original="懒加载完成后的图片地址"/>
+

萨拉托加缩略图

+

如果想使得一个块元素的 background 背景图片实现懒加载，依旧需要只需要增加 ks.original 字段，并将额外一个参数设置为 true 字段才可以实现懒加载。

+

+

示例：选中所有 img 图片，并开启懒加载

+ 
ks.lazy("img");
+

示例：选中所有类名为 original 的块元素，并对其实现背景形式的懒加载。

+ 
ks.lazy(".original", true);
+
+
+

快速 AJAX

+

和 JQuery 类似的一个简易 AJAX 功能，在不刷新网页的情况下快速更新页面内容。

+

示例：一个带了请求头的 GET 请求

+ 
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 对象
+    }
+});
+

示例：一个 POST 请求

+ 
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 对象
+    }
+});
+
+
+

平滑滚动 Beta

+

通过添加了页面锚链接的 a 元素，平滑滚动页面到对应的元素，可添加偏移值。

+

示例：选中 .sub-sidebar 元素里面的所有 a 链接，在点击它们的时候，页面将会平滑滚动到其指定的对应内容。同时保留 100px 的偏移间距。

+ 
ks.scrollTo(".sub-sidebar a", 100);
+

或者是

+ 
ks(".sub-sidebar a").scrollTo(100);
+
+
+
+
+ + + + + + + + + \ No newline at end of file diff --git a/elements.html b/elements.html new file mode 100755 index 0000000..2fddfc2 --- /dev/null +++ b/elements.html @@ -0,0 +1,874 @@ + + + + + 样式 - Kico Style + + + + + + + + + + +
+
+
+

样式

+

Kico Style 的内置样式

+
+
+

常用元素

+
+

标题：

+
+

H1 超大标题

+

H2 大标题

+

H3 小标题

+

H4 标题

+
H5 标题
+
H6 标题
+
+
+ 查看代码： + 
<h1>H1 超大标题</h1>
+<h2>H2 大标题</h2>
+<h3>H3 小标题</h3>
+<h4>H4 标题</h4>
+<h5>H5 标题</h5>
+<h6>H6 标题</h6>
+
+
+
+

文字：

+
+

正文文字

+

链接文字

+

提示文字

+

较小文字

+

加粗文字

+

引用文字

+

斜体文字

+

强调文字

+

加亮文字

+

含删除线文字

+

键盘符号 Ctrl + S

+
+
+ 这是一个引用段落的测试。Kico Style 最早起源于 2016 + 年的“缤奇官网”项目，在保罗开发完此项目之后仍有很多的前端项目，保罗在制作过程中发现不同的项目存在很多的重复之处，因此制作了这个框架。Kico + Style + 仅包含常用的功能，不含其他繁杂的样式，既方便调用也无需像其他框架一样记录各种类名，让你的前端作品装逼更持久~ +
+
+
+ 查看代码： + 
<p>正文文字</p>
+<p><a href="#">链接文字</a></p>
+<p><abbr title="Kico Style 自带的提示功能">提示文字</abbr></p>
+<p><small>较小文字</small></p>
+<p><b>加粗文字</b></p>
+<p><cite>引用文字</cite></p>
+<p><i>斜体文字</i></p>
+<p><em>强调文字</em></p>
+<p><mark>加亮文字</mark></p>
+<p><del>含删除线文字</del></p>
+<p>键盘符号 <kbd>Ctrl + S</kbd></p>
+<hr/>
+<blockquote>这是一个引用段落的测试。Kico Style 最早起源于 2016 年的“缤奇官网”项目，在保罗开发完此项目之后仍有很多的前端项目，保罗在制作过程中发现不同的项目存在很多的重复之处，因此制作了这个框架。Kico Style 仅包含常用的功能，不含其他繁杂的样式，既方便调用也无需像其他框架一样记录各种类名，让你的前端作品装逼更持久~</blockquote>
+
+
+
+

图片：

+

Kico Style 将所有图片响应式处理了，确保图片不会出现过大而溢出页面的现象。

+
+ + + +
+
+ 查看代码： + 
<img src="static/saratoga.jpg"/>
+<img src="static/test-image-1.jpg"/>
+<img src="static/test-image-2.jpg"/>
+
+
+
+

文章：

+

Kico Style 默认将所有 article 标签的子元素做了排版优化，增加间距、设置新的换行机制等，减少重复编写对应的排版样式代码。

+
+
+

早上在 B 站一个原神的视频下方评论了，结果意外的上了热评，这是我少见的第一次上热评，究竟评论了啥捏？

+
原神这么火 我还是遇不到一个玩原神的女朋友 😭
+

都知道我喜欢自嘲，我心里就想着肯定会有人说其实是因为我本来就没有女朋友，结果这个人他确实出现了！

+
有没有一种可能，你是遇不到女朋友 😂
+

主要还是受到了此前那位前同事的朋友圈的影响（他说自己是提瓦特认识的女朋友），总不能在朋友圈里发自己是废物吧，就只能把其他地方当树洞，在网上和群里面吐槽了。这下子不少人都知道我母胎单身 20 年了吧！

+
+
+
+ 查看代码： + 
<article>
+  <p>早上在 B 站一个原神的视频下方评论了，结果意外的上了热评，这是我少见的第一次上热评，究竟评论了啥捏？</p>
+  <blockquote>原神这么火 我还是遇不到一个玩原神的女朋友 😭</blockquote>
+  <p>都知道我喜欢自嘲，我心里就想着肯定会有人说其实是因为我本来就没有女朋友，结果这个人他确实出现了！</p>
+  <blockquote>有没有一种可能，你是遇不到女朋友 😂</blockquote>
+  <p>主要还是受到了此前那位前同事的朋友圈的影响（他说自己是提瓦特认识的女朋友），总不能在朋友圈里发自己是废物吧，就只能把其他地方当树洞，在网上和群里面吐槽了。这下子不少人都知道我母胎单身 20 年了吧！</p>
+</article>
+
+
+
+

按钮：

+

给 a 元素、input 按钮元素或 button 元素添加 btn 类，即可让此元素变成一个按钮。

+
+ + + a 按钮 +
+
+ 查看代码： + 
<input class="btn" type="button" value="input 按钮"/>
+<button class="btn">button 按钮</button>
+<a class="btn">a 按钮</a>
+
+ +

给按钮添加 small 和 large 扩展类，可以使按钮变小和变大。

+
+ + + + +
+
+ 查看代码： + 
<button class="btn blue small">小按钮</button>
+<button class="btn blue">一般按钮</button>
+<button class="btn blue middle">中按钮</button>
+<button class="btn blue large">大按钮</button>
+
+ +

按钮默认为纯白色，给按钮添加 red，yellow，blue，green 类可以让按钮变成 红/黄/蓝/绿/透明 的颜色。

+
+ + + + + +
+
+ 查看代码： + 
<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>
+
+ +

禁用的按钮：

+
+ +
+
+ 查看代码： + 
<button class="btn red" disabled>禁用的按钮</button>
+
+
+
+

漂浮提示：

+

漂浮提示可以用较为隐藏的方式为用户提供帮助或引导信息，将鼠标移入文字内容后展示。

+
+ 上方显示 + 底侧显示 + 右侧显示 + 左侧显示 +
+
+ 查看代码： + 
<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>
+
+ +

它们还可以自由组合使用呢：

+
+ 左上方显示 + 右下方显示 +
+
+ 查看代码： + 
<span ks-tag="top left" ks-text="我在左上方显示（top left）">
+  左上方显示
+</span>
+<span ks-tag="bottom right" ks-text="我在右下方显示（bottom right）">
+  右下方显示
+</span>
+
+
+
+

代码块：

+
+

alert("Hello World!")

+ 
function Drawer({ visible, children }) {
+  return (
+    <div className={clsx(styles.drawer, visible && styles.active)}>
+      {children}
+    </div>
+  );
+}
+
+
+ 查看代码： + 
<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>
+
+
+
+
+

项目列表：

+
PS：给 ul 元素添加 clear 扩展类可以去除左侧小点点
+
+

自驾游采购清单：

+
    +
  • 帐篷
    • +
  • + 吃的 +
      +
    • 零食
      • +
    • 钓上来的鱼
      • +
    • 鱼丸、火腿肠
      • +
    +
    • +
  • 旅行背包
    • +
  • 烧烤、钓鱼装备
    • +
+
+
+ 查看代码： + 
<h3>自驾游采购清单：</h3>
+<ul>
+  <li>帐篷</li>
+  <li>
+    吃的
+    <ul>
+      <li>零食</li>
+      <li>钓上来的鱼</li>
+      <li>鱼丸、火腿肠</li>
+    </ul>
+  </li>
+  <li>旅行背包</li>
+  <li>烧烤、钓鱼装备</li>
+</ul>
+
+
+

明天要做的事情：

+
    +
  1. 去公司上班 +
      +
    1. 和同事问好
      2. +
    2. 完善项目代码
      3. +
    3. 和项目组交谈事务
      4. +
    +
    2. +
  2. 和公司同事去吃下午茶
    3. +
  3. 和女朋友约会（并不可能）
    4. +
+
+
+ 查看代码： + 
<h3>明天要做的事情：</h3>
+<ol>
+  <li>去公司上班
+    <ol>
+      <li>和同事问好</li>
+      <li>完善项目代码</li>
+      <li>和项目组交谈事务</li>
+    </ol>
+  </li>
+  <li>和公司同事去吃下午茶</li>
+  <li>和女朋友约会（并不可能）</li>
+</ol>
+
+
+

我的梦想：

+
+
拥有一只女朋友
+
长相可爱，愿意相互包容
+
开发属于自己的 CSS 框架
+
已实现，也就是 Kico Style
+
建立缤奇科技公司
+
主要业务是做游戏的
+
+
+
+ 查看代码： + 
<h3>我的梦想：</h3>
+<dl>
+  <dt>拥有一只女朋友</dt>
+  <dd>长相可爱，愿意相互包容</dd>
+  <dt>开发属于自己的框架</dt>
+  <dd>已实现，也就是 Kico Style</dd>
+  <dt>建立缤奇科技公司</dt>
+  <dd>选址在珠三角地区为宜</dd>
+</dl>
+
+
+
+

表单：

+
+
+ + + + + + + + + + + + + + + + + + + + + +
+
+
+ 查看代码： + 
<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>
+
+
+
+

表单小组：

+
PS：给使用 form 或 fieldset 标签的元素添加 inline 类可以使其子选项单行显示。
+
+
+
+ 多行： + + + +
+
+ 单行： + + + +
+
+ 混搭： +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+ 查看代码： + 
<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>
+
+
+
+

表格：

+

Kico Style 自带响应式表格系统，须在 table 元素前添加一个类名为 ks-table 的 div 盒子。

+
PS：表格默认为 100% 尺寸，待表格内文字空间不足时，将会自动出现滚动条以实现响应式。如果想限制表格宽度，请使用栅格系统。
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
姓名性别年龄介绍
小缤女13缤奇的萌妹子，小明很想抱着软哒哒的她呢！
小奇男13缤奇的全栈工程师，小明认为他是只大佬。
小明男17缤奇的前端工程师，就是写这个框架的逗比。
+
+
+
+ 查看代码： +
+
+ +
在提交 a991a2 中，已经不会默认禁止元素换行了。如果想要回到此前的方式布局表格，你不妨可以尝试一下 .text-nowrap 类名。
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
姓名性别年龄介绍
小缤女13缤奇的萌妹子，小明很想抱着软哒哒的她呢！
小奇男13缤奇的全栈工程师，小明认为他是只大佬。
小明男17缤奇的前端工程师，就是写这个框架的逗比。
+
+
+
+ 查看代码： +
+
+ +

给表格添加 fill 扩展类即可获得色彩版的效果。

+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
姓名性别年龄介绍
小缤女13缤奇的萌妹子，小明很想抱着软哒哒的她呢！
小奇男13缤奇的全栈工程师，小明认为他是只大佬。
小明男17缤奇的前端工程师，就是写这个框架的逗比。
+
+
+
+ 查看代码： +
+
+ +

如果想做一个内容复杂的表格，需要部分列换行，部分列固定，且不能出现滚动条，你可以结合 HTML 的 colgroup 标签，或者使用 .text-nowrap 类名。

+
+ + + + + + + + + + + + + + + + + + + + + + +
FeaturesDescription
Easy Customized + Use CSS Variable, you can modify the colors, paddings, + and more thing. +
Reset Default Styles + Just write HTML code, the default CSS style is just + enough. It looks better than the browser's. +
Lightweight Code + Use Kico Style, the base CSS filesize with GZIP can be + less than 7kb. that isn't great? +
+
+
+ 查看代码： +
+
+
+
+

多媒体：

+

一首随机动漫音乐：

+
+ +
+
+ 查看代码： +
+
+ +

一个小视频（来源自 cPlayer 项目）：

+
+ +
+
+ 查看代码： +
+
+
+
+
+
+ + + + + + + diff --git a/grid.html b/grid.html new file mode 100755 index 0000000..9bf4f71 --- /dev/null +++ b/grid.html @@ -0,0 +1,400 @@ + + + + + 样式 - Kico Style + + + + + + + + + + +
+
+
+

样式

+

Kico Style 的内置样式

+
+
+

栅格系统

+

Kico Style 采用了类似 BootStrap 的 12 格布局，可用于手机，平板和台式机，并设置有三个尺寸的栅格系统。通过改变您的浏览器宽度，即可体验到不同类的效果 😉

+

建议在一行内不要使栅格超过总和 12，避免间距出现错误。（在新版已经支持多行展示，但会通过清除底部 margin 的方式纠正间距，建议为此保留足够的空间）同时建议在一行内不要混用不同类型的 Column 列元素。

+
+

栅格尺寸：

+

通过设置栅格尺寸，就可以快速构建一套多元化的响应式布局。

+
+
+
+

col-6

+
+
+

col-6

+
+ +
+

col-s-4

+
+
+

col-s-4

+
+
+

col-s-4

+
+ +
+

.col-m-3

+
+
+

.col-m-3

+
+
+

.col-m-3

+
+
+

.col-m-3

+
+ +
+

col-l-6

+
+
+

col-l-6

+
+
+
+
+ 查看代码： +
+
+
+
+

自动栅格

+

通过设置自动栅格，可以构建五栏布局（需根据子元素内容来决定），或是填充单行其余剩下的空间。

+
+
+
+

col-auto

+
+
+

col-auto

+
+
+

col-auto

+
+
+

col-auto

+
+
+

col-auto

+
+ +
+

col-3

+
+
+

col-4

+
+
+

col-auto

+
+
+
+
+ 查看代码： +
+
+
+
+

栅格类型：

+

通过设置栅格类型，可以增强该栅格的响应式效果。

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
适用环境类名行为
固定.col-*始终为横向摆放，死都不会改（叠加后面的类则作为小于 600px 的设置，不竖向摆放）
手机.col-s-*大于 600px 的屏幕将更换为横向摆放
平板.col-m-*大于 900px 的屏幕将更换为横向摆放
台式机.col-l-*大于 1024px 的屏幕将更换为横向摆放
+
+
+
+

栅格间距：

+

通过栅格间距，可以用更窄的方式设计较为传统的页面。在 .row 元素上设置即可。

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
间距大小类名描述
0.full没有间距
1em.s较窄的间距
2em无需添加默认间距
2.5em.m较宽间距
3em.l宽间距
1em/2emauto自适应间距 新/推荐
+
+
+
+
+

自动间距的栅格

+
+
+

手机上变窄

+
+
+

电脑上默认宽

+
+
+
+
+ 查看代码： +
+
+
+
+

对齐方式：

+

通过设置对齐方式，可以实现一些用 Float 浮动方案较难解决的垂直居中对齐方式。

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
对齐方式类名
左上不添加任何类
右上right 或 right top
左下bottom 或 left bottom
右下right bottom
全局居中center
左居中left center
右居中right center
上居中top center
下居中bottom center
左下bottom 或 left bottom
右下right bottom
电脑为左，手机为横向居中to-center 或 left to-center
电脑为右，手机为横向居中right to-center
+
+
+
+

栅格隐藏：

+

通过设置栅格隐藏扩展类 hide-s，hide-m，hide-l 就可以在对应宽度时隐藏该栅格。

+
+
+
+

在小于 600px 时隐藏

+
+
+

在小于 900px 时隐藏

+
+
+

在小于 1024px 时隐藏

+
+
+
+
+ 查看代码： + 
<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>
+
+
+
+
+
+ + + + + + + diff --git a/index.html b/index.html new file mode 100755 index 0000000..68deab0 --- /dev/null +++ b/index.html @@ -0,0 +1,134 @@ + + + + + 开始 - Kico Style + + + + + + + + + +
+
+
+

开始

+

如何使用 Kico Style

+
+
+

介绍

+

Kico Style 是一个简洁轻盈的前端框架，由 奇趣保罗 开发，是 Kico 前端作品系列的一员。

+
    +
  • 最新版本：1.0.2
    • +
  • 上次更新：2023.4.15
    • +
  • 上次修订：2021.12.24
    • +
+
+

致敬

+

奇趣框架的开发，不仅源自我的开发经验，更少不了来自开源社区广大项目的馈赠。在奇趣框架的设计过程中，我多少参考或引用了这些项目的内容（仅按照项目名称长度排序，不分前后）：

+
    +
  • Tabler
    • +
  • JQuery
    • +
  • Bootstrap
    • +
  • Normalize.css
    • +
+

Bootstrap 虽然功能齐全，但是有很多类名，我就几乎没有使用过。能用一行 CSS 样式附加在指定元素上面，为什么还得额外记类名呢？如果你要写一个拥有自己设计风格的块，肯定是用自己的类名来定义，才能更快速的实现吧！

+
+
+

注意

+

Kico Style 是一个从简优化的框架。和其他前端框架（例如 Bootstrap、Foundation）不同的是，它不可以快速搭建用户界面。因此，它没有提供大量丰富的组件和样式，不必担心类名命名空间的问题，覆盖样式也更容易。如果你不想自主编写样式，而是更偏向快速搭建网站结构，请尝试 Bootstrap 吧。

+

如果想要在 React/Vue 的开发环境下搭建一个用于生产力的应用，需要大量交互组件，不如在使用 Kico Style 的基础上，再使用 Ant Design 组件库吧，作者实测基本上是没有冲突问题的。

+

Kico Style 为支持 HTML5、CSS3 的浏览器所打造，谷歌（Webkit）、火狐（Gecko）等现代浏览器效果最佳。经过日月沧桑，IE 已经逐渐退出市场，取而代之的是基于 Webkit 的国产浏览器，所以开发者完全没有必要为了一款上古产品而消耗时间优化改良自己的产品。

+
+
+

为何使用？

+

它拥有类似 Bootstrap 的栅格系统，并且用法相似。并为移动设备的展示提供了更好的解决方案。

+

它拥有高度的 DIY 空间，你不需要像 Bootstrap 一样必须编写其固定的结构并思考如何覆盖其内置的样式。

+

它重写了很多基础风格，article 文章标签内的元素无论是字体大小还是间距都进行了优化，在版式上几乎无需二次重写。

+

它结合了作者的实战开发经验，内置了一些常用的 JavaScript 组件，例如 “AJAX”、“图片灯箱”、“消息弹框”、“图片懒加载”...

+
+
+

下载与使用

+

+ 在 GitHub 上获取 +

+

1. 引用 CSS 样式

+ 
<!-- 直接引用项目文件夹 -->
+<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"/>
+
+

2. 在 head 标签内插入可视区域代码，开启响应式功能

+ 
<meta name="viewport" content="width=device-width, maximum-scale=1, initial-scale=1"/>
+

3. 如需使用本框架的原生 JS 组件，请在 body 标签结尾之前引用 JavaScript。

+ 
<!-- 直接引用项目文件夹 -->
+<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>
+
PS：CDN 上的版本跟随的是最新的 Release，开发版本也有一定时长的缓存时间，开发版本之间产生的差异可能会多一些，所以暂时建议进行本地引入
+
+
+

另请参阅

+

还有音乐播放器 Kico Player、时钟小工具 Kico Tools 等有趣的前端作品，欢迎关注！

+
+

奇趣播放器（Kico Player）

+

功能强大的前端音乐播放器，同样由保罗开发。

+

+ 项目地址 + 文档地址 +

+
+
+

奇趣小工具 (Kico Tools)

+

一个集合了时钟、秒表、倒计时和随机数的小工具，依旧是由保罗开发。它采用 SvelteJS 框架进行开发。

+

+ 项目地址 +

+
+
+
+
+
+ + + + + + + diff --git a/static/doc.css b/static/doc.css new file mode 100755 index 0000000..922c162 --- /dev/null +++ b/static/doc.css @@ -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 } diff --git a/static/doc.js b/static/doc.js new file mode 100755 index 0000000..b7d7a50 --- /dev/null +++ b/static/doc.js @@ -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(); diff --git a/static/icon-192.png b/static/icon-192.png new file mode 100755 index 0000000..adea98d Binary files /dev/null and b/static/icon-192.png differ diff --git a/static/icon-32.png b/static/icon-32.png new file mode 100755 index 0000000..4bd037d Binary files /dev/null and b/static/icon-32.png differ diff --git a/static/kico.css b/static/kico.css new file mode 100755 index 0000000..45ddf06 --- /dev/null +++ b/static/kico.css @@ -0,0 +1,1491 @@ +@charset "UTF-8"; + +/* ---- + +# Kico Style 1.0 +# By: Dreamer-Paul +# Last Update: 2023.4.14 + +一个可口的极简响应式前端框架。 + +本代码为奇趣保罗原创，并遵守 MIT 开源协议。欢迎访问我的博客：https://paugram.com + +---- */ + +/* 0 - 全局 +-------------------------------- */ +body, dl, dt, dd, ol, ul, +h1, h2, h3, h4, h5, h6, p, +pre, code, form, +fieldset, legend, figure{ + margin: 0; + padding: 0; +} + +*, *:before, *:after{ box-sizing: border-box } + +:root{ + /* 内设配色方案 */ + --red: #ea644a; + --red-color: #fff; + + --yellow: #ffb03a; + --yellow-color: #fff; + + --blue: #3498db; + --blue-color: #fff; + + --green: #27a17e; + --green-color: #fff; + + --primary: var(--blue); + --primary-color: var(--blue-color); + + --secondly: var(--yellow); + --secondly-color: var(--yellow-color); + + --gray: #ccc; + --light-gray: #ddd; + --lighter-gray: #eee; + + /* 容器 */ + --wrapper-width: 75em; + --wrapper-gap: 1.25em; + + /* 边框 */ + --radius: .5em; + --border-color: transparent; + --border-width: 1px; + + /* 间距 */ + --row-gap: 2em; +} + +:root{ + color: #353535; + -webkit-text-size-adjust: 100%; + -webkit-tap-highlight-color: transparent; + font: 16px/1.5 'Microsoft Yahei', 'PingFang SC', 'Hiragino Sans GB', sans-serif; +} + +@media screen and (max-width: 768px){ + :root.font-auto{ font-size: 14px } +} + +@media screen and (min-width: 1921px){ + :root.font-auto{ font-size: 18px } +} + +@media (prefers-reduced-motion: no-preference){ + :root{ scroll-behavior: smooth } +} + +/* - 选择内容 */ +::-moz-selection{ + color: #fff; + background-color: rgba(0, 0, 0, .66); +} + +::selection{ + color: #fff; + background-color: rgba(0, 0, 0, .66); +} + +/* - 滚动条 */ +::-webkit-scrollbar{ + width: 10px; + height: 10px; +} + +::-webkit-scrollbar-thumb{ + background: #ccc; + background: var(--gray); + border-radius: 5px; +} +::-webkit-scrollbar-track{ border-radius: 5px } +::-webkit-scrollbar-track:hover{ background: rgba(0, 0, 0, .05) } + +body::-webkit-scrollbar-track{ border-radius: 0 } + +/* - 辅助类 */ +.float-none{ float: none !important } +.float-left{ float: left !important } +.float-right{ float: right !important } + +.clearfix:after{ + content: ''; + clear: both; + display: block; +} + +.font-s{ font-size: .875em } +.font-m{ font-size: 1.125em } +.font-l{ font-size: 1.25em } + +.text-left{ text-align: left !important } +.text-right{ text-align: right !important } +.text-center{ text-align: center !important } +.text-justify{ text-align: justify !important } + +.text-break{ word-break: break-all !important } +.text-nowrap{ white-space: nowrap !important } +.text-ellipsis{ + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +/* 1 - 容器 +-------------------------------- */ +.wrap{ + margin: 0 auto; + padding: 0 var(--wrapper-gap); + max-width: var(--wrapper-width); + box-sizing: content-box; +} + +.wrap.min{ max-width: 50em } +.wrap.mid{ max-width: 65em } +.wrap.max{ max-width: 85em } +.wrap.full{ max-width: 100% } + +.wrap.thin{ padding: 0 .75em } +.wrap.thick{ padding: 0 1.5em } +.wrap.clear{ + padding-left: 0; + padding-right: 0; +} + +/* 2 - 元素 +-------------------------------- */ +h1{ font-size: 2em } + +h1, h2, h3, h4, h5, h6{ margin-bottom: 1rem } + +h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, h6:last-child, p:last-child{ margin-bottom: 0 } + +p{ + line-height: 1.8; + margin-bottom: 1em; +} + +a{ + color: #3498db; + color: var(--primary); + text-decoration: none; +} + +a:hover{ + color: #ffc670; + color: var(--secondly); +} + +abbr[title]{ + cursor: help; + text-decoration: none; + border-bottom: 1px dotted; +} + +em, mark, kbd{ + font-size: .875em; + padding: .25em .5em; + border-radius: var(--radius); +} + +em{ + color: var(--primary-color); + font-style: normal; + background-color: var(--primary); +} +em.red{ + color: var(--red-color); + background: var(--red); +} +em.yellow{ + color: var(--yellow-color); + background: var(--yellow); +} +em.blue{ + color: var(--blue-color); + background: var(--blue); +} +em.green{ + color: var(--green-color); + background: var(--green); +} + +kbd{ + color: #fff; + background: #333; + font-family: 'Consolas', 'Courier New', monospace, "微软雅黑"; +} + +img, svg, audio, video, iframe{ + max-width: 100%; + vertical-align: middle; +} + +/* - 文章 */ +article{ + letter-spacing: .03em; +} + +article a{ + word-break: break-all; +} + +article > *{ margin-bottom: 1em } +article > *:last-child{ margin-bottom: 0 } + +article h1, article h2, article h3{ font-size: 1.2em } +article h4, article h5, article h6{ font-size: 1.1em } + +article ul, article ol, article dl{ line-height: 1.8 } + +/* - 按钮 */ +button{ + margin: 0; + outline: 0; + font: inherit; +} + +.btn{ + color: inherit; + cursor: pointer; + background: #fff; + padding: .5em 1em; + display: inline-block; + border-radius: var(--radius); + border: var(--border-width) solid var(--border-color); +} +.btn:hover{ color: inherit } + +/* -- 禁用的按钮 */ +.btn[disabled]{ + opacity: .5; + cursor: not-allowed; +} + +/* -- 按钮尺寸 */ +.btn.small{ font-size: .875em } +.btn.middle, .btn.large{ padding: .75em 1.5em } +.btn.large{ font-size: 1.2em } + +/* -- 按钮颜色 */ +.btn.red{ + color: var(--red-color); + background-color: var(--red); +} +.btn.yellow{ + color: var(--yellow-color); + background-color: var(--yellow); +} +.btn.blue{ + color: var(--blue-color); + background-color: var(--blue); +} +.btn.green{ + color: var(--green-color); + background-color: var(--green); +} +.btn.primary{ + color: var(--primary-color); + background-color: var(--primary); +} +.btn.secondly{ + color: var(--secondly-color); + background-color: var(--secondly); +} +.btn.transparent{ background-color: transparent } + +/* - 代码 */ +pre, code{ + word-break: normal; + font-family: 'Consolas', 'Courier New', monospace; +} + +pre{ + tab-size: 4; + padding: 1em; + color: #fff; + overflow: auto; + background-color: #333; + border-radius: var(--radius); +} + +:not(pre) > code{ + color: #c40b00; + font-size: 85%; + word-wrap: normal; + border-radius: var(--radius); + padding: .25em .5em; + word-break: break-all; + background-color: #f7f2f4; +} + +/* - 项目列表 */ +ul, ol{ margin-left: 1.25em } +ul.clear, ol.clear{ + margin-left: 0; + list-style: none; +} + +dl dd{ margin-left: 1.5em } +dl dd:before{ + content: "--"; + margin-right: .25em; +} + +/* - 补间动画 */ +a, .btn{ transition: color .3s, background-color .3s } + +/* - 引用 */ +blockquote{ + margin: 0 0 1em; + line-height: 1.8; + font-style: oblique; + background: #f5fafd; + padding: 1em 1em 1em 2em; + border-left: 5px #3498db solid; +} + +cite{ + color: var(--primary); + font-style: normal; +} + +/* - 分割线 */ +hr{ + border: 0; + margin: 1.5em 0; + border-top: var(--border-width) var(--gray) solid; +} + +/* - 表单 */ +input[disabled], textarea[disabled]{ + cursor: no-drop !important; +} + +input, select, textarea{ + margin: 0; + outline: none; + font: inherit; + max-width: 100%; + background: none; + vertical-align: middle; +} + +input[type*="date"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"], +select, textarea{ + padding: .5em; + color: inherit; + border-radius: var(--radius); + border: var(--border-width) var(--gray) solid; + /* 旧版本浏览器可能部分输入框会塌陷 */ + min-height: calc(2.5em + calc(var(--border-width) * 2)); + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; +} + +input.invalid, input:out-of-range{ + border-color: #c40b00; + background: rgba(255, 0, 0, .1); +} + +input[type="file"]:not([hidden]){ + display: flex; + align-items: center; +} + +input[type="file"]::-webkit-file-upload-button{ + color: #fff; + border: none; + outline: none; + padding: .5em 1em; + font-size: inherit; + margin-right: .5em; + display: inline-block; + border-radius: var(--radius); + background-color: var(--primary); +} + +input[type="color"]{ + width: 3em !important; + height: 3em !important; + border: none; + padding: 0; +} + +input[type="color"]::-webkit-color-swatch-wrapper{ + padding: 0; +} + +input[type="color"]::-moz-color-swatch{ + border: none; +} + +input[type="color"]::-webkit-color-swatch{ + border: none; + border-radius: var(--radius); +} + +input[type="range"]{ + margin: 0; + height: 100%; + -webkit-appearance: none; + -moz-appearance: none; + cursor: ew-resize; + cursor: grab; + overflow: hidden; + min-height: 1.5rem; +} + +input[type="range"]:focus{ + outline: none; + box-shadow: none; +} + +input[type="range"]:active::-webkit-slider-thumb{ + border-color: var(--primary); + background-color: var(--primary); +} + +input[type="range"]:active::-moz-range-thumb{ + border-color: var(--primary); + background-color: var(--primary); +} + +input[type="range"]:focus::-ms-thumb{ + border-color: var(--primary); + background-color: var(--primary); +} + +input[type="range"]::-moz-focus-outer{ border: 0 } + +input[type="range"]::-webkit-slider-runnable-track{ + content: ''; + height: calc(var(--border-width) * 2); + pointer-events: none; + background-color: var(--primary); +} + +input[type="range"]::-webkit-slider-thumb{ + width: 1em; + height: 1em; + -webkit-appearance: none; + appearance: none; + background: #fff; + border-radius: 5em; + margin-top: calc(-.5em + var(--border-width)); + border: var(--border-width) solid rgba(0, 0, 0, .15); + transition: .3s border-color, .3s background-color; +} + +input[type="range"]::-moz-range-track{ + height: 2px; + background: rgba(0, 50, 126, .12); +} + +input[type="range"]::-moz-range-thumb{ + width: 1em; + height: 1em; + background: #fff; + border-radius: 5em; + margin-top: calc(-.5em + var(--border-width)); + border: var(--border-width) solid rgba(0, 0, 0, .15); + transition: .3s border-color, .3s background-color; +} + +input[type="range"]::-moz-range-progress{ + border: 0; + height: 2px; + margin-top: 0; + background-color: var(--primary); +} + +select{ + -webkit-appearance: none; + appearance: none; + padding-right: 1.75em; + background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 5'%3E%3Cpath fill='none' stroke='%23333' stroke-linecap='round' stroke-linejoin='round' d='M.5.5l4.5 4 4.5-4'/%3E%3C/svg%3E") right .5rem center/.75em no-repeat; +} + +select[multiple], select[size]:not([size="1"]){ + background: none; +} + +textarea{ + display: block; + overflow: auto; + resize: vertical; +} + +progress{ + overflow: auto; + border-radius: 50px; +} + +progress::-webkit-progress-bar{ + background-color: #eee; +} + +/* - 表单模组 */ + +/* -- 单选多选框 */ +input[type="checkbox"], input[type="radio"]{ + float: left; + width: 1.5em; + height: 1.5em; + cursor: pointer; + position: relative; + margin: 0 .5em 0 0; + -moz-appearance: none; + -webkit-appearance: none; +} + +input[type="checkbox"]:before, input[type="radio"]:before{ + content: ''; + width: 100%; + height: 100%; + display: block; + box-shadow: 0 0 0 var(--border-width) var(--gray) inset; + transition: background-color .3s, box-shadow .3s; +} + +input[type="checkbox"]:after{ + top: 10%; + left: 10%; + width: 30%; + height: 60%; + content: ''; + position: absolute; + transition: transform .3s; + transform-origin: 100% 100%; + border-right: .15em solid #fff; + border-bottom: .15em solid #fff; + transform: rotate(45deg) scale(0); +} + +input[type="radio"], input[type="radio"]:before{ border-radius: 100% } +input[type="checkbox"], input[type="checkbox"]:before{ border-radius: .2em } + +input[type="radio"]:checked:before{ + background-color: var(--primary); + border: var(--border-width) solid var(--primary); + box-shadow: 0 0 0 .2em #fff inset; +} + +input[type="checkbox"]:checked:before{ + box-shadow: none; + background-color: var(--primary); +} + +input[type="checkbox"]:checked:after{ + transform: rotate(45deg) scale(1); +} + +/* -- 开关按钮 */ +input[type="checkbox"].switch{ + width: 4em; + height: 2em; + float: none; + cursor: pointer; + position: relative; + box-sizing: content-box; + border-radius: calc(var(--radius) * 10); + border: var(--border-width) solid var(--gray); + background-color: var(--lighter-gray); + transition: border .3s, background-color .3s; +} + +input[type="checkbox"].switch:before{ + margin: 0; + border: 0; + width: 2em; + height: 2em; + content: ''; + display: block; + box-shadow: none; + background: #fff; + position: absolute; + transition: transform .3s; + border-radius: calc(var(--radius) * 10); +} + +input[type="checkbox"].switch:after{ content: normal } + +input[type="checkbox"].switch:checked{ + box-shadow: none; + border-color: var(--primary); + background-color: var(--primary); +} + +input.switch:checked:before{ + background: #fff; + transform: translateX(2em); +} + +/* - 表单小组 */ +fieldset{ + border: none; + margin-bottom: 2em; +} + +fieldset > *{ margin-bottom: 1em } +fieldset:last-child{ margin-bottom: 0 } + +fieldset legend{ margin: 0 0 1em } + +fieldset input:not([type="checkbox"]):not([type="radio"]), fieldset select, fieldset textarea{ width: 100% } + +/* -- 控件模块 */ +fieldset label{ + display: block; + user-select: none; +} + +/* -- 控件标题 */ +fieldset label > span:first-child{ + opacity: .6; + font-size: .875em; + white-space: nowrap; + margin-bottom: .5rem; + display: inline-block; +} + +fieldset label.required > span:first-child:after{ + color: red; + content: "*"; + margin-left: .25em; +} + +/* -- 单行表单 */ +form .inline label, fieldset.inline label{ + display: inline-block; + vertical-align: bottom; + margin: 0 .75em .75em 0; +} + +/* - 表格 */ +.ks-table{ + width: 100%; + overflow-x: auto; + overflow-y: hidden; + border-radius: var(--radius); +} + +table{ + border: 0; + width: 100%; + max-width: 100%; + caption-side: bottom; + border-collapse: collapse; +} + +th:not([align]){ + text-align: inherit; + text-align: -webkit-match-parent; +} + +th, td{ padding: .75em } + +table thead tr{ + border-bottom: min(2px, calc(var(--border-width) * 2)) solid var(--gray); + border-bottom-color: var(--gray); +} +table tbody tr{ + border-bottom: var(--border-width) solid var(--light-gray); + transition: border-color .3s, background-color .3s; +} +table tbody tr:last-child{ border-bottom: 0 } + +table tbody tr:hover{ background-color: var(--lighter-gray) } + +/* - 蓝色风格 */ +table.fill thead{ + background-color: var(--primary); + border-bottom: none; +} +table.fill thead tr{ + border-bottom: none; +} +table.fill thead th, table.fill thead td{ + color: #fff; +} + +table.fill tbody tr{ + border-bottom: none; +} + +table.fill tbody tr:nth-child(even) th, table.fill tbody tr:nth-child(even){ + background-color: #f7f7f7; +} + +/* - 嵌入式网页 */ +iframe{ + border: none; +} + +/* - 栅格系统 */ +.row{ + display: flex; + flex-wrap: wrap; + row-gap: var(--row-gap); + margin: 0 calc(var(--row-gap) / 2 * -1); +} + +.row.s{ + row-gap: 1em; + margin: 0 -.5em; +} +.row.m{ + row-gap: 2.5em; + margin: 0 -1.25em; +} +.row.l{ + row-gap: 3em; + margin: 0 -1.5em; +} + +.row.full{ + row-gap: 0; + margin: 0; +} + +/* -- 对齐方式 */ +.row.right{ justify-content: flex-end; } +.row.center{ justify-content: center; } +.row.around{ justify-content: space-around; } +.row.between{ justify-content: space-between; } + +/* -- 网格间距 */ +.row > [class*="col-"]{ + flex: 0 0 100%; + padding: 0 calc(var(--row-gap) / 2); + max-width: 100%; +} + +.row.s > [class*="col-"]{ + padding: 0 .5em; +} +.row.m > [class*="col-"]{ + padding: 0 1.25em; +} +.row.l > [class*="col-"]{ + padding: 0 1.5em; +} +.row.full > [class*="col-"]{ + padding: 0; +} + +/* -- 自适应间距栅格 */ +@media screen and (max-width: 600px){ + .row.auto{ + row-gap: 1em; + margin: 0 -.5em; + } + + .row.auto > [class*="col-"]{ + padding: 0 .5em; + } +} + +@media screen and (min-width: 1920px){ + .row.auto{ + row-gap: 2.5em; + margin: 0 -1.25em; + } + + .row.auto > [class*="col-"]{ + padding: 0 1.25em; + } +} + +/* -- 栅格主体 */ +.row .col-auto{ + flex: 1 1 auto; + max-width: 100%; +} + +.row .col-1{ + flex: 0 0 8.3333%; + max-width: 8.3333%; +} + +.row .col-2{ + flex: 0 0 16.6666%; + max-width: 16.6666%; +} + +.row .col-3{ + flex: 0 0 25%; + max-width: 25%; +} + +.row .col-4{ + flex: 0 0 33.3333%; + max-width: 33.3333%; +} + +.row .col-5{ + flex: 0 0 41.6666%; + max-width: 41.6666%; +} + +.row .col-6{ + flex: 0 0 50%; + max-width: 50%; +} + +.row .col-7{ + flex: 0 0 58.3333%; + max-width: 58.3333%; +} + +.row .col-8{ + flex: 0 0 66.6666%; + max-width: 66.6666%; +} + +.row .col-9{ + flex: 0 0 75%; + max-width: 75%; +} + +.row .col-10{ + flex: 0 0 83.3333%; + max-width: 83.3333%; +} + +.row .col-11{ + flex: 0 0 91.6666%; + max-width: 91.6666%; +} + +.row .col-12{ + flex: 0 0 100%; + max-width: 100%; +} + +/* --- 手机 */ +@media screen and (min-width: 600px){ + .row .col-s-auto{ + flex: 1 1 auto; + max-width: 100%; + } + + .row .col-s-1{ + flex: 0 0 8.3333%; + max-width: 8.3333%; + } + + .row .col-s-2{ + flex: 0 0 16.6666%; + max-width: 16.6666%; + } + + .row .col-s-3{ + flex: 0 0 25%; + max-width: 25%; + } + + .row .col-s-4{ + flex: 0 0 33.3333%; + max-width: 33.3333%; + } + + .row .col-s-5{ + flex: 0 0 41.6666%; + max-width: 41.6666%; + } + + .row .col-s-6{ + flex: 0 0 50%; + max-width: 50%; + } + + .row .col-s-7{ + flex: 0 0 58.3333%; + max-width: 58.3333%; + } + + .row .col-s-8{ + flex: 0 0 66.6666%; + max-width: 66.6666%; + } + + .row .col-s-9{ + flex: 0 0 75%; + max-width: 75%; + } + + .row .col-s-10{ + flex: 0 0 83.3333%; + max-width: 83.3333%; + } + + .row .col-s-11{ + flex: 0 0 91.6666%; + max-width: 91.6666%; + } + + .row .col-s-12{ + flex: 0 0 100%; + max-width: 100%; + } +} + +/* --- 平板 */ +@media screen and (min-width: 900px){ + .row .col-m-auto{ + flex: 1 1 auto; + max-width: 100%; + } + + .row .col-m-1{ + flex: 0 0 8.3333%; + max-width: 8.3333%; + } + + .row .col-m-2{ + flex: 0 0 16.6666%; + max-width: 16.6666%; + } + + .row .col-m-3{ + flex: 0 0 25%; + max-width: 25%; + } + + .row .col-m-4{ + flex: 0 0 33.3333%; + max-width: 33.3333%; + } + + .row .col-m-5{ + flex: 0 0 41.6666%; + max-width: 41.6666%; + } + + .row .col-m-6{ + flex: 0 0 50%; + max-width: 50%; + } + + .row .col-m-7{ + flex: 0 0 58.3333%; + max-width: 58.3333%; + } + + .row .col-m-8{ + flex: 0 0 66.6666%; + max-width: 66.6666%; + } + + .row .col-m-9{ + flex: 0 0 75%; + max-width: 75%; + } + + .row .col-m-10{ + flex: 0 0 83.3333%; + max-width: 83.3333%; + } + + .row .col-m-11{ + flex: 0 0 91.6666%; + max-width: 91.6666%; + } + + .row .col-m-12{ + flex: 0 0 100%; + max-width: 100%; + } +} + +/* --- 电脑 */ +@media screen and (min-width: 1024px){ + .row .col-l-auto{ + flex: 1 1 auto; + max-width: 100%; + } + + .row .col-l-1{ + flex: 0 0 8.3333%; + max-width: 8.3333%; + } + + .row .col-l-2{ + flex: 0 0 16.6666%; + max-width: 16.6666%; + } + + .row .col-l-3{ + flex: 0 0 25%; + max-width: 25%; + } + + .row .col-l-4{ + flex: 0 0 33.3333%; + max-width: 33.3333%; + } + + .row .col-l-5{ + flex: 0 0 41.6666%; + max-width: 41.6666%; + } + + .row .col-l-6{ + flex: 0 0 50%; + max-width: 50%; + } + + .row .col-l-7{ + flex: 0 0 58.3333%; + max-width: 58.3333%; + } + + .row .col-l-8{ + flex: 0 0 66.6666%; + max-width: 66.6666%; + } + + .row .col-l-9{ + flex: 0 0 75%; + max-width: 75%; + } + + .row .col-l-10{ + flex: 0 0 83.3333%; + max-width: 83.3333%; + } + + .row .col-l-11{ + flex: 0 0 91.6666%; + max-width: 91.6666%; + } + + .row .col-l-12{ + flex: 0 0 100%; + max-width: 100%; + } +} + +/* -- 网格对齐方式 */ +.row > .left, .row > .right, .row > .top, .row > .bottom, .row > .center{ + display: flex; + flex-direction: column; +} + +.row > .center{ + align-items: center; + justify-content: center; +} + +.row > .center-fixed{ + text-align: center; +} + +.row > .left{ + -webkit-box-align: start; + align-items: flex-start; +} + +.row > .right{ + -webkit-box-align: end; + align-items: flex-end; +} + +.row > .top{ + justify-content: flex-start; +} + +.row > .bottom{ + justify-content: flex-end; +} + +@media screen and (max-width: 900px){ + .row > .to-center{ + align-items: center !important; + } +} + +/* - 隐藏栅格功能 */ +@media screen and (max-width: 600px){ + .row > .hide-s{ display: none; } +} + +@media screen and (max-width: 900px){ + .row > .hide-m{ display: none; } +} + +@media screen and (max-width: 1024px){ + .row > .hide-l{ display: none; } +} + +/* 4 - 动画 +-------------------------------- */ + +/* - 淡入淡出 */ +@keyframes fade-in{ from{ opacity: 0 } to{ opacity: 1 } } +@-webkit-keyframes fade-in{ from{ opacity: 0 } to{ opacity: 1 } } + +@keyframes fade-off{ from{ opacity: 1 } to{ opacity: 0 } } +@-webkit-keyframes fade-off{ from{ opacity: 1 } to{ opacity: 0 } } + +@keyframes fade-in-top{ from{ opacity: 0; transform: translateY(20px) } to{ opacity: 1; transform: translateY(0) } } +@-webkit-keyframes fade-in-top{ from{ opacity: 0; transform: translateY(20px) } to{ opacity: 1; transform: translateY(0) } } + +@keyframes fade-in-bottom{ from{ opacity: 0; transform: translateY(-20px) } to{ opacity: 1; transform: translateY(0) } } +@-webkit-keyframes fade-in-bottom{ from{ opacity: 0; transform: translateY(-20px) } to{ opacity: 1; transform: translateY(0) } } + +@keyframes fade-in-left{ from{ opacity: 0; transform: translateX(20px) } to{ opacity: 1; transform: translateX(0) } } +@-webkit-keyframes fade-in-left{ from{ opacity: 0; transform: translateX(20px) } to{ opacity: 1; transform: translateX(0) } } + +@keyframes fade-in-right{ from{ opacity: 0; transform: translateX(-20px) } to{ opacity: 1; transform: translateX(0) } } +@-webkit-keyframes fade-in-right{ from{ opacity: 0; transform: translateX(-20px) } to{ opacity: 1; transform: translateX(0) } } + +/* - 淡入缩放 */ +@keyframes fade-small-large{ from{ opacity: 0; transform: scale(.5, .5) } to{ opacity: 1; transform: scale(1, 1) } } +@-webkit-keyframes fade-small-large{ from{ opacity: 0; transform: scale(.5, .5) } to{ opacity: 1; transform: scale(1, 1) } } + +@keyframes fade-large-small{ from{ opacity: 1; transform: scale(1, 1) } to{ opacity: 0; transform: scale(.5, .5) } } +@-webkit-keyframes fade-large-small{ from{ opacity: 1; transform: scale(1, 1) } to{ opacity: 0; transform: scale(.5, .5) } } + +@keyframes fade-larger-small{ from{ opacity: 0; transform: scale(1.5, 1.5) } to{ opacity: 1; transform: scale(1, 1) } } +@-webkit-keyframes fade-larger-small{ from{ opacity: 0; transform: scale(1.5, 1.5) } to{ opacity: 1; transform: scale(1, 1) } } + +@keyframes fade-small-larger{ from{ opacity: 1; transform: scale(1, 1) } to{ opacity: 0; transform: scale(1.5, 1.5) } } +@-webkit-keyframes fade-small-larger{ from{ opacity: 1; transform: scale(1, 1) } to{ opacity: 0; transform: scale(1.5, 1.5) } } + +@keyframes scale-small-large{ from{ transform: scale(0, 0) } to{ transform: scale(1, 1) } } +@-webkit-keyframes scale-small-large{ from{ transform: scale(0, 0) } to{ transform: scale(1, 1) } } + +@keyframes scale-large-small{ from{ transform: scale(1, 1) } to{ transform: scale(0, 0) } } +@-webkit-keyframes scale-large-small{ from{ transform: scale(1, 1) } to{ transform: scale(0, 0) } } + +/* - 平移 */ +@keyframes up-and-down{ from{ transform: translateY(-20px) } to{ transform: translateY(20px) } } +@-webkit-keyframes up-and-down{ from{ transform: translateY(-20px) } to{ transform: translateY(20px) } } + +@keyframes left-and-right{ from{ transform: translateX(-20px) } to{ transform: translateX(20px) } } +@-webkit-keyframes left-and-right{ from{ transform: translateX(-20px) } to{ transform: translateX(20px) } } + +/* - 旋转 */ +@keyframes rotate{ from{ transform: rotate(0deg) } to{ transform: rotate(360deg) } } +@-webkit-keyframes rotate{ from{ transform: rotate(0deg) } to{ transform: rotate(360deg) } } + +/* - 弹跳 */ +@keyframes jump{ + 0% { + transform: translateY(0) scale(1.15,.8) + } + + 20% { + transform: translateY(-35px) scaleY(1.1) + } + + 50% { + transform: translateY(-50px) scale(1) + } + + 80% { + transform: translateY(-35px) scale(1) + } + + to { + transform: translateY(0) scale(1.15,.8) + } +} + +/* 5 - 组件 +-------------------------------- */ + +/* - 漂浮提示 */ +[ks-tag]{ position: relative } +[ks-tag]:before, [ks-tag]:after{ + z-index: 1; + opacity: 0; + position: absolute; + pointer-events: none; + transition: opacity .3s; +} + +/* -- 小箭头 */ +[ks-tag]:before{ + width: 0; + height: 0; + content: ''; + border: .5rem solid var(--border-color); +} + +[ks-tag~=top]:before{ + bottom: 100%; + border-top-color: rgba(0, 0, 0, .7); +} +[ks-tag~=bottom]:before{ + top: 100%; + border-bottom-color: rgba(0, 0, 0, .7); +} + +[ks-tag~=top]:before, [ks-tag~=bottom]:before{ + left: 50%; + transform: translateX(-50%); +} + +[ks-tag=left]:before{ + right: 100%; + border-left-color: rgba(0, 0, 0, .7); +} +[ks-tag=right]:before{ + left: 100%; + border-right-color: rgba(0, 0, 0, .7); +} + +[ks-tag=left]:before, [ks-tag=right]:before{ + top: 50%; + transform: translateY(-50%); +} + +/* -- 文字 */ +[ks-tag~=top]:after{ + bottom: 100%; + margin-bottom: 1rem; +} +[ks-tag~=bottom]:after{ + top: 100%; + margin-top: 1rem; +} + +[ks-tag=top]:after, [ks-tag=bottom]:after{ + left: 50%; + transform: translateX(-50%); +} + +[ks-tag=left]:after{ + right: 100%; + margin-right: 1rem; +} +[ks-tag=right]:after{ + left: 100%; + margin-left: 1rem; +} + +[ks-tag=left]:after, [ks-tag=right]:after{ + top: 50%; + transform: translateY(-50%); +} + +/* -- 组合对齐方式 */ +[ks-tag~=left][ks-tag~=top]:after, [ks-tag~=left][ks-tag~=bottom]:after{ + right: 0; + min-width: 4em; +} +[ks-tag~=right][ks-tag~=top]:after, [ks-tag~=right][ks-tag~=bottom]:after{ + left: 0; + min-width: 4em; +} + +[ks-text]:hover:before, [ks-text]:hover:after{ opacity: 1 } + +[ks-text]:after{ + color: #fff; + font-size: .85rem; + white-space: nowrap; + border-radius: .5rem; + padding: .25rem .5rem; + content: attr(ks-text); + background: rgba(0, 0, 0, .7); +} + +/* - 弹窗 */ +notice{ + top: 0; + left: 0; + right: 0; + z-index: 10; + padding: 1em; + position: fixed; + user-select: none; + pointer-events: none; +} + +.ks-notice{ + color: var(--primary-color); + display: table; + background: #333; + border-radius: 3em; + pointer-events: auto; + margin: 0 auto 1em auto; + box-shadow: 0 5px 5px -2px rgba(0, 0, 0, .2); + animation: fade-small-large .3s both; + -webkit-animation: fade-small-large .3s both; +} + +.ks-notice.remove{ + animation: fade-in-top .3s both reverse; + -webkit-animation: fade-in-top .3s both reverse; +} + +/* -- 弹窗颜色 */ +.ks-notice.red{ + color: var(--red-color); + background: var(--red); +} + +.ks-notice.yellow{ + color: var(--yellow-color); + background: var(--yellow); +} + +.ks-notice.blue{ + color: var(--blue-color); + background: var(--blue); +} + +.ks-notice.green{ + color: var(--green-color); + background: var(--green); +} + +.ks-notice > span{ + padding: .5em 1em; + display: table-cell; + vertical-align: middle; +} + +.ks-notice .close{ + cursor: pointer; + border-radius: 0 1em 1em 0; + transition: background .3s; +} + +.ks-notice .close:hover{ + background: rgba(0, 0, 0, .1); +} + +.ks-notice .close:after{ + content: '×'; + font: inherit; +} + +/* - 图片放大 */ +[ks-image=active]{ + cursor: pointer; + cursor: zoom-in; +} + +.ks-image{ + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 66; + position: fixed; + user-select: none; + animation: fade-in .3s both; + -webkit-animation: fade-in .3s both; +} +.ks-image.loading{ cursor: wait } +.ks-image.remove:before{ + animation: fade-off .3s both; + -webkit-animation: fade-off .3s both; +} + +.ks-image:before{ + top: 0; + left: 0; + right: 0; + bottom: 0; + content: ''; + position: absolute; + background: rgba(0, 0, 0, .6); +} + +.ks-image .ks-prev, .ks-image .ks-next{ + top: 0; + bottom: 0; + width: 10%; + height: 5em; + margin: auto; + max-width: 5em; + cursor: pointer; + position: absolute; + transition: opacity .3s, transform .3s; +} +.ks-image .ks-prev:hover{ transform: translateX(-.5em) } +.ks-image .ks-next:hover{ transform: translateX(.5em) } + +.ks-image .ks-prev{ + left: 0; + background: center/60% no-repeat url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0icmdiYSgyNTUsMjU1LDI1NSwwLjkpIj48cGF0aCBkPSJNMzI0LjIxMTUxNyA1MTEuODA1NjMxIDc4Ny44ODk1OTQgNzMuMDgyNTgzYzE2LjE5NDIyLTE2LjYzMDM2NSAxNi4xOTQyMi00My45NzQ3MDQgMC02MC42MDUwNjgtMTYuMTk0MjItMTYuNjMwMzY1LTQyLjQ5NTYwNy0xNi42MzAzNjUtNTguNjEzOTc2IDBMMjM1Ljc1MDExMyA0NzkuMzYwMzAyYy04LjY0NzAzMSA4Ljk2OTM5OC0xMi4zNDQ3NzUgMjAuOTM0OTE3LTExLjcxOTAwMyAzMi40NDUzMjktMC42NDQ3MzUgMTEuOTA4NjMgMy4wNzE5NzIgMjMuODc0MTQ5IDExLjcxOTAwMyAzMi44MjQ1ODVsNDkzLjUwNjU0MiA0NjYuODgyNzg4YzE2LjExODM2OSAxNi42NDkzMjcgNDIuNDM4NzE4IDE2LjY0OTMyNyA1OC42MTM5NzYgMCAxNi4xOTQyMi0xNy4wODU0NzEgMTYuMTk0MjItNDMuOTc0NzA0IDAtNjAuNjA1MDY4TDMyNC4yMTE1MTcgNTExLjgwNTYzMSI+PC9wYXRoPjwvc3ZnPg==); +} +.ks-image .ks-next{ + right: 0; + background: center/60% no-repeat url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjAwIDIwMCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC45KSI+PHBhdGggZD0iTTEzNi43LDEwMGwtOTAuNiw4NS44Yy0zLjIsMy4yLTMuMiw4LjUsMCwxMS44YzMuMiwzLjMsOC4zLDMuMywxMS40LDBsOTYuNC05MS4yYzEuNy0xLjcsMi40LTQuMSwyLjMtNi40YzAuMS0yLjItMC42LTQuNi0yLjMtNi4zTDU3LjYsMi40Yy0zLjEtMy4yLTguMy0zLjItMTEuNCwwcy0zLjIsOC42LDAsMTEuOEwxMzYuNywxMDAiLz48L3N2Zz4NCg==); +} + +.ks-image .ended{ + opacity: .5; + cursor: no-drop; +} + +.ks-image .ks-ball{ + top: 1em; + right: 1em; + width: 2em; + height: 2em; + opacity: 0; + border-radius: 66%; + position: absolute; + pointer-events: none; + transition: opacity .3s; + border: .5em #fff solid; + border-left-color: #3498db; + border-left-color: var(--primary); + animation: rotate .5s linear infinite paused; + -webkit-animation: rotate .5s linear infinite paused; +} +.ks-image.loading .ks-ball{ + opacity: 1; + animation-play-state: running; +} + +.ks-image img, .ks-image video{ + top: 0; + left: 0; + right: 0; + bottom: 0; + margin: auto; + max-width: 80%; + max-height: 90%; + cursor: zoom-out; + position: absolute; + transition: transform .3s; + animation: fade-small-large .3s backwards; + -webkit-animation: fade-small-large .3s backwards; +} + +.ks-image video{ + cursor: auto; +} + +.ks-image img:not([src]), .ks-image video:not([src]){ + display: none; +} + +.ks-image.remove img, .ks-image.remove video, .ks-image.remove .ks-prev, .ks-image.remove .ks-next{ + animation: fade-large-small .3s both; + -webkit-animation: fade-large-small .3s both; +} + +.ks-image img[src$=".jpg"], .ks-image video{ + box-shadow: 0 5px 15px rgba(0, 0, 0, .5); +} + +/* ---- + +Copyright (C) 2023 Dreamer-Paul. + +---- */ diff --git a/static/kico.js b/static/kico.js new file mode 100755 index 0000000..e346e0d --- /dev/null +++ b/static/kico.js @@ -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: "" + content + "", 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); \ No newline at end of file diff --git a/static/kico.svg b/static/kico.svg new file mode 100755 index 0000000..5c9a24b --- /dev/null +++ b/static/kico.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + diff --git a/static/load.gif b/static/load.gif new file mode 100755 index 0000000..23ed41e Binary files /dev/null and b/static/load.gif differ diff --git a/static/saratoga-thumb.jpg b/static/saratoga-thumb.jpg new file mode 100755 index 0000000..b939e01 Binary files /dev/null and b/static/saratoga-thumb.jpg differ diff --git a/static/saratoga.jpg b/static/saratoga.jpg new file mode 100755 index 0000000..014bdc5 Binary files /dev/null and b/static/saratoga.jpg differ diff --git a/static/test-image-1.jpg b/static/test-image-1.jpg new file mode 100644 index 0000000..5cb4738 Binary files /dev/null and b/static/test-image-1.jpg differ diff --git a/static/test-image-2.jpg b/static/test-image-2.jpg new file mode 100644 index 0000000..286a8f6 Binary files /dev/null and b/static/test-image-2.jpg differ diff --git a/view/heading.html b/view/heading.html new file mode 100755 index 0000000..7b63c6d --- /dev/null +++ b/view/heading.html @@ -0,0 +1,87 @@ + + + + + Title + + + + + +
+ 效果 + 代码 +
+
+

H1 超大标题

+

H2 大标题

+

H3 小标题

+

H4 标题

+
H5 标题
+
H6 标题
+
+
+ 
<h1>H1 超大标题</h1>
+<h2>H2 大标题</h2>
+<h3>H3 小标题</h3>
+<h4>H4 标题</h4>
+<h5>H5 标题</h5>
+<h6>H6 标题</h6>
+
+ + + + + + \ No newline at end of file diff --git a/view/types.html b/view/types.html new file mode 100755 index 0000000..763b8ce --- /dev/null +++ b/view/types.html @@ -0,0 +1,37 @@ + + + + + Types + + + +

正文文字

+

链接文字

+

提示文字

+

较小文字

+

加粗文字

+

引用文字

+

斜体文字

+

强调文字

+

加亮文字

+

含删除线文字

+

键盘符号 Ctrl + S

+
+
这是一个引用段落的测试。Kico Style 最早起源于 2016 年的“缤奇官网”项目，在保罗开发完此项目之后仍有很多的前端项目，保罗在制作过程中发现不同的项目存在很多的重复之处，因此制作了这个框架。Kico Style 仅包含常用的功能，不含其他繁杂的样式，既方便调用也无需像其他框架一样记录各种类名，让你的前端作品装逼更持久~
+
<p>正文文字</p>
+<p><a href="#">链接文字</a></p>
+<p><abbr title="Kico Style 自带的提示功能">提示文字</abbr></p>
+<p><small>较小文字</small></p>
+<p><b>加粗文字</b></p>
+<p><cite>引用文字</cite></p>
+<p><i>斜体文字</i></p>
+<p><em>强调文字</em></p>
+<p><mark>加亮文字</mark></p>
+<p><del>含删除线文字</del></p>
+<p>键盘符号 <kbd>Ctrl + S</kbd></p>
+<hr/>
+<blockquote>这是一个引用段落的测试。Kico Style 最早起源于 2016 年的“缤奇官网”项目，在保罗开发完此项目之后仍有很多的前端项目，保罗在制作过程中发现不同的项目存在很多的重复之处，因此制作了这个框架。Kico Style 仅包含常用的功能，不含其他繁杂的样式，既方便调用也无需像其他框架一样记录各种类名，让你的前端作品装逼更持久~</blockquote>
+ + + \ No newline at end of file diff --git a/wrap.html b/wrap.html new file mode 100755 index 0000000..50d75e9 --- /dev/null +++ b/wrap.html @@ -0,0 +1,285 @@ + + + + + 样式 - Kico Style + + + + + + + + + + +
+
+
+

样式

+

Kico Style 的内置样式

+
+
+

容器

+
+

全局缩放：

+

给 html 元素添加 font-auto 类，即可让全局字体实现自动缩放。

+
PS：如果你的网站样式采用 px 单位编写，则该功能将会对相应元素失效。
+
+ + + + + + + + + + + + + + + + + + + + +
分辨率效果
小于 500px 时（移动设备）基础字体大小 14px
正常分辨率基础字体大小 16px
大于 1930px 时（2K 屏幕）基础字体大小 18px
+
+
+
+

尺寸限制：

+

添加 wrap 类，即可布置一个限制尺寸的框架。

+ 
<div class="wrap min">
+  <p>我被限制了</p>
+</div>
+

wrap 也提供了多种扩展类，可以使用不同宽度的同时，也可以清除边距。

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
类名行为
wrap保留 1em 的边距，宽度限制到 1200px
wrap min保留 1em 的边距，宽度限制到 800px
wrap mid保留 1em 的边距，宽度限制到 1000px
wrap max保留 1em 的边距，宽度限制到 1400px
wrap full保留 1em 的边距，不限制宽度
+
+

当然，你也可以直接使用 CSS 变量的方式，直接修改默认的边距和宽度限制。它们分别是 --wrapper-gap 和 --wrapper-width。结合 :root 选择器就可以完成替换：

+ 
:root {
+    --wrapper-gap: 1.5em;
+    --wrapper-width: 1400px;
+}
+
+
+

保留间距：

+

框架默认保留 1.25em 的左右间距，你也可以修改成细的（0.75em）、粗的（1.5em）或者清除掉。

+
PS：如果你的页面包含栅格系统，并使用了比容器更大的间距，则会出现页面溢出的现象。可以通过 CSS 的 overflow: hidden 方法清除间距。或者干脆使得页面间距和容器间距相同即可。
+
+ + + + + + + + + + + + + + + + + + + + + +
类名行为
wrap thin边距改为 0.75em
wrap thick边距改为 1.5em
wrap clear清除边距
+
+
+
+

清除浮动：

+

部分情况下使用 float 布局方案会导致父元素塌陷，给元素添加 .clearfix 类即可清除浮动，改善塌陷的问题。

+
+
+

此元素的浮动可以被清除掉，防止布局坍塌

+
+
+
+ 查看代码： + 
<div class="clearfix">
+  <p class="float-left">此元素的浮动可以被清除掉，防止布局坍塌</p>
+</div>
+
+
+
+

设置浮动：

+

给元素添加 .float-left 和 .float-right 类，迅速设置左/右浮动，浮动可以清除元素与元素之间的微小间距。

+
+
+

我浮动到右边了

+
+
+
+ 查看代码： + 
<div class="clearfix">
+  <p class="float-right">我浮动到右边了</p>
+</div>
+
+
+
+

文字对齐：

+

给元素添加 .text-left .text-right 类，迅速设置左/右对齐方式。

+
+

居中对齐的文字

+

靠右对齐的文字

+

两侧对齐的文字，要这段文字出现换行才有效果呢

+
+
+ 查看代码： + 
<p class="text-center">居中对齐的文字</p>
+<p class="text-right">靠右对齐的文字</p>
+<p class="text-justify">两侧对齐的文字，要这段文字出现换行才有效果呢</p>
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
类名行为
text-left靠左对齐
text-right靠右对齐
text-center居中对齐
text-justify两侧对齐
+
+
+ +
+
+ + + + + + +