【问题标题】:Background color of sidebars, HTML,CSS侧边栏的背景颜色,HTML,CSS
【发布时间】:2021-03-11 14:52:51
【问题描述】:

我想问你一些困扰我一段时间的事情。我目前正在学习 HTML 和 CSS,我们得到了这个作业,我们必须创建一个博客,中间有一篇文章,右边有两个侧边栏,网站的背景颜色应该是灰色的。问题是主要文章和两个侧边栏应该有一个白色的背景色,所以当我将文章的背景色改为白色时,它会自动控制 75% 的网站,即使是在文章之外。这是截图。

我想做什么 https://f.v1.n0.cdn.getcloudapp.com/items/0k300n0O0J0c1l1B3K2J/blog-1.png

当我将侧边栏的背景颜色更改为白色时得到什么 https://ctrlv.sk/WF4e

.main-image {
    height: 260px;
    width: 670px;
}
.main {
    text-align: center;
    padding: 40px;
    margin-top: -10px;
}
.main2 {
    background-color: white;
}
body {
    background-color: rgb(243, 243, 243)
}
.line {
    margin-top: 50px;
}
hr {
    margin-top: -20px;
}
.back {
    background-color: white;
}
.box-post {
    background: white;
    margin-left: 70px;
}
.sideimage {
    float: right;
    margin-top: -340px;
    width: 350px;
    margin-right: 100px;
    display: block;
}
.sidetext {
    text-align: right;
    margin-top: -180px;
    margin-right: 160px;
    
}
<title>Blog</title>
    <link rel="stylesheet" href="styles.css">
<header>
    <div class="main2">
    <h1 class="main">
        <strong>Dopetrope</strong>
    </h1>
    </div>
    <hr>
</header>
<section id="main">
    <article class="box-post">
        <img class="main-image" src="pic01.jpg" alt="obrazocek">
        <header>
            
            <h1>Right sidebar</h1>
            <h3>Lorem ipsum dolor sit amet feugiat</h3>
            <div>
        </div></header>
        <p>
</p><section class="box">
    <img class="sideimage" src="pic09.jpg">
    <h1 class="sidetext2">Sed etiam lorem nulla</h1>
    <p class="sidetext">
        Lorem ipsum dolor sit amet sit veroeros <br>
        sed amet blandit consequat veroeros <br>
        lorem blandit adipiscing et feugiat <br>
        phasellus tempus dolore ipsum lorem <br>
        dolore.
    </p>
</section>
            <p>
            Vestibulum scelerisque ultricies libero id hendrerit. Vivamus malesuada quam faucibus ante <br>
            dignissim auctor hendrerit libero placerat. Nulla facilisi. Proin aliquam felis non arcu molestie at <br>
            accumsan turpis commodo. Proin elementum, nibh non egestas sodales, augue quam aliquet est, <br>
            id egestas diam justo adipiscing ante. Pellentesque tempus nulla non urna eleifend ut ultrices nisi <br>
            faucibus. <br><br><br>
            Praesent a dolor leo. Duis in felis in tortor lobortis volutpat et pretium tellus. Vestibulum ac ante <br>
            nisl, a elementum odio. Duis semper risus et lectus commodo fringilla. Maecenas sagittis convallis <br>
            justo vel mattis. placerat, nunc diam iaculis massa, et aliquet nibh leo non nisl vitae porta lobortis, <br>
            enim neque fringilla nunc, eget faucibus lacus sem quis nunc suspendisse, nec lectus sit amet <br>
            augue rutrum vulputate ut ut mi. Aenean elementum, mi sit amet portittor lorem ipsum dolor sit <br>
            amet, consecteur adipiscing elit. Lorem ipsum dolor sir amet nullam consequat feugiat dolore <br>
            tempus.
            
            </p>
    </article>
</section>

关于如何改变这个的任何想法?我希望你明白我在这里想要达到的目标。如果代码有误,请不要太介意代码,我对这些东西还是很陌生:D

【问题讨论】:

    标签: html css colors background


    【解决方案1】:

    我想你可能需要改变你的布局,左边一个DIV,右边两个DIV,如下

    .main {
        text-align: center;
        padding: 40px;
        margin-top: -10px;
        border-bottom:1px solid #DDDDDD;
    }
    .main2 {
        background-color: white;
    }
    body {
        background-color: rgb(243, 243, 243);
        margin:0;
    }
    
    .container {
    width:100%;
    padding:20px;
    }
    
    .leftbox {
    width:68%;
    float:left;
    background:#FFFFFF;
    }
    
    .image1 {
    padding:0px;
    background-image:url("https://i.stack.imgur.com/nhPHk.jpg");
    height:160px;"
    }
    
    .image2 {
    padding:0px;
    background-image:url("https://i.stack.imgur.com/Vqklg.jpg");
    height:50px;
    }
    
       
    
    .leftboxcontent {
    padding:20px;
    }
    
    .middlespace {
    width:3%;
    float:left;
    }
    
    
    .rightbox {
    width:25%;
    float:left;
    }
    
    .rightboxcontent1 {
    background-color:#FFFFFF;
    width:100%;
    }
    
    .rightboxcontent1a {
    padding:20px;
    }
    
    .rightboxcontent2 {
    background-color:#FFFFFF;
    width:100%;
    }
    
    .rightboxcontent2a {
    padding:20px;
    }
      <title>Blog</title>
    
     <body>
    
     <div class="main2">
         <h1 class="main">
             <strong>Dopetrope</strong>
         </h1>
     </div>
    
    
    
     <div class=container>
    
         <div class=leftbox>
    
             <div class=image1>&nbsp;</div>
    
             <div class=leftboxcontent>
    
                 <h1>Right sidebar</h1>
                 <h3>Lorem ipsum dolor sit amet feugiat</h3>
    
                 <h4>Lorem ipsum dolor sit amet feugiat</h4>
                 <h4>Lorem ipsum dolor sit amet feugiat</h4>
                 <h4>Lorem ipsum dolor sit amet feugiat</h4>
                 <h4>Lorem ipsum dolor sit amet feugiat</h4>
                 <h4>Lorem ipsum dolor sit amet feugiat</h4>
                 <h4>Lorem ipsum dolor sit amet feugiat</h4>
                 <h4>Lorem ipsum dolor sit amet feugiat</h4>
                 <h4>Lorem ipsum dolor sit amet feugiat</h4>
             </div>
             <div>&nbsp;</div>
         </div>
    
    
         <div class=middlespace>&nbsp;</div>
    
         <div class=rightbox>
    
             <div>
                 <div class=image2>&nbsp;</div>
    
                 <div class=rightboxcontent1>
    
                     <div class=rightboxcontent1a>
    
                         TESTTEST<BR>TESTTEST<BR>
                         TESTTEST<BR>TESTTEST<BR>
                         TESTTEST<BR>TESTTEST<BR>
                         TESTTEST<BR>TESTTEST<BR>
                         TESTTEST<BR>TESTTEST<BR>
                         TESTTEST<BR>TESTTEST<BR>
    
                     </div>
    
                 </div>
             </div>
    
    
             <br><br>
    
             <div>
    
    
                 <div class=rightboxcontent2>
                     <div class=rightboxcontent2a>
    
                         TESTTEST2<BR>TESTTEST2<BR>
                         TESTTEST2<BR>TESTTEST2<BR>
    
                     </div>
                 </div>
             </div>
    
             
    
         </div>
    
     </div>
    
     </body>

    【讨论】:

      【解决方案2】:

      在填充内容之前先创建一个强大的结构是一种很好的做法。如果你有一个好的结构,那么你的调试就更少了。类似于下面的模板。

      提示。 display:flex 比 float:left 更灵活

      * {
        margin: 0;
        box-sizing: border-box;
      }
      #header {
        width: 100%;
      }
      #main {
        float: left;
        width: 70%;
      }
      #aside {
        float: left;
        width: 30%;
      }
      #footer {
        clear: both;
        width: 100%;
      }
      /* for test purpose only */
      .test {
        height: 80px;
        border: 1px solid orange;
      }
      <header id="header" class="test">
      </header>
         
      <section id="main" class="test">
        <article>
        </article>
      </section>
         
      <aside id="aside" class="test">
      </aside>
         
      <footer id="footer" class="test">
      </footer>

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2017-12-30
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2019-02-18
        • 1970-01-01
        相关资源
        最近更新 更多