【发布时间】: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