登陆界面
界面展示:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>电子邮件登录</title> <link href="style.css" type="text/css" rel="stylesheet"> </head> <body> <div class="heading"> <div class="heading_middle"> <img src="login_logo.png"/> <a href="#">帮助</a> </div> </div> <div class="content"> <div class="content_main"> <div class="loginbox"> <div class="boxhead"> <img src="boxhead.png"/> </div> <div class="boxbody"> <div class="boxbody_main"> 用户登录 <table> <tr> <td> <input type="text" placeholder="用户名"> </td> </tr> <tr> <td> <input type="text" placeholder="密码"> </td> </tr> </table> <font>学生选择@stu.swpu.edu.cn</font> <a href="#">忘记密码</a> <br/> <input type="submit" value="登 录" id="login"> </div> </div> </div> </div> <div class="content_bottom"> <br/> <font>西南石油大学</font> </div> </div> </body> </html> html html
*{ margin: 0px; padding: 0px; } .heading{ width: 100%; background-color: #f5f5f5; height: 76px; } .heading_middle{ width: 964px; margin: 0px auto; } .heading_middle img{ padding-top: 10px; } .heading_middle a{ float: right; padding-top: 20px; } a link,a hover{ text-decoration: none; } .content{ width: 964px; height: 534px; margin-top: 10px; margin-left: auto; margin-right: auto; } .content_main{ width: 100%; height: 460px; background-image: url("loginBg.jpg"); } .loginbox{ height: 344px; width: 376px; position: absolute; right: 525px; top: 135px; left: auto; background-color: white; } .content_bottom{ width: 100%; height: 74px; background-color: #f5f5f5; text-align: center; } .boxbody{ height: 299px; width: 100%; } .boxbody_main{ width: 80%; height: 80%; margin: 20px auto; } .boxbody_main table{ width: 100%; height: 100px; } .boxbody_main table td{ padding-top: 15px; padding-bottom: 15px; } .boxbody_main table input{ width: 100%; height: 30px; font-size: 20px; border-radius: 5px; } .boxbody_main font{ color: red; font-size: 14px; } .boxbody_main a{ position: relative; left: 55px; } a:visited,a:link{ text-decoration: none; color: darkgray; } a:hover{ color: black; text-decoration:underline; } #login{ font-size: 18px; float: right; margin-top: 20px; width: 142px; height: 38px; color: #fff; background-image: url(login_btn.jpg); border-radius: 5px; } .content_bottom{ color: #999; font-size: 14px; } css css