最新消息:关注【太平洋学习网】微信公众号,可以获取全套资料,【全套Java基础27天】【JavaEE就业视频4个月】【Android就业视频4个月】

CSS login登录面板页面设计|CSS fieldset使用

JS/CSS 太平洋学习网 浏览 评论

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>

运行效果如图:

image.png

下面是一个比较复杂的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登录面板设计,运行效果如图所示:

image.png

来源网站:太平洋学习网,转载请注明出处:http://www.tpyyes.com/a/js_css/1201.html
"文章很值,打赏犒劳作者一下"
微信号: Javaweb_engineer

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

与本文相关的文章

发表我的评论
取消评论

表情

您的回复是我们的动力!

  • 昵称 (必填)

网友最新评论