oscxc-atcui
/
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>atcui</title>

    <!--atcui-->
    <link rel="stylesheet" href="atcui.css">

    <!--highlight.js-->
    <link rel="stylesheet" href="highlight/styles/aa1.css">
    <script src="highlight/highlight.js"></script>
    <script>hljs.initHighlightingOnLoad();</script>

    <style>
        .atc-panel{
            height: 5000px;/*文章页面高度*/
        }
    </style>
</head>
<body>
<div class="atc-root">
    <div class="atc-panel">
        <div class="atc-title">使用 atcUI 编辑您的文章 </div>
        <div class="atc-p">
            atcUI 适用于对文章有更高要求的写作者，直接写页面的方式，自由运用html+css+js，要比富文本框、Markdown编辑器灵活得多。
            atcUI 仅仅提供了一套简单的样式和插件，从此编辑效率就不再是问题，它使用特殊命名的class选择器，这样就很难与你自定义的css冲突。
            用它写文章，绝大部分您只需要复制、粘贴，特殊地方您也可以自由发挥。atcUI 可以用来：
        </div>
        <ul class="atc-list">
            <li>撰写发布技术文档</li>
            <li>写日记、游记</li>
            <li>整理知识、笔记、心得</li>
            <li>发布日程安排与计划等等</li>
        </ul>
        <div class="atc-p">本文是使用 atcUI 并为之写的文档，它包含在 atcUI 的项目中，您可以通过下面的链接获取 atcUI。</div>
        <div class="atc-p">atcUI 项目地址: <a href="https://git.oschina.net/oscxc/atcui" class="atc-link">https://git.oschina.net/oscxc/atcui</a></div>
        <div class="atc-blank"></div>
        <div class="atc-subtitle">atcUI 提供了哪些内容</div>
        <div class="atc-subtitle2">1. 文章标题、多级子标题</div>
        <div class="atc-title">文章标题</div>
        <div class="atc-subtitle">子标题一</div>
        <div class="atc-subtitle2">子标题二</div>
        <div class="atc-subtitle2">2. 写一个段落</div>
        <div class="atc-p">
            夏天来了，爱尔莎特别爱到河里洗澡，一洗就是几个钟头，洗够了就到茂密的芦苇丛中去休息。它看见我蹲在河边，故意扑腾起浪花，还用前爪轻轻地把我扑倒在地上，十分高兴和我开玩笑。
        </div>
        <div class="atc-subtitle2">3. 显示一张图片</div>
        <img class="atc-img" src="Images/girl.jpg">
        <div class="atc-subtitle2">4. 重点文字突出</div>
        <div class="atc-p">
            <div>win10 系统常用快捷键:</div>
            <div>打开任务视图:<span class="kw1">Win+Tab</span></div>
            <div>创建新的虚拟桌面:<span class="kw2">Win+Ctrl+D</span></div>
            <div>关闭当前虚拟桌面:<span class="kw3">Win+Ctrl+F4</span></div>
            <div>切换虚拟桌面:<span class="kw4">Win+Ctrl+←/→</span></div>
            <div>开始菜单切换:<span class="kw5">Win</span></div>
            <div>打开运行:<span class="kw6">Win+R</span></div>
            <div>打开小娜:<span class="kw7">Win+Q</span></div>
            <div>打开设置:<span class="kw8">Win+I</span></div>
            <div>任务管理器:<span class="kw9">Ctrl+Alt+Del</span></div>
            <div>最大化窗口:<span class="kw1">Win+↑</span></div>
            <div>最小化窗口:<span class="kw2">Win+↓</span></div>
            <div>垂直拉伸窗口:<span class="kw3">Win+Shift+↑</span></div>
            <div>显示桌面切换:<span class="kw4">Win+D</span></div>
            <div>文件资源管理器:<span class="kw5">Win+E</span></div>
            <div>锁屏:<span class="kw6">Win+L</span></div>
            <div>最小化所有窗口:<span class="kw7">Win+M</span></div>
            <div>恢复最小化的窗口:<span class="kw8">Win+Shift+M</span></div>
            <div>放大镜:<span class="kw9">Win+-/+</span></div>
            <div>关闭放大镜:<span class="kw1">Win+Esc</span></div>
            <div>编辑器或页面翻页:<span class="kw2">PageUp/PageDown</span></div>
            <div>开始菜单右键:<span class="kw3">Win+X</span></div>
        </div>
        <div class="atc-subtitle2">5. 文本框</div>
        <div class="atc-p"><input class="atc-text" placeholder="第一种文本框"></div>
        <div class="atc-p"><input class="atc-text2" placeholder="第二种文本框"></div>
        <div class="atc-subtitle2">7. 显示一个列表 ul ol</div>
        <ul class="atc-list">
            <li>无序列表项 1</li>
            <li>无序列表项 2</li>
            <li>无序列表项 3</li>
        </ul>
        <ol class="atc-list">
            <li>有序列表项 1</li>
            <li>有序列表项 2</li>
            <li>有序列表项 3</li>
        </ol>
        <div class="atc-p">还可以这样</div>
        <div class="atc-one">
            夏天来了，爱尔莎特别爱到河里洗澡，一洗就是几个钟头，洗够了就到茂密的芦苇丛中去休息。
        </div>
        <div class="atc-subtitle2">8. 高亮一段代码</div>
        <div class="atc-code">
            <pre><code class="hljs javascript">
this.then = function (onFulfilled,onRejected) {
    return new Promise(function (resolve, reject) {
        switch (state){
            case "pending":
                callbacks.push([
                    function () {
                        resolve(onFulfilled(result));
                    },
                    function () {
                        reject(onRejected(result));
                    }
                ]);
                break;
            case "fulfilled":
                resolve(onFulfilled(result));
                break;
            case "rejected":
                reject(onRejected(result));
                break;
        }
    });
};
        </code></pre>
        </div>
        <div class="atc-subtitle2">9. 绘制一个表格</div>
        <table class="atc-table" border="1">
            <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Sex</th>
                <th>Age</th>
                <th>Mobile</th>
                <th>Birth</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>1</td>
                <td>东方不败</td>
                <td>男</td>
                <td>24</td>
                <td>15123654789</td>
                <td>1975-11-04</td>
            </tr>
            <tr>
                <td>2</td>
                <td>芊芊</td>
                <td>女</td>
                <td>34</td>
                <td>15123662734</td>
                <td>1982-03-14</td>
            </tr>
            <tr>
                <td>3</td>
                <td>吸毒欧阳锋</td>
                <td>男</td>
                <td>21</td>
                <td>15937462521</td>
                <td>1988-11-27</td>
            </tr>
            </tbody>
            <tfoot>
            <tr>
                <td colspan="6">欢迎再次光临</td>
            </tr>
            </tfoot>
        </table>
        <div class="atc-subtitle2">10. 添加一个链接</div>
        <div class="atc-p">atcUI 项目地址: <a href="https://git.oschina.net/oscxc/atcui" class="atc-link">https://git.oschina.net/oscxc/atcui</a></div>
        <div class="atc-subtitle2">11. 未完待续</div>
        <div class="atc-p">
            我 atcUI 的成长 永无止境 !
        </div>
        <div class="atc-blank"></div>
        <div class="atc-subtitle">如何使用 atcUI </div>
        <div class="atc-one">
            这个问题太简单了，本页面就是最好的demo...
        </div>
    </div>
</div>
</body>
</html>