趁着这两天,将html和CSS基本上学了一遍，大家如果想学习的话，可以百度w3cSchool,进行学习。
基础我就不说了,直接将我做的一个登陆页面放上去。刚学完CSS,写个漂亮的登录界面恶心死我了，感觉真是没啥艺术气息。
我先展示html代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>登录</title> <link rel="stylesheet" href="login.css"/> </head> <body> <form action="www.baidu.com" method="post"> <!-- 在整幅画面中选取950px--> <div class="main"> <!-- 然后将整幅图进行分块--> <ul> <li class="top1"></li> <li class="top2"></li> <li class="topleft1"></li> <li class="topleft2"> <span> <img src="../images/hack.jpg" width="282" height="140"/> </span> </li> <li class="topleft3"> <ul class="login"> <li> <label for="username"> <span class="loginleft">用户名:</span> <span class="loginleft"> <input class="logintxt" type="text" id="username"/> </span> </label> </li> <li> <label for="pass"> <span class="loginleft">密码:</span> <span class="loginleft"> <input class="logintxt" type="text" id="pass"/> </span> </label> </li> <li> <label for="txtcode"> <span class="loginleft">验证码:</span> </label> <span style="left"> <input type="text" class="logintxtCode" id="txtcode" /> </span> <span style="left" > <img src="http://zyzfw.xidian.edu.cn/include/function/chekcode.php?43?nowtime=1457444176127" height="22"/> </span> </li> <li> <span class="loginleft">记住我:</span> <input type="checkbox" /> </li> </ul> </li> <li class="topleft4"></li> <li class="bottom1"></li> <li class="bottom2"></li> <li class="bottom3"> <span> <img src="../images/login/btnlogin.gif" class="btn"/> </span> </li> <li class="bottom4"></li> <li class="bottom5"></li> </ul> </div> </form> <div class="bottom"> <p> 版权所有 © 七夜博客 。 保留一切权利。 </p> </div> </div> </body> </html>
再将CSS展示一下:
/* CSS Document */ body { margin: 0; padding: 0; font-size: 12px; background: #214D90 url(../images/login/bg.gif) repeat-x; color: #999999; font-family: Tahoma,Verdana; } ul { list-style: none; margin: 0; padding: 0; } .main{ width:950px; margin: 0 auto; } .top1 { height: 75px; background: url(../images/login/login_01.gif) no-repeat; } .top2 { height: 94px; background: url(../images/login/login_02.gif) no-repeat; } .topleft1 { width: 155px; height: 140px; float: left; overflow: hidden; background: url(../images/login/login_03.gif) no-repeat; } .topleft2 { width: 282px; height: 140px; float: left; overflow: hidden; background: url(../images/login/login_04.gif) no-repeat; } .topleft3 { width: 345px; height: 140px; float: left; overflow: hidden; background: url(../images/login/login_06.gif) no-repeat; } .login { } .login li { line-height: 35px; height:35px; overflow:hidden; } .loginleft { line-height: 35px; vertical-align: middle; width: 50px; height:34px; text-align: right; display: -moz-inline-box; display: inline-block; padding-bottom:3px; } .logintxt { width: 215px; height: 30px; line-height: 30px; overflow: hidden; border: 0px; padding-left: 3px; color: #999999; background: url(../images/login/txt.gif) no-repeat left center; } .logintxtCode { line-height: 30px; width: 93px; height: 30px; overflow: hidden; border: 0px; padding-left: 3px; color: #999999; background: url(../images/login/code.gif) no-repeat left center; } .topleft4 { width: 158px; height: 140px; float: left; overflow: hidden; background: url(../images/login/login_07.gif) no-repeat; } .bottom1 { width: 155px; height: 94px; float: left; overflow: hidden; background: url(../images/login/login_08.gif) no-repeat; } .bottom2 { width: 309px; height: 94px; float: left; overflow: hidden; background: url(../images/login/login_09.gif) no-repeat; } .bottom3 { width: 318px; height: 94px; float: left; overflow: hidden; background: url(../images/login/login_10.gif) no-repeat; } .bottom4 { width: 158px; height: 94px; float: left; overflow: hidden; background: url(../images/login/login_11.gif) no-repeat; } .bottom5 { height: 72px; clear: both; overflow: hidden; background: url(../images/login/login_12.gif) no-repeat; } .btn { margin-left:60px; } .bottom{ position:fixed; width: 100%; margin: 0 ; text-align: center; bottom: 0; padding-bottom: 20px; background: #434343; color: #989898; }
图我就不贴了