登录界面

一.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

View Code

二.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

View Code

三.效果

相关阅读:
EasyUI--messager
EasyUI--初学
 框架错误汇总
 OGNL调用静态方法和属性
 查询内容在网页里面分页显示+跳页查看
 struts2——通配符
 JavaScript 输出
 JavaScript语法（一）
Struts+Hibernate+jsp页面实现分页
 elasticsearch-5.x JAVA API（001）
原文地址：https://www.cnblogs.com/lyq-biu/p/10608487.html