一.HTML代码
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>电子邮件登录</title> 6 <link href="style.css" type="text/css" rel="stylesheet"> 7 </head> 8 <body> 9 <div class="heading"> 10 <div class="heading_middle"> 11 <img src="login_logo.png"/> 12 <a href="#">帮助</a> 13 </div> 14 </div> 15 <div class="content"> 16 <div class="content_main"> 17 <div class="loginbox"> 18 <div class="boxhead"> 19 <img src="boxhead.png"/> 20 </div> 21 <div class="boxbody"> 22 <div class="boxbody_main"> 23 用户登录 24 <table> 25 <tr> 26 <td> 27 <input type="text" placeholder="用户名"> 28 </td> 29 </tr> 30 <tr> 31 <td> 32 <input type="text" placeholder="密码"> 33 </td> 34 </tr> 35 </table> 36 <font>学生选择@stu.swpu.edu.cn</font> 37 <a href="#">忘记密码</a> 38 <br/> 39 <input type="submit" value="登 录" id="login"> 40 </div> 41 </div> 42 </div> 43 </div> 44 <div class="content_bottom"> 45 <br/> 46 <font>西南石油大学</font> 47 </div> 48 </div> 49 </body> 50 </html> 51 52 html 53 54 html
二.CSS样式
1 *{ 2 margin: 0px; 3 padding: 0px; 4 } 5 6 .heading{ 7 100%; 8 background-color: #f5f5f5; 9 height: 76px; 10 } 11 12 .heading_middle{ 13 964px; 14 margin: 0px auto; 15 } 16 17 .heading_middle img{ 18 padding-top: 10px; 19 } 20 21 .heading_middle a{ 22 float: right; 23 padding-top: 20px; 24 } 25 26 a link,a hover{ 27 text-decoration: none; 28 } 29 30 .content{ 31 964px; 32 height: 534px; 33 margin-top: 10px; 34 margin-left: auto; 35 margin-right: auto; 36 } 37 38 .content_main{ 39 100%; 40 height: 460px; 41 background-image: url("loginBg.jpg"); 42 } 43 44 .loginbox{ 45 height: 344px; 46 376px; 47 position: absolute; 48 right: 525px; 49 top: 135px; 50 left: auto; 51 background-color: white; 52 } 53 54 .content_bottom{ 55 100%; 56 height: 74px; 57 background-color: #f5f5f5; 58 text-align: center; 59 } 60 61 .boxbody{ 62 height: 299px; 63 100%; 64 } 65 .boxbody_main{ 66 80%; 67 height: 80%; 68 margin: 20px auto; 69 } 70 71 .boxbody_main table{ 72 100%; 73 height: 100px; 74 } 75 76 .boxbody_main table td{ 77 padding-top: 15px; 78 padding-bottom: 15px; 79 } 80 81 .boxbody_main table input{ 82 100%; 83 height: 30px; 84 font-size: 20px; 85 border-radius: 5px; 86 } 87 88 .boxbody_main font{ 89 color: red; 90 font-size: 14px; 91 } 92 .boxbody_main a{ 93 position: relative; 94 left: 55px; 95 } 96 a:visited,a:link{ 97 text-decoration: none; 98 color: darkgray; 99 } 100 a:hover{ 101 color: black; 102 text-decoration:underline; 103 } 104 105 #login{ 106 font-size: 18px; 107 float: right; 108 margin-top: 20px; 109 142px; 110 height: 38px; 111 color: #fff; 112 background-image: url(login_btn.jpg); 113 border-radius: 5px; 114 } 115 116 .content_bottom{ 117 color: #999; 118 font-size: 14px; 119 } 120 121 css 122 123 css
三.效果
