怎么新建MySQL数据库
发布时间：2022-09-24
作者：admin
阅读：934
阅读：934
这篇文章主要讲解了“HTML fieldset标签的使用方法是什么，如何用于登录页面”，文中的讲解内容简单、清晰、详细，对大家学习或是工作可能会有一定的帮助，希望大家阅读完这篇文章能有所收获。下面就请大家跟着小编的思路一起来学习一下吧。
HTML CSS fieldset标签是一个不太常用的表单元素分组标签，其中<legend> 标签为 <fieldset> 元素定义标题，下面是一个简单的HTML fieldset标签使用示例：
现在大家对于HTML fieldset标签的使用方法是什么，如何用于登录页面的内容应该都有一定的认识了吧，希望这篇能对大家有所帮助。最后，想要了解更多，欢迎关注群英网络，群英网络将为大家推送更多相关的文章。
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登录面板设计，运行效果如图所示：
现在大家对于HTML fieldset标签的使用方法是什么，如何用于登录页面的内容应该都有一定的认识了吧，希望这篇能对大家有所帮助。最后，想要了解更多，欢迎关注群英网络，群英网络将为大家推送更多相关的文章。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。
相关阅读
长按识别二维码并关注微信
更方便到期提醒、手机管理