9-6 精美工具列

來源：http://www.bsjh.tc.edu.tw/index.php

css效果來源：http://ianlunn.github.io/Hover/

圖示網站：https://www.flaticon.com/

<link href="http://www.bsjh.tc.edu.tw/modules/rafaeltools/css/hover-min.css" rel="stylesheet"> 
<style>
#freq-link  ul {
margin-left:0;
padding: 0;
border-radius: 0px;
overflow: hidden;
margin-bottom:10px;
}
#freq-link ul  li{
margin-left:0px;
padding: 0;
display: inline-block;
list-style: none;
}
#freq-link ul  li img {
margin: 0;
padding: 10px;
width: 70px;
height: 70px;
align:center;
}
#freq-link a {
margin: 0;
padding: 0;
font-size: 12px;
display: block;
text-align: center;
transition: 0.5s; 
}
#freq-link a:hover {
}
#freq-link a p {
margin-top:0;
padding:0;
}
</style>
<div id="freq-link">
<ul>
<li><a href="http://mail.google.com/a/bsjh.tc.edu.tw/" target="_blank"><img src="http://www.bsjh.tc.edu.tw/images/link/gmail.png" alt="gmail信箱" class="hvr-float-shadow"><p>Gmail信箱</p></a></li>
<li><a href="http://sfs.bsjh.tc.edu.tw/sfs3/" target="_blank"><img src="http://www.bsjh.tc.edu.tw/images/link/sfs.png" alt="學務系統" class="hvr-float-shadow"><p>學務系統</p></a></li>
<li><a href="http://sfs.bsjh.tc.edu.tw/sfs3/modules/new_course/" target="_blank"><img src="http://www.bsjh.tc.edu.tw/images/link/agenda.png" alt="課表查詢" class="hvr-float-shadow"><p>課表查詢</p></a></li>
<li><a href="http://www.bsjh.tc.edu.tw/modules/tad_uploader/" target="_blank"><img src="http://www.bsjh.tc.edu.tw/images/link/download.png" alt="文件下載" class="hvr-float-shadow"><p>文件下載</p></a></li>
<li><a href="http://www.bsjh.tc.edu.tw/modules/tadgallery/"><img src="http://www.bsjh.tc.edu.tw/images/link/gallery.png" alt="活動花絮" class="hvr-float-shadow"><p>活動花絮</p></a></li>
<li><a href="http://web.bsjh.tc.edu.tw/moodle/" target="_blank"><img src="http://www.bsjh.tc.edu.tw/images/link/idea.png" alt="線上學習" class="hvr-float-shadow"><p>線上學習</p></a></li>
<li><a href="http://www.bsjh.tc.edu.tw/modules/jill_booking/index.php?jbi_sn=1" "target="_blank"><img src="http://www.bsjh.tc.edu.tw/images/link/projector.png" alt="設備預約" class="hvr-float-shadow"><p>設備預約</p></a></li>
<li><a href="http://www.bsjh.tc.edu.tw/modules/tad_repair/" "="" target="_blank"><img src="http://www.bsjh.tc.edu.tw/images/link/maintenance.png" alt="維修通報" class="hvr-float-shadow"><p>維修通報</p></a></li>
<li><a href="http://www.bsjh.tc.edu.tw/modules/tad_web/"><img src="http://www.bsjh.tc.edu.tw/images/link/earth.png" alt="多人網頁" class="hvr-float-shadow"><p>多人網頁</p></a></li>
<li><a href="http://www.tc.edu.tw/" target="_blank"><img src="http://www.bsjh.tc.edu.tw/images/link/tclogo.png" alt="中市教網" class="hvr-float-shadow"><p>中市教網</p></a></li>
<li><a href="http://odisedu.taichung.gov.tw/" target="_blank"><img src="http://www.bsjh.tc.edu.tw/images/link/folder-9.png" alt="公文系統" class="hvr-float-shadow"><p>公文系統</p></a></li>
</ul>
</div>