Question

我想给我的固定标题添加彩色背景。我尝试了几种不同的方法，我认为可能有一个简单的答案，但我似乎无法找出它是什么：

我该怎么做？

HTML：

<body>
<div class="gridContainer clearfix">
    <div id="LayoutDiv1"><h1>Hello</h1></div>
  <div id="LayoutDiv2"></div>
  <div id="LayoutDiv3"></div>
  <div id="LayoutDiv4"></div>
<div id="LayoutDiv9">Goodbye</div>

<div id="LayoutDiv10"></div>
</div>
</body>

CSS：

@charset "utf-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
    max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
    width:100%;
}

/*
    Dreamweaver Fluid Grid Properties
    ----------------------------------
    dw-num-cols-mobile:     5;
    dw-num-cols-tablet:     8;
    dw-num-cols-desktop:    10;
    dw-gutter-percentage:   25;

    Inspiration from "Responsive Web Design" by Ethan Marcotte 
    http://www.alistapart.com/articles/responsive-web-design

    and Golden Grid System by Joni Korpi
    http://goldengridsystem.com/
*/

/* Mobile Layout: 480px and below. */

.gridContainer {
    margin-left: auto;
    margin-right: auto;
    width: 87.36%;
    padding-left: 1.82%;
    padding-right: 1.82%;
}
#LayoutDiv1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#LayoutDiv2 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#LayoutDiv3 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#LayoutDiv4 {
    clear: none;
    float: left;
    margin-left: 4.1666%;
    width: 100%;
    display: block;
}
#LayoutDiv5 {
    clear: none;
    float: left;
    margin-left: 4.1666%;
    width: 100%;
    display: block;
}
#LayoutDiv6 {
    clear: none;
    float: left;
    margin-left: 4.1666%;
    width: 100%;
    display: block;
}
#LayoutDiv7 {
    clear: none;
    float: left;
    margin-left: 4.1666%;
    width: 100%;
    display: block;
}
#LayoutDiv8 {
    clear: none;
    float: left;
    margin-left: 4.1666%;
    width: 100%;
    display: block;
}
#LayoutDiv9 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#LayoutDiv10 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}

/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 481px) {
.gridContainer {
    width: 90.675%;
    padding-left: 1.1625%;
    padding-right: 1.1625%;
}
#LayoutDiv1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#LayoutDiv2 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#LayoutDiv3 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#LayoutDiv4 {
    clear: none;
    float: left;
    margin-left: 2.5641%;
    width: 100%;
    display: block;
}
#LayoutDiv5 {
    clear: none;
    float: left;
    margin-left: 2.5641%;
    width: 100%;
    display: block;
}
#LayoutDiv6 {
    clear: none;
    float: left;
    margin-left: 2.5641%;
    width: 100%;
    display: block;
}
#LayoutDiv7 {
    clear: none;
    float: left;
    margin-left: 2.5641%;
    width: 100%;
    display: block;
}
#LayoutDiv8 {
    clear: none;
    float: left;
    margin-left: 2.5641%;
    width: 100%;
    display: block;
}
#LayoutDiv9 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#LayoutDiv10 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
}

/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

    @media only screen and (min-width: 769px) {
    .gridContainer {
        width: 88.2%;
        max-width: 1232px;
        padding-left: 0.9%;
        padding-right: 0.9%;
        margin: auto;
    }
    #LayoutDiv1 {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
    }
    #LayoutDiv2 {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
    }
    #LayoutDiv3 {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
    }
    #LayoutDiv4 {
        clear: both;
        float: left;
        margin-left: 0;
        width: 18.3673%;
        display: block;
    }
    #LayoutDiv5 {
        clear: none;
        float: left;
        margin-left: 2.0408%;
        width: 18.3673%;
        display: block;
    }
    #LayoutDiv6 {
        clear: none;
        float: left;
        margin-left: 2.0408%;
        width: 18.3673%;
        display: block;
    }
    #LayoutDiv7 {
        clear: none;
        float: left;
        margin-left: 2.0408%;
        width: 18.3673%;
        display: block;
    }
    #LayoutDiv8 {
        clear: none;
        float: left;
        margin-left: 2.0408%;
        width: 18.3673%;
        display: block;
    }
    #LayoutDiv9 {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
    }
    #LayoutDiv10 {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
    }
    }

    @charset "utf-8";
    /* CSS Document */

    #LayoutDiv1 {
        position: fixed;
        height: 50px;
        top: 0;
        width: 100%;
        z-index: 10000;
        background:#FFF;
    }

    #LayoutDiv2 {
        position: fixed;
        height: 50px;
        top: 50px;
        width: 100%;
        z-index: 10002;
        background:#FFF;
        }

    #LayoutDiv3 {

        margin-top: 135px;

        }

    #LayoutDiv9 {
        position: fixed;
        height: 60px;
        width: 100%;
        z-index:10006;
        background:#FFF;
        max-height: 100px;
        bottom: 60px;
        }

    #LayoutDiv10 {

        position: fixed;
        height: 60px;
        width: 100%;
        z-index:10008;
        background:#FFF;
        bottom:0px;
        max-height: 60px;
        }

Answer 1

#LayoutDiv1 {
    position: fixed;
    height: 50px;
    top: 0;
    width: 100%;
    z-index: 10000;
    background:#FFF;
}

背景设置为白色，这就是您无法看到它的原因

还有一件事 - 此行位于样式表的底部，因此它会覆盖您的所有样式

这是我的小提琴我只是复制粘贴您的代码并将bakcground颜色替换为蓝色 - http://jsfiddle.net/SHeWm/

给固定标题一个颜色背景

1 个答案: