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; }
