How to change only body color?

2018-07-04 08:17:46

Im trying to change only my body color, i have a div with my content, and I want my body, only outside of main div to be gray. I've tried changing my body background color to grey and div to white: body { font-family: 'Roboto',sans-serif;

background-color: #cccccc; }

div#content { display: block;

width: 85%;

background-color: #FFF;

margin-left: auto;

margin-right: auto; }

but then it all gets grey.

My code:

<style type="text/css">
    *
    {
        box-sizing: border-box;

        margin: 0;
    }

    body
    {
        font-family: 'Roboto',sans-serif;

        background-color: #cccccc;
    }

    div#content
    {
        display: block;

        width: 85%;

        background-color: #FFF;

        margin-left: auto;

        margin-right: auto;
    }

    header
    {
        width: 100%;

        display: block;

        float: left;
    }

    article
    {
        float: left;

        width: 100%;

        margin-top: 50px;

        display: block;
    }

    header img
    {
        float: left;            

        width: 150px;

        height: 50px;
    }

    header ul
    {
        list-style: none;

        float: left;

        margin-top: 15px;
    }

    header ul li
    {
        display: inline-block;

        margin-right: 5px;

        transition: 0.5s;

        box-shadow: 1px 1px 1px rgba(0,0,0,0.5);

        text-transform: uppercase;

        background-color: #F9C319;

        font-size: 11pt;

        color: white;

        padding: 5px;
    }
    header ul li:hover
    {
        background-color: #1FC0EE;
    }

    section#principal
    {
        float: left;

        width: 100%;

        display: block;
    }

    section#secundaria
    {
        float: left;

        width: 100%;

        display: block;

        margin-top: 50px;

        margin-bottom: 10px;
    }

    section#principal img
    {
        float: left;

        width: 350px;

        height: 230px;

        box-shadow: 10px 11px 20px -4px rgba(0,0,0,0.75);

        margin-right: 25px;
    }

    section#principal p
    {
        text-align: justify;

        font-size: 14pt;
    }

    section#secundaria figure
    {
        width: 33.33%;

        float: left;

        text-align: center;
    }

    section#secundaria figure figcaption
    {
        margin-bottom: 15px;

        font-size: 12pt;
    }

    section#secundaria figure img
    {
        height: 200px;

        width: 280px;

        box-shadow: 10px 11px 20px -4px rgba(0,0,0,0.75);
    }

    section#secundaria figure p
    {
        text-align: justify;

        padding: 10px 50px 10px 50px;

        font-size: 12pt;
    }

    footer
    {
        width: 100%;

        padding:10px;

        float: left;

        display: block;

        border-top:1px solid #111111;
    }

    footer section
    {
        margin-left: 500px;

        display: block;
    }

    footer section img
    {
        width: 32px;
    }

    footer p
    {
        float: right;

        font-size: 10pt;
    }

</style>

This worked fine for me:

<style>
body {background-color:#ccc;}
div#content
{
 width:85%;
  height:500px;
  background-color:#fff;
  margin:auto;
 }
 </style>
 <body>
 <div id=content>
 </div>
 </body>

Note that to see any effect, the div either has to have a height specified, or something in it so that the height is not zero.

If the height IS zero, there won't be anything for the white to be the background FOR, and the page will be all grey.

Also, you did not include your HTML, so maybe "id=content" was missing.
There is nothing special about the name 'content' there.

链接地址: http://www.djcxy.com/p/95646.html

上一篇: 批量插入到SQL Server中

下一篇: 如何只改变身体颜色？