-
-
Save anonymous/a372d73428ce7a0954d9 to your computer and use it in GitHub Desktop.
普查系統介面設計
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
普查系統 | |
使用範例:全台學校統一編號普查 | |
資料集說明: | |
schoolname 學校名稱,從原始資料集取出 | |
schooladdress 學校地址,從原始資料集取出 | |
category 學校分類,根據資料集產生 | |
businessno 統一編號,將普查項目 | |
HeadTeacher 校長,將普查項目 | |
CorporateTitle 董事,將普查項目 | |
資料集內容是長這樣: | |
[ | |
{ | |
"schoolname" : "市立碧湖國小", | |
"schooladdress" : "臺北市內湖區內湖里金龍路100號", | |
"category" : "公立國民小學", | |
"businessno" : "", | |
"HeadTeacher" : "", | |
"CorporateTitle" : "" | |
}, { | |
"schoolname" : "市立碧華國小", | |
"schooladdress" : "新北市三重區五華街160號", | |
"category" : "公立國民小學", | |
"businessno" : "", | |
"HeadTeacher" : "", | |
"CorporateTitle" : "" | |
}, { | |
"schoolname" : "市立福山國小", | |
"schooladdress" : "高雄市左營區重愛路99號", | |
"category" : "公立國民小學", | |
"businessno" : "", | |
"HeadTeacher" : "", | |
"CorporateTitle" : "" | |
} | |
//這邊還有數千筆資料先在此省略 | |
] | |
附上HTML檔,請沒有人認領並設計成普查互動式網頁 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>資料普查系統</title> | |
<meta charset="UTF-8"> | |
<script src="jquery.min.js"></script> | |
<style type="text/css"> | |
a:link {color:#0088DD;} | |
a:visited {color:#0088DD;} | |
a:hover {color:#005580;transition-duration:.2s;} | |
a:active {color:#00DD00;} | |
input[type=input]{ | |
border:2px solid #ccc; | |
transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s; | |
-webkit-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s | |
} | |
input:focus{ | |
animation-name:myfirst; | |
animation-duration:0.5s; | |
animation-timing-function:linear; | |
animation-delay:0s; | |
animation-iteration-count:infinite; | |
animation-direction:alternate; | |
animation-play-state:running; | |
-webkit-animation-name:myfirst; | |
-webkit-animation-duration:0.5s; | |
-webkit-animation-timing-function:linear; | |
-webkit-animation-delay:0s; | |
-webkit-animation-iteration-count:infinite; | |
-webkit-animation-direction:alternate; | |
-webkit-animation-play-state:running; | |
} | |
@keyframes myfirst | |
{ | |
0% {border-color:#cccccc} | |
100% {border-color:#66afe9} | |
} | |
@-webkit-keyframes myfirst | |
{ | |
0% {border-color:#cccccc} | |
100% {border-color:#66afe9} | |
} | |
</style> | |
</head> | |
<div style="top:100px; line-height:36px;"> | |
<div style="display:table-row text-align:center;"> | |
<div style="display:table-cell;bold;">市立鳳山區忠孝國小</div> | |
<div style="display:table-cell; padding-left:50px;">高雄市鳳山區國富里新富路630號</div> | |
</div> | |
<div>統一編號: <input type="input"></input></div> | |
<div>校長: <input type="input" style="width:150px;"></input></div> | |
<div>副校長或董事(群):<input type="input" style="width:300px;"></input></div> | |
<div><input type="submit" value="送出" style="border:2px solid #CCC;"></input></div> | |
</div> | |
<div style="display:table-row"> | |
<div style="display:table-cell"><a href="http://www.google.com/search?q=%E5%B8%82%E7%AB%8B%E9%B3%B3%E5%B1%B1%E5%8D%80%E5%BF%A0%E5%AD%9D%E5%9C%8B%E5%B0%8F" target="_blank">🔍google搜尋</div> | |
<div style="display:table-cell; padding-left:50px;"><a href="http://zh.wikipedia.org/wiki/Special:%E6%90%9C%E7%B4%A2/%E5%B8%82%E7%AB%8B%E9%B3%B3%E5%B1%B1%E5%8D%80%E5%BF%A0%E5%AD%9D%E5%9C%8B%E5%B0%8F" target="_blank">🔍wikipedia搜尋</div> | |
</div> | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment