CSS login登录面板页面设计|CSS fieldset使用_太平洋学习网|一个最全的javaweb,js,css,html5,csdn,android,linux的学习网站。

HTML CSS fieldset标签是一个不太常用的表单元素分组标签，其中<legend> 标签为 <fieldset> 元素定义标题，下面是一个简单的HTML fieldset标签使用示例：

<form>
  <fieldset>
    <legend>Personalia:</legend>
    Name: <input type="text"><br>
    Email: <input type="text"><br>
    Date of birth: <input type="text">
  </fieldset></form>

运行效果如图：

下面是一个比较复杂的fieldset标签使用示例，CSS login登录面板页面设计：

fieldset {
   border:none;
   margin:0;
}

input {
   border:none;
   font-family:inherit;
   font-size:inherit;
   margin:0;
   -webkit-appearance:none;
}

input:focus {
   outline:none;
}

input[type="submit"] {
   cursor:pointer;
}

#login-form {
   margin:10px;
   width:300px;
   border:1px solid #ea6e10;
   vertical-align:middle;
   border-radius:0px;
}

#login-form h3 {
   background-color:#ea6e10;
   color:#fff;
   font-size:14px;
   margin-top:0;
   padding:20px;
   text-align:right;
}

#login-form fieldset {
   background:#fff;
   border:1px #ea6e10;
   padding:20px;
   position:relative;
}

#login-form input {
   font-size:14px;
}

#login-form input[type="username"],
#login-form input[type="password"] {
   background:#dcdcdc;
   padding:12px 10px;
   width:100%;
   margin-top:5px;
}

#login-form input[type="username"] {
}
#login-form input[type="password"] {
   border-radius:0px 0px 3px 3px;
}

#login-form input[type="submit"] {
   background:#ea6e10;
   text-align:center;
   color:#fff;
   float:left;
   font-weight:bold;
   margin-top:5px;
   padding:12px 20px;
   width:100%;
}

#login-form input[type="submit"]:hover {
   background:#ea6e10;
}

.bubble
 {
   position:relative;
   width:250px;
   padding:0px;
   background:#FFFFFF;
   -webkit-border-radius:10px;
   -moz-border-radius:10px;
   border-radius:10px;
   border:#ea6e10 solid 2px;
}

.bubble:after
 {
   content:'';
   position:absolute;
   border-style:solid;
   border-width:15px 15px 0;
   border-color:#FFFFFF transparent;
   display:block;
   width:0;
   z-index:1;
   bottom:-15px;
   left:136px;
}

.bubble:before
 {
   content:'';
   position:absolute;
   border-style:solid;
   border-width:16px 16px 0;
   border-color:#ea6e10 transparent;
   display:block;
   width:0;
   z-index:0;
   bottom:-17px;
   left:135px;
}

html登录面板代码：

<body> 
 <div id="login-form" class="bubble" style="float:left;"> 
  <h3>Login</h3> 
  <fieldset> 
   <input type="username" required value="username" onBlur="if(this.value=='')this.value='username'" onFocus="if(this.value=='username')this.value='' "> 
   <!-- JS because of IE support; better: placeholder="username" --> 
   <input type="password" required value="Password" onBlur="if(this.value=='')this.value='Password'" onFocus="if(this.value=='Password')this.value='' "> 
   <!-- JS because of IE support; better: placeholder="Password" --> 
   <p><a href="#">Forgot Password?</a></p> 
   <input type="submit" value="Login">  
  </fieldset> 
 </div>   
</body>

CSS login登录面板设计，运行效果如图所示：