参考网页:
http://www.w3school.com.cn/h.asp
http://study.163.com/about/aboutus.htm
<----------------------------------------------------------------------------------->
(1)效果图:
(2)HTML代码
<div id="loginBox">
<div id="myBoxHeader">
<div id="myPic"></div>
</div>
<div class="myinput">
<div id="userIcon"></div>
<div class="userInput"><input id="myname"/></div>
</div>
<div class="myinput">
<div id="passwordIcon"></div>
<div class="userInput"><input id="myname"/></div>
</div>
<div class="myinput" id="myButton">
<a id="myLogin">登 录</a>
</div>
</div>
(3)CSS代码
/*登录窗的设计*/
#loginBox{
width:350px;
margin:0 auto;
padding-top:75px;
/*border:#000 thin dotted;*/
}
#myBoxHeader{
width:99%;
height:90px;
margin-bottom:10px;
background:#FFF;
}
#myPic{
width:150px;
height:90px;
background:url(username.gif) no-repeat;
}
/*用户名称输入框*/
.myinput{
width:99%;
height: 44px;
margin-bottom:8px;
background: #fff;
border: 1px solid #c5cddb;
}
#userIcon{
width: 30px;
height:40px;
float:left; /*使用float让图标和*/
background:url(icon.png) no-repeat -10px -78px;/*数组表示图片的偏移量*/
/*border:#000 thin dotted;*/
}
#passwordIcon{
width: 30px;
height:40px;
float:left; /*使用float让图标和*/
background:url(icon.png) no-repeat -55px -78px;/*数组表示图片的偏移量*/
/*border:#000 thin dotted;*/
}
.userInput{
float:left;
display:inline;
}
input{
width:270px;
border: 0;
margin-top:8px;
font-weight: bold;
font-size:24px;
}
#myButton{
background: #79b1d5;
text-align:center;
border-radius:2px;/*圆角矩形*/
}
#myLogin{
display:block;/*加了这个width和height才有用*/
width:99%;
margin-top:10px;
font-size: 20px;
/*border:#000 thin dotted;*/
}
<----------------------------------------------------------------------------------->
终于有点可以看的样子了!