Question

我正在使用Foundation 5作为框架构建Web应用程序。我有一个页面，其中包含注释和更新部分，由选项卡导航并包含在面板中。

我成功地在包含更新和评论的标签内容面板中添加了一个框阴影，但现在两边都有边距，空白区域不会与页面其余部分的样式混合。

我使用了inspect元素，看看边距属于哪个元素，它们也是内容面板本身的一部分。我将如何更改背景以使边距与页面的其余部分以及标签和＆amp;内容是白色的，带有框阴影？

选项卡和随附面板的html如下：

<div id ="tabs">
<ul class="tabs" data-tab role="tablist">
<li class="tab-title active" role="presentational" ><a href="#panel2-1"       role="tab" tabindex="0" aria-selected="true" controls="panel2-1">Updates</a></li>
<li class="tab-title" role="presentational" ><a href="#panel2-2" role="tab" tabindex="0"aria-selected="false" controls="panel2-2">Comments</a></li>
</ul>
</div>

<div class="tabs-content">
<section role="tabpanel" aria-hidden="false" class="content active"  id="panel2-1">

我使用以下css在面板和标签周围制作盒子阴影：

section#panel2-1.content.active {
box-shadow: 1px 1px 5px 0px;
-webkit-box-shadow: 1px 1px 5px 0px;
margin-left: 50px;
width: 1050px;

}

section#panel2-2.content.active {
box-shadow: 1px 1px 5px 0px;
-webkit-box-shadow: 1px 1px 5px 0px;
margin-left: 50px;
width: 1050px;

}

我尝试在标签和内容面板周围添加div，以便我可以更改背景颜色，但它没有效果。

有谁知道我会怎么做呢？

谢谢，

马蒂

Answer 1

您是否尝试过使用这些Sass变量来覆盖默认样式？

$include-html-tabs-classes: $include-html-classes;

$tabs-navigation-padding: rem-calc(16);
$tabs-navigation-bg-color: $silver;
$tabs-navigation-active-bg-color: $white;
$tabs-navigation-hover-bg-color: scale-color($tabs-navigation-bg-color, $lightness: -6%);
$tabs-navigation-font-color: $jet;
$tabs-navigation-active-font-color: $tabs-navigation-font-color;
$tabs-navigation-font-size: rem-calc(16);
$tabs-navigation-font-family: $body-font-family;

$tabs-content-margin-bottom: rem-calc(24);
$tabs-content-padding: $column-gutter/2;

$tabs-vertical-navigation-margin-bottom: 1.25rem;

基础5：更改选项卡背后的容器颜色＆amp;标签内容面板

1 个答案: