html/css之简单登录页面

刚开始学web开发，打算将学习的过程及体会给写下来，

一方面可以加深理解，另一方面又可以方便以后的复习，何乐而不为呢。

//效果截图如下

//css代码如下

<style type="text/css">

        /*--页面属性设置*/
    body{ background-color: #FFCCFF;}
    /*oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo*/
    
    /*超链接属性设置*/
    a{ text-decoration:none; display:block; width:120px; margin:auto;}
    /*oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo*/
    
    /*登录div盒子属性设置*/
    #login_Div{ text-align:center;margin-top:10px;}
    #name_input{ border: solid #0099FF 1px; width:200px; height:20px; padding-top:5px;}
    #pass_input{ border: solid #0099FF 1px; margin-left:8px; width:200px; height:20px;padding-top:5px;}
    #login_btn{ width:100px;padding:5px; margin-left:55px; background:#339966; border:none; color:#FFFFFF; }
    #reset_btn{ width:100px;padding:5px;background:#339966; border:none; color:#FFFFFF;  }
    /*oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo*/
    
</style>

 

//html主要代码如下

<!--oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo-->
<div id="login_Div">
    <form method="post" action="#">
    
            <p>用户名:<input id="name_input" type="text"     maxlength="30"/> </p>
            <p>密码:  <input id="pass_input" type="password" maxlength="50" /></p>
            <p>
            <input id="login_btn" type="submit" value="登录" />
            <input id="reset_btn" type="reset" value="清空"/>
            </p>        
    </form>
</div><!--login_Div End-->
<!--oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo-->

<a href="#"><<<<<返回首页</a>