效果预览：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