Skip to content

Commit

Permalink
1 创建设计文档 docs/hintsnet_ui_layout_design.ods ( OpenOffice 格式的电子表格)
Browse files Browse the repository at this point in the history 
  内含 index.html 中主要界面元素的尺寸、边界、留白等定义
  并且在单元格之间建立了数值联动关系，只要修改少量预设数值
  即可连带地改变所有界面元素的相关数值
2 修改 index.html 和 styles/index.css 文档，与上述文档中的尺寸求一致
  • Loading branch information
pimgeek committed Oct 29, 2018
1 parent 958d449 commit 1e709fc
Show file tree
Hide file tree
Showing 3 changed files with 113 additions and 53 deletions.
Binary file added docs/hintsnet_ui_layout_design.ods
View file
Binary file not shown.
24 changes: 17 additions & 7 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,24 @@
</head>
<body>
<!-- 主要内容框架 -->
<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 class="hyper_whiteboard">
<div class="global_view"></div>
<div class="focus_tracking_area">
<div class="left_link_cards_container">
<div class="left_link_card_1"></div>
<div class="left_link_card_2"></div>
<div class="left_link_card_3"></div>
</div>
<div class="focus_cards_container">
<div class="focus_card_1"></div>
</div>
<div class="right_link_cards_container">
<div class="right_link_card_1"></div>
<div class="right_link_card_2"></div>
<div class="right_link_card_3"></div>
</div>
</div>
<div id="ref_cards_area"></div>
<div class="ref_cards_container"></div>
</div>
<!-- 脚本引用 -->
<script src="scripts/index.js"></script>
Expand Down
142 changes: 96 additions & 46 deletions styles/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,74 +2,124 @@
* index.css
*/

// 设定元素的 width 时，把元素的边界 border 和空白填充量 padding 考虑在内
* {
/* 设定元素的 width 时，把元素的边界 border 和空白填充量 padding 考虑在内 */

div {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
display:block;
}

html,body {
margin:0 0 0 0;
background-color:gray;
background-color:rgb(180,130,80);
background-color:rgba(180,130,80,0.8);
border:1px solid transparent;
margin:0 auto;
overflow:hidden;
}

#hyper_whiteboard {
display:block;
margin:0 0 0 0;
border:1px dotted rgba(0,0,0,0);
.hyper_whiteboard {
background-color:rgb(180,130,80);
background-color:rgba(180,130,80,0.8);
border:1px solid transparent;
height:99vh;
margin:0.5vh auto 0.5vh auto;
width:99vw;
height:99vh;
}

#global_view_area {
margin:2vh auto 5vh auto;
width:40vw;
.global_view {
background-color:rgb(240,220,180);
background-color:rgba(240,220,180,0.9);
border-radius:0.5vw;
height:1vh;
display:block;
border-radius:5px;
background-color:rgba(255,255,85,0.7);
margin:2.1vh 35.5vw 0 35.5vw;
width:28vw;
}

#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);
.focus_tracking_area {
background-color:rgb(60,60,100);
background-color:rgba(60,60,100,0.9);
border-radius:0.5vw;
box-shadow:1px 1px 1px 0 rgb(70,60,50);
height:60vh;
margin:6vh 3.5vw 0 3.5vw;
width:92vw;
}

#backtracking_links {
margin:2vh 1.5vw 2vh 1.5vw;
width:12vw;
height:66vh;
.left_link_cards_container {
background-color:transparent;
border-radius:0.5vw;
float:left;
background-color:rgba(255,55,85,0.2);
height:57.33vh;
margin:1.33vh 0 0 1vw;
width:17.6vw;
}

.left_link_card_1,.left_link_card_2,.left_link_card_3 {
background-color:rgb(90,90,130);
background-color:rgba(90,90,130,0.9);
border-radius:0.5vw;
box-shadow:1px 1px 1px 1px rgb(30,40,70);
height:18.22vh;
width:17.6vw;
}

.left_link_card_2,.left_link_card_3 {
margin:1.33vh 0 0 0;
}

#current_focus_card {
margin:3vh 0 3vh 0;
width:50vw;
height:64vh;
.focus_cards_container {
background-color:transparent;
border:1 solid transparent;
border-radius:1vw;
float:left;
border-radius:5px;
background-color:rgba(255,255,85,0.4);
height:57.33vh;
margin:1.33vh 0 0 1vw;
width:52.8vw;
}

#heuristic_links {
margin:2vh 1.5vw 2vh 1.5vw;
width:12vw;
height:66vh;
.focus_card_1 {
background-color:rgb(210,210,210);
background-color:rgba(210,210,210,0.8);
border-radius:1vw;
box-shadow:1px 1px 1px 1px rgb(30,40,70);
height:57.33vh;
margin:0 0 0 0;
text-align:center;
width:52.8vw;
}

.right_link_cards_container {
background-color:transparent;
border-radius:1vw;
float:left;
background-color:rgba(255,55,85,0.2);
height:57.33vh;
margin:1.33vh 0 0 1vw;
width:17.6vw;
}

#ref_cards_area {
margin:1vh auto 2vh auto;
width:75vw;
height:16vh;
display:block;
background-color:rgba(155,255,205,0.2);
.right_link_card_1,.right_link_card_2,.right_link_card_3 {
background-color:rgb(130,140,180);
background-color:rgba(130,140,180,0.8);
border-radius:0.5vw;
box-shadow:1px 1px 1px 1px rgb(30,40,70);
height:18.22vh;
width:17.6vw;
}

.right_link_card_2,.right_link_card_3 {
margin:1.33vh 0 0 0;
}

.ref_cards_container {
background-color:rgb(200,190,170);
background-color:rgba(200,190,170,0.7);
border:1px solid rgb(135,135,135);
border-radius:0.5vw;
box-shadow:1px 1px 1px 0 rgb(70,60,50);
height:22.7vh;
margin:2.1vh 3.5vw 3vh 3.5vw;
width:92vw;
}

0 comments on commit 1e709fc

Please sign in to comment.