效果預覽：http://hovertree.com/texiao/css/22/
程式碼如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="http://hovertree.com/texiao/css/22/css/hovertree_login.css" /> <title>綠色簡單的學校管理系統登入頁面html模板 _ 何問起</title><base target="_blank" /> </head> <body> <div id="header"> <div class="header_title"> <span class="title_con">何問起學工系統</span> </div> </div> <div id="content"> <center> <div class="con"> <div class="con_title"> <span class="con_title_sp">歡迎登入學工系統</span> </div> <div class="con_panel"> <div class="con_input"> <span>使用者名稱：</span><input type="text" placeholder="學號/工號"/> </div> <div class="con_input"> <span>密 碼：</span><input type="text" placeholder="密碼"/> </div> <div class="con_select"> <input type="radio" name="t1" id="hovertreestu" value="學生" /><label for="hovertreestu">學生</label> <input type="radio" name="t1" id="hovertreetea" value="教師" /><label for="hovertreetea">教師</label> <input type="radio" name="t1" id="hovertreeadm" value="管理員" /><label for="hovertreeadm">管理員</label> </div> <input type="submit" value="登 錄" class="submit-btn"/> </div> </div> </center> </div> <div id="footer"> © 市重點高中 技術支援：<a href="http://hovertree.com/">何問起</a> <br /><a href="http://hovertree.com/h/bjaf/7ioeyqhe.htm">Demo 1</a> <a href="http://hovertree.com/hvtart/bjae/dh4pqx2p.htm">Demo 2</a> <a href="http://hovertree.com/h/bjaf/2hhi6cjy.htm">原文</a><a href="http://hovertree.com/texiao/">更多特效</a> </div> </body> </html>
原始碼下載：http://hovertree.com/h/bjaf/l243x19a.htm