客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
|
谈到 我最早知道这两个标签，是在早年学习 reset.css 或者 normalize.css 时，在这些重置统一代码默认样式的 CSS 中看到的。最近因为研究边框，遇到了这两个标签，发现它们还是很有意思的，遂起一篇，将整理的一些知识点分享给大家。 了解 通常而言，
简单而言，fieldset可以单独使用，对表单的元素进行分组，而 看个简单的例子，简单的 HTML 及结构如下：
<fieldset>
<legend>Form</legend>
<div>
<label>Name :</label><input type="text" placeholder="input Name" />
</div>
<div>
<label>Password :</label><input type="text" placeholder="input Name" />
</div>
</fieldset>
fieldset {
border: 1px solid#ddd;
padding: 12px;
}
legend {
font-size: 18px;
padding: 0 10px;
}
效果如下： CodePen Demo -- fieldset & legend Demo 比较有意思的点在于，如果给 控制 对于 对于位置，我们可以通过
fieldset {
border: 1px solid#ddd;
// padding: 12px;
}
legend {
font-size: 18px;
}
效果图： 通过改变
fieldset {
border: 1px groove #ddd;
}
legend {
animation: marginMove 10s infinite alternate;
}
@keyframes marginMove {
100% {
margin-left: 100px;
}
}
效果图： 通过控制 应用场景 -- 标题两侧横线 了解了上述基本知识后，我们就可以稍微开始深入，想一想，上述 最适合的场景我觉得应该就是标题两侧带横线的布局了。类似这样： 当然，这个布局的解决方式有很多，通常会使用伪元素来生成左右两侧的横线，或者是通过绝对定位局部进行覆盖叠加。 这里，使用
<div class="g-container">
<fieldset><legend>排行榜</legend></fieldset>
</div>
fieldset {
width: 300px;
height: 24px;
border: 1px solid transparent;
border-top-color: #000;
}
legend{
margin: auto;
padding: 0 10px;
}
CodePen Demo -- fieldset & legend Demo 2 边框嵌套文字 在这篇文章中 --How to Add Text in Borders Using Basic HTML Elements，还介绍了一种非常有意思的使用场景，在边框中嵌套文字。 想象一下，一个 伪代码如下：
<div class="g-container">
<fieldset><legend>CSS fieldset</legend></fieldset>
<fieldset><legend>HTML element</legend></fieldset>
<fieldset><legend>JavaScript</legend></fieldset>
<fieldset><legend>TypeScript</legend></fieldset>
</div>
.g-container {
position: relative;
width: 300px;
height: 300px;
}
fieldset{
position: absolute;
width: 300px;
height: 300px;
border: 10px solid transparent;
border-top-color: #000;
}
legend{
padding: 0 10px;
}
fieldset:nth-of-type(2){ transform: rotate(90deg); }
fieldset:nth-of-type(3){ transform: rotate(180deg); }
fieldset:nth-of-type(3)>legend{ transform: rotate(180deg); }
fieldset:nth-of-type(4){ transform: rotate(-90deg); }
效果图如下： 通过多个 通过给
legend{
animation: move 3s infinite linear alternate;
}
@keyframes move {
100% {
margin-left: 70px;
}
}
CodePen Demo -- Border Text Design using HTML fieldset and legend 好，基于这个，我们就可以去生成各种 N 边形边框嵌文字的边框了。下面是简单的尝试 几种多边形边框。 CodePen Demo -- fieldset and legend generate polygon 到此这篇关于生僻标签 fieldset 与 legend 的用法详解的文章就介绍到这了,更多相关fieldset 与 legend 标签内容请搜索极客世界以前的文章或继续浏览下面的相关文章，希望大家以后多多支持极客世界！ |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
六六分期app的软件客服如何联系？不知道吗？加qq群【895510560】即可！标题：六六分期
今天小编告诉大家如何处理win10系统火狐flash插件总是崩溃的问题，可能很多用户都不知
今天小编告诉大家如何对win10系统删除桌面回收站图标进行设置，可能很多用户都不知道
今天小编告诉大家如何对win10系统电脑设置节能降温的设置方法，想必大家都遇到过需要
我们在使用xp系统的过程中,经常需要对xp系统无线网络安装向导设置进行设置，可能很多
今天小编告诉大家如何处理win7系统玩cf老是与主机连接不稳定的问题，可能很多用户都不
电脑对日常生活的重要性小编就不多说了，可是一旦碰到win7系统设置cf烟雾头的问题，很
我们在日常使用电脑的时候，有的小伙伴们可能在打开应用的时候会遇见提示应用程序无法
今天小编告诉大家如何对win7系统打开vcf文件进行设置，可能很多用户都不知道怎么对win
今天小编告诉大家如何对win10系统s4开启USB调试模式进行设置，可能很多用户都不知道怎
请发表评论