腾讯课堂小白训练——仿百度登陆页面



首先好好研究了百度的登陆界面，用QQ截图工具丈量好了尺寸，还将需要用到的图标都截图保存了。做好准备工作以后就开始了HTML的结构设计，然后使用CSS进行装饰。做出来的效果图如图所示：

具体的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;
}