首先好好研究了百度的登陆界面,用QQ截图工具丈量好了尺寸,还将需要用到的图标都截图保存了。做好准备工作以后就开始了HTML的结构设计,然后使用CSS进行装饰。做出来的效果图如图所示:
![](https://i-blog.csdnimg.cn/blog_migrate/a675889c140e3208d87d332fc89c9c71.png)
具体的HTML结构代码如下:
<div id="login">
<div id="header">
<div id="log"></div>
<p>登陆百度账号</p>
<div id="btn"></div>
</div>
<div id="q-login">
<div id="pho"></div>
<a href="#">短信快速登陆</a>
</div>
<div id="main">
<input type="text" class="txtUserName" value="手机/邮箱/用户名"/>
<input type="password" class="txtPsw" value="密 码 "/>
<input type="text" class="check" value="验证码"/>
<div id="check-img"></div>
<a href="#">换一张</a>
<input type="button" value="登 陆" class="s-login" />
<a href="#" id="reg">立即注册</a>
</div>
<div id="other">
<p>可以使用一下方式登陆</p>
<div id="other-img"></div>
</div>
</div>
CSS代码为:
*{
margin: 0;
padding: 0;
}
#login{
width: 400px;
height: 550px;
margin: 0 auto;
border: 1px solid gainsboro;
margin-top: 50px;
}
#header{
width: 100%;
height: 50px;
background-color: rgb(247,247,247);
}
#log{
width: 30px;
height: 30px;
background: url(../img/百度图标.png) no-repeat ;
float: left;
margin: 10px 0 0 20px;
}
p{
float:left;
margin-top: 15px ;
}
#btn{
float: right;
width: 30px;
height: 30px;
background: url(../img/boxy_btn.png) no-repeat;
margin: 10px 10px 0 0;
}
#q-login{
width: 150px;
height: 40px;
margin: 15px 0 0 260px;
}
#pho{
width: 25px;
height: 25px;
background: url(../img/手机.png) no-repeat;
float: left;
}
#q-login a{
text-decoration: none;
color: #000;
}
#q-login a:hover{
color: blue;
}
#main{
clear: both;
width: 100%;
height: 325px;
margin-top: 10px;
border-bottom: 1px solid gainsboro;
}
.txtUserName{
width: 300px;
height: 45px;
background: url(../img/user.png) no-repeat 2px;
margin-left:20px ;
padding-left:40px ;
color: gainsboro;
}
.txtPsw{
width: 300px;
height: 45px;
background: url(../img/密码.png) no-repeat 10px;
margin:15px 0 0 20px;
padding-left:40px ;
color: gainsboro;
}
.check{
width: 150px;
height: 40px;
margin: 15px 20px 0px 20px;
float: left;
padding-left:40px ;
color: gainsboro;
}
#check-img{
width: 100px;
height: 40px;
background: url(../img/验证码.png) no-repeat;
float: left;
margin-top:15px ;
}
#main a{
text-decoration: none;
font: 10px;
float: left;
margin-top: 25px;
color: blue;
}
#main a:hover{
text-decoration: underline;
}
.s-login{
width: 350px;
height: 50px;
margin: 50px 0 0 20px;
background: rgb(68,144,247);
border-radius: 5px;
}
#reg{
text-decoration: none;
margin-left: 300px;
}
#other p{
font: 12px;
width: 100%;
height: 20px;
margin: 10px 0 20px 20px;
clear: left;
}
#other-img{
width: 30px;
height: 30px;
background: url(../img/QQ图标.png) no-repeat;
margin: 70px 0 0 20px;
clear: left;
}