我的网页搭建中篇03——网页登录框01

参考网页：

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;*/

}

<----------------------------------------------------------------------------------->

终于有点可以看的样子了！