Web前端 简单登陆页面设计 代码

HTML部分

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>登陆页面</title>
       <link rel="stylesheet"href="css/new_file.css"type="text/css"/>
   </head>
   <body>
   <div class="container">
       <div class="main">
           <div class="sideleft">
               <h1>为天地立心，为生民立命，为往圣继绝学，为万世开太平</h1>
               <h4>寄意寒星荃不察，我以我血荐轩辕。</h4>
               </br></br></br>
               <p>草原之上，雄鹰展翅。</p>
               <p>如花似朵，含苞待放。</p>
               <p>广阔天地，策马奔驰。</p>
               <p>学业有成，扬帆远航。</p>
           </div>
           <div class="sideright">
               <div class="index">
                   <form action="#" method="get">
                       <p class="headline">用户登陆</p>
                       <p class="astyle">用户名：</p>
                       <input type="text" value="">
                       <p class="astyle">密码：</p>
                       <input type="text" value="">
                       <input type="submit" value="登陆" name="login" >
                       </br>
                   </form>

               </div>
           </div>
       </div>
       <div class="footer">
               <ul>
                   <li><a href="#">厚德</a></li>
                   <li><a href="#">远志</a></li>
                   <li><a href="#">笃学</a></li>
                   <li><a href="#">创新</a></li>
                   <li><a href="#">河北北方学院</a></li>
               </ul>

       </div>

   </div>
</body>
</html>

CSS部分

*{margin: 0;padding: 0;list-style: none;}
body{
   background:url(../img/123.png) no-repeat 0 0/cover; ;
background-size: 100%;
}
.container{
   width: 1200px;
   height: 870px;
   margin: 0 auto;
}
.main{
   width:1200px;
   height: 450px;
}
.sideleft{
   width:460px;
   height: 250px;
   float: left;
   font-size: 18px;
   padding:130px 130px;
}
.sideright{
   width: 480px;
   height: 450px;
   float: right;
}
.sideright .index{
   width: 330px;
   height: 350px;
   background-color:rgba(255,255,255,0.75);
   margin: 155px 90px;
}
.headline{
   font-size: 22px;
   text-align: center;
   padding: 20px;
}
input[type="text"],
input[type="submit"]{
   -web-kit-appearance:none;
   -moz-appearance: none;
   display: block;
   margin: 0 auto;
   width: 260px;
}
input[type="text"]{
   height:35px;
   border-radius:3px;
   border:2px solid #c8cccf;
   color:#6a6f77;
   outline:0;
}
input[type="submit"]{
   margin-top: 25px;
   height: 35px;
   background: #357eb8;
   color: #bcedff;
   font-weight: bold;
   font-size: 20px;
}
.astyle{
   margin: 5px 0 5px 42px;
   font-size:22px;
   color: #6a6f77;
}
.cstyle a{
   text-decoration: none;
}
.footer{
   width: 1000px;
   margin:100px auto;
}
.footer ul{
   margin-left: 100px;
}
.footer ul li{
   float: left;
}
.footer ul li a{
   text-decoration: none;
   color: black;
   border-left: 5px solid black;
   padding:0 10px;
}