側邊欄的背景顏色，HTML,CSS
[英]Background color of sidebars, HTML,CSS
問題描述
我想問你一件困擾我一段時間的事情。 我目前正在學習 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
2 個解決方案
解決方案1
1 已采納 2020-11-29 14:49:09
我認為您可能需要更改布局，在左側使用一個 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> </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> </div> </div> <div class=middlespace> </div> <div class=rightbox> <div> <div class=image2> </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
1 2020-11-29 15:23:48
在填充內容之前先從一個強大的結構開始是一種很好的做法。 如果你有一個好的結構，那么你的調試就更少了。 類似於下面的模板。
小費。 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>
在html / css中的並發背景色內開始新的背景色
[英]starting a new background color within a concurrent background color in html / css
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.