您的位置：首页 > Web前端 > CSS

html/css之简单登录页面

2012-11-06 21:56 591 查看

刚开始学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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航