Question

我试图在页面顶部放置一个橙色条。为什么不显示颜色？顶部栏的高度应为34像素。

这是我的傻瓜：http://jsfiddle.net/huskydawgs/z9j9rsz2/19/

这是我的代码：

<div class="topbar">
</div>

<div class="wrapper-data">
    <div class="data_row">
        <div class="data_cell1_rt-20-80"><img alt="Seattle" src="http://www.alltooflat.com/pranks/myths/penny/spaceneedle_big_3.jpg" height="150" width="144"></div>

        <div class="data_cell2_rt-20-80">&nbsp;</div>

        <div class="data_cell3_rt-20-80">
            <p>
                Seattle a coastal seaport city and the seat of King County, in the U.S. state of Washington. With an estimated 652,405 residents as of 2013, Seattle is the largest city in the Pacific Northwest region of North America and the fastest-growing major city in the United States.[5] The Seattle metropolitan area of around 3.6 million inhabitants is the 14th largest metropolitan area in the United States.[6] The city is situated on a narrow isthmus between Puget Sound (an inlet of the Pacific Ocean) and Lake Washington, about 100 miles (160 km) south of the Canada–United States border. A major gateway for trade with Asia, Seattle is the 8th largest port in the United States and 9th largest in North America in terms of container handlin</p>
        </div>
    </div>
</div>

这是我的css：

#topbar {
    width: 100%;
    background: #f66511;
    height: 34px;
    line-height: 1;
}

.wrapper-data {
    position:relative;
    width:100%;
    border: none;
    margin: 40px 0 0 0;
    overflow: hidden;
}

    .data_row {
        height:100%;
        min-height:100%;
        white-space:nowrap;
        display:table;
        width: 100%;
    }

/* Landing Data - Left Content - 2 col  */
    .data_cell1_lt-20-80 {
        width:74%;
        white-space:normal;
        display:table-cell;
        vertical-align:top;
    }

    .data_cell2_lt-20-80 {
        width:6%;
        display:table-cell;
        white-space:normal;
    }

    .data_cell3_lt-20-80 {
        width:20%;
        display:table-cell;
        white-space:normal;
    }

        .data_cell3_lt-20-80 img {
        display:block; 
        margin:0 auto;
        }
        .data_cell3_lt-20-80 p {
        text-align:left;
        }

/* Landing Data - Right Content - 2 col */
    .data_cell1_rt-20-80 {
        width:20%;
        white-space:normal;
        display:table-cell;
    }

    .data_cell2_rt-20-80 {
        width:6%;
        display:table-cell;
        white-space:normal;
    }

    .data_cell3_rt-20-80 {
        width:74%;
        display:table-cell;
        white-space:normal;
        vertical-align:top;
    }

Answer 1

您使用的是#topbar，它引用了ID，但您在HTML中设置了class = "topbar"。您需要更改div以使用id = "topbar"，或将CSS更改为使用.topbar而不是#topbar。

Answer 2

CSS类由句点表示，而不是哈希。变化：

#topbar{}

为：

.topbar{}

Answer 3

因为您已将topbar分配给DIV为类，但在CSS中您将其称为 ID

在CSS中，我们选择一个元素，其ID带有前导哈希符号#，例如#topbar

和

通过其带有前导点.的类，例如.topbar

这是一篇很好的文章：http://htmldog.com/guides/css/intermediate/classid/

更改您的代码：

#topbar { /* ... */ }

要：

.topbar { /* ... */ }

以下是 Working Fiddle 。

Answer 4

从班级更改为身份<div id="topbar">

你的CSS正在使用＃

但是如果要在多个页面上使用它，那么只需将css更改为#topbar

即可

为什么我的背景颜色没有显示在窗口的顶部？

4 个答案: