由CSS控制的登录表单

最新推荐文章于 2022-11-09 23:50:23 发布

东方友诚

最新推荐文章于 2022-11-09 23:50:23 发布

阅读量736

点赞数

文章标签： css input class border html div

本文链接：https://blog.csdn.net/tpfbx/article/details/6488180

版权

<html>
<head>
    <title>form.html</title>
<style type="text/css">
*{
  margin:0;
  padding:0;
}
body{
  padding:15px;
}
#loginForm fieldset{
  padding:0 10px 10px;
  border:1px #D0D0BF solid;
}

#loginForm fieldset div{
  padding:2px;
}
#loginForm .dataArea input{
  width:150px;
  padding:2px;/*增加文本框的高度*/
  border:1px #7F9DB9 solid;
}

#loginForm .first{
  padding:12px 2px 2px;
}
#loginForm .otherArea{
  padding-left:48px;
  font-size:75%;
}
#loginForm .subArea{
  padding-left:48px;
  font-size:12px;
}
#loginForm .subArea input{
  border:1px #003C74 solid;/*这里是按钮边框明显的深蓝色边框*/
  outline:1px #F1EFEB solid;/*在深蓝色边框外面注意看时会发现还有条很淡的边，这里用
  outline来完成效果，不过outline只能四个边同时出现，并且只能是同一种样式的，勉强先顶着用。*/
  padding:1px 4px;/*这里使用padding方式来增加空白*/
}
</style>
</head>

<body>
<form id ="loginForm">
  <fieldset>
   <legend>用户登陆</legend>
   <div class="dataArea first">
    <label for="username">用户：</label>
    <input type="text" id="username" name="username" />
   </div>
   <div class="dataArea">
    <label for="password">密码：</label>
    <input type="password" name="password" id="password" />
   </div>
   <div class="otherArea">
    <input type="checkbox" id="persistent" />
    <label for="persistent">在此计算机上保存我的信息</label>
   </div>
   <div class="subArea">
    <input type="submit" value="登录" />  <input type="reset" value="重置" />
   </div>
  </fieldset>
</form>   <br><br><br>
<p><a href="register.html">注册页面</a></p>
</body>
</html>