我是 css 的新手,我正在尝试找出一种将图例标签合并为 我页面的标题
目前我的母版页由一个字段集设置样式:
fieldset.field_set_main
{
border-bottom-width:50px;
border-top-width:100px;
border-left-width:30px;
border-right-width:30px;
margin:auto;
width:1300px;
height:700px;
padding:0px 0px 0px 0px;
border-color:Black;
border-style:outset;
display:table;
}
legend.header
{
text-align:right;
}
<fieldset class="field_set_main" >
<legend class="header">
buy for you
</legend>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</fieldset>
如果我将图例标题设置为黑色,则图例标题会显示自己的背景颜色“白色” 只有标题文本本身“为你买”变黑,它在我的边框右侧显示为一个白色框,我正在寻找一种 css 样式,使图例显示为页面的标题 (背景色与字段集的背景色相同,文本的前景色不同)。
fieldset 中是否有页脚元素,我也希望在页面底部显示标题。
- 是否有有用的 CSS 样式的好资源?特别是对于带有主字段集样式的母版页?
最佳答案
听起来您正试图将 fieldset
用作整个页面的容器,并将 legend
用作页眉。这是对这两个元素语义的误用。
如果您需要元素来包装页面以进行样式设置,我强烈建议您将标记和 CSS 更改为:
.field_set_main {
border: 30px solid black;
border-bottom-width:50px;
border-top-width:100px;
margin:auto;
width:1300px;
height:700px;
padding: 0;
display:table;
}
.header
{
text-align:right;
}
<div class="field_set_main" >
<h1 class="header">
buy for you
</h1>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
众所周知,legend
字段很难保持一致和完整的样式,所以我会避免使用它,除非它在语义上很重要,在你的情况下听起来绝对不是这样。
关于html - css 样式字段集,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7617090/