Score
0
Watch 13 Star 31 Fork 8

七八个星天怪 / atcuiCSSMIT

Join us
Explore and code with more than 2 million developers,Free private repositories !:)
Sign up
一套用于写文章的美观的UI,适合熟悉web前端的高端写作者。 spread retract

Clone or download
index.html 9.56 KB
Copy Edit Web IDE Raw Blame History
七八个星天怪 authored 2017-12-02 20:56 . 修改小错误
<!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>
<!--字体图标-->
<link rel="stylesheet" href="ionicons/css/ionicons.min.css">
<!--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;/*文章页面高度*/
}
.atc-icon{
font-size: 30px;/*字体图标文字大小*/
}
</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">下面漂亮的 Logo 专为 atcUI 设计,您也可以使用它为您的文章添光溢彩。</div>
<img class="atc-img" src="Images/logo.png">
<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">6. 使用字体图标</div>
<div class="atc-p">
atcUI 推荐使用 <a href="http://www.ionic-china.com/ionicons/index.html" class="atc-link">ionicons</a>字体图标:
</div>
<div class="atc-p">
<span class="atc-icon ion-arrow-up-a"></span>
<span class="atc-icon ion-arrow-swap"></span>
<span class="atc-icon ion-checkmark-round"></span>
<span class="atc-icon ion-shuffle"></span>
<span class="atc-icon ion-edit"></span>
<span class="atc-icon ion-trash-a"></span>
<span class="atc-icon ion-document-text"></span>
<span class="atc-icon ion-share"></span>
<span class="atc-icon ion-music-note"></span>
<span class="atc-icon ion-arrow-graph-up-right"></span>
</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 class="atc-blank"></div>
<div class="atc-subtitle">atcUI 社区</div>
<div class="atc-p">
如有问题,您可以加入下面QQ群与我们交流,欢迎提出宝贵意见,帮助我们完善 atcUI。
</div>
<img class="atc-img" src="Images/contact.jpg">
<div class="atc-blank"></div>
<footer class="atc-footer">
@2017&nbsp;&nbsp;atcUI&nbsp;&nbsp;七八个星天怪
</footer>
</div>
</div>
</body>
</html>

Comment ( 0 )

Sign in for post a comment

CSS
1
https://gitee.com/oscxc/atcui.git
git@gitee.com:oscxc/atcui.git
oscxc
atcui
atcui
master

Help Search