1 增加了 html 页面基本结构代码

pimgeek · pimgeek · commit 06a36f055e14 · 2018-10-18T19:02:51.000+08:00
2 增加了 css 样式表，美化页面元素
3 增加了空白的 javascript 代码
diff --git a/index.html b/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<!-- 元信息 -->
+		<meta charset="UTF-8" />
+		<title>引思网卡片库用户界面（Hintsnet UI）</title>
+	</head>
+	<body>
+		<!-- 脚本引用 -->
+		<script src="scripts/index.js"></script>
+		<!-- 主要内容框架 -->
+		<div id="hyper_whiteboard">
+			<div id="global_view_area"></div>
+			<div id="focus_tracking_area">
+				<div id="backtracking_links"></div>
+				<div id="current_focus_card"></div>
+				<div id="heuristic_links"></div>
+			</div>
+			<div id="ref_cards_area"></div>
+		</div>
+		<!-- 样式表引用 -->
+		<link rel="stylesheet" href="styles/index.css">
+	</body>
+</html>
diff --git a/scripts/index.js b/scripts/index.js
@@ -0,0 +1,5 @@
+/*
+ * index.js
+ */
+
+	console.log("JavaScript is amazing!");
diff --git a/styles/index.css b/styles/index.css
@@ -0,0 +1,75 @@
+/**
+ * index.css
+ */
+
+// 设定元素的 width 时，把元素的边界 border 和空白填充量 padding 考虑在内
+* {
+	-webkit-box-sizing:border-box;
+		 -moz-box-sizing:border-box;
+					box-sizing:border-box;
+}
+
+html,body {
+  margin:0 0 0 0;
+  background-color:gray;
+}
+
+#hyper_whiteboard {
+	display:block;
+	margin:0 0 0 0;
+	border:1px dotted rgba(0,0,0,0);
+	width:99vw;
+  height:99vh;
+}
+
+#global_view_area {
+	margin:2vh auto 5vh auto;
+	width:40vw;
+	height:1vh;
+	display:block;
+	border-radius:5px;
+	background-color:rgba(255,255,85,0.7);
+}
+
+#focus_tracking_area {
+	margin:5vh auto 2vh auto;
+	width:80vw;
+	height:70vh;
+	display:block;
+	border-radius:5px;
+	background-color:rgba(255,255,85,0.5);
+}
+
+#backtracking_links {
+	margin:2vh 1.5vw 2vh 1.5vw;
+	width:12vw;
+	height:66vh;
+	float:left;
+	background-color:rgba(255,55,85,0.2);
+}
+
+#current_focus_card {
+	margin:3vh 0 3vh 0;
+	width:50vw;
+	height:64vh;
+	float:left;
+	border-radius:5px;
+	background-color:rgba(255,255,85,0.4);
+}
+
+#heuristic_links {
+	margin:2vh 1.5vw 2vh 1.5vw;
+	width:12vw;
+	height:66vh;
+	float:left;
+	background-color:rgba(255,55,85,0.2);
+}
+
+#ref_cards_area {
+	margin:1vh auto 2vh auto;
+	width:75vw;
+	height:16vh;
+	display:block;
+	background-color:rgba(155,255,205,0.2);
+}
+

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +/*
 + * index.js
 + */
++
 +	console.log("JavaScript is amazing!");