Initral
This commit is contained in:
commit
84705ca02b
|
@ -0,0 +1,14 @@
|
||||||
|
mdui-card {
|
||||||
|
margin: 3px;
|
||||||
|
width: calc(25% - 6px);
|
||||||
|
height: 8em;
|
||||||
|
}
|
||||||
|
|
||||||
|
mdui-card h1 {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0.2em 0.2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
mdui-layout-main {
|
||||||
|
display: flex;
|
||||||
|
}
|
|
@ -0,0 +1,75 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta
|
||||||
|
name="viewport"
|
||||||
|
content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no"
|
||||||
|
/>
|
||||||
|
<meta name="renderer" content="webkit" />
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/mdui@2/mdui.css" />
|
||||||
|
<script src="https://unpkg.com/mdui@2/mdui.global.js"></script>
|
||||||
|
|
||||||
|
<link
|
||||||
|
href="https://fonts.googleapis.com/icon?family=Material+Icons"
|
||||||
|
rel="stylesheet"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<link href="index.css" rel="stylesheet" />
|
||||||
|
|
||||||
|
<title>Study Area CN Learn</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<mdui-layout>
|
||||||
|
<mdui-navigation-drawer>
|
||||||
|
<mdui-list-item
|
||||||
|
end-icon="arrow_right"
|
||||||
|
href="https://learn.study-area.org.cn"
|
||||||
|
>开始学习</mdui-list-item
|
||||||
|
>
|
||||||
|
<mdui-list-item
|
||||||
|
end-icon="arrow_right"
|
||||||
|
href="https://forum.study-area.org.cn"
|
||||||
|
>讨论区</mdui-list-item
|
||||||
|
>
|
||||||
|
<mdui-list-item
|
||||||
|
end-icon="arrow_right"
|
||||||
|
href="https://git.hmtsai.cn/study-area-cn/learn-homepage"
|
||||||
|
>查看本站源码</mdui-list-item
|
||||||
|
>
|
||||||
|
</mdui-navigation-drawer>
|
||||||
|
|
||||||
|
<mdui-top-app-bar style="position: relative">
|
||||||
|
<mdui-button-icon icon="menu"></mdui-button-icon>
|
||||||
|
<mdui-top-app-bar-title>Study Area CN Learn</mdui-top-app-bar-title>
|
||||||
|
</mdui-top-app-bar>
|
||||||
|
|
||||||
|
<mdui-layout-main class="example-layout-main" style="min-height: 300px">
|
||||||
|
<mdui-card
|
||||||
|
href="https://learn.study-area.org.cn/computer/"
|
||||||
|
clickable
|
||||||
|
class="card"
|
||||||
|
>
|
||||||
|
<h1>学习电脑</h1>
|
||||||
|
</mdui-card>
|
||||||
|
<mdui-card
|
||||||
|
href="https://learn.study-area.org.cn/linux-basic/"
|
||||||
|
clickable
|
||||||
|
class="card"
|
||||||
|
>
|
||||||
|
<h1>学习 Linux 基础</h1>
|
||||||
|
</mdui-card>
|
||||||
|
</mdui-layout-main>
|
||||||
|
</mdui-layout>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
document
|
||||||
|
.querySelector("mdui-button-icon")
|
||||||
|
.addEventListener("click", () => {
|
||||||
|
document.querySelector("mdui-navigation-drawer").open =
|
||||||
|
!document.querySelector("mdui-navigation-drawer").open;
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
Loading…
Reference in New Issue