Question

我是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样式的任何好来源？特别是对于使用主字段集设置样式的母版页？

Answer 1

听起来您尝试将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字段难以一致且完整地设计，所以除非它在语义上至关重要，否则我会避免使用它，在你的情况下听起来肯定不是这样。

css样式字段集

1 个答案: