Html 和 css 背景色
[英]Html and css background color
問題描述
我正在做私人項目，我不知道如何為頁面的整個寬度設置文章的背景顏色，而不僅僅是在文本周圍，就像在 screen1 中一樣。
.logo { text-align: center; font-size: 40px; margin-top: 40px; margin-bottom: 30px; letter-spacing: 5px; text-transform: uppercase; color: #ddd; font-weight: 700px; } nav { background-color: #1c74b2; text-align: center; width: 100%; } body { background-color: #2F3336; color: #efefef; }.menu { padding-top: 13px; padding-bottom: 13px; color: #efefef; list-style-type: none; margin: 0; font-size: 18px; min-height: 40px; line-height: 200%; width: 100%; }.menu > li { display: inline-block; border-right: 1px dashed #0a2b42; padding-right: 20px; padding-left: 20px; width: 145px; }.menu > li:last-child { border-right: 1px dashed #0a2b42; }.menu > li:first-child { border-left: 1px dashed #0a2b42; }.menu a { text-decoration: none; color: #fff; transition: transform.2s ease-in-out; }.menu a:hover { color: #0a2b42; transform: scale(1.2); } h1 { font-size: 40px; font-weight: 500px; color: #39a5f1; margin-top: 40px; margin-bottom: 20px; }.one { margin-right: auto; margin-left: auto; margin-bottom: 125px; text-align: center; width: 950px; }.two { background-color: #191d21; margin-right: auto; margin-left: auto; margin-bottom: 125px; text-align: center; width: 950px; }.footer { width: 100%; min-height: 50px; background-color: #1c74b2; text-align: center; font-size: 16px; padding: 17px; margin: 0px; } #Lorem { background-color: #191d21; }
<.DOCTYPE html> <html> <head> <title>STRONA GŁÓWNA</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Comaptible" content="IE=edge"> <link rel="stylesheet" type="text/css" href="styleindex.css"> </head> <body> <header> <h1 class="logo">DRUGA WOJNA ŚWIATOWA</h1> <nav> <ul class="menu"> <li><a href="#">Strona Główna</li></a> <li><a href="#">Fronty wojny</li></a> <li><a href="#">Nowe technologie</li></a> <li><a href="#">Mapy polityczne</li></a> <li><a href="#">Materiały źródłowe</li></a> <li><a href="./strona1,html">Logowanie</li></a> <li><a href="#">Kontakt</li></a> </ul> </nav> </header> <main> <section> <div class="one"> <header> <h1>INTRODUCTION</h1> <p>Lorem ipsum dolor sit amet. consectetur adipiscing elit, Aenean pulvinar nibh id dolor placerat. et luctus libero pretium. Vivamus eget arcu ligula. Vivamus blandit diam non sapien cursus malesuada. In vulputate facilisis velit ut interdum, Nam commodo ex quis ipsum rutrum. convallis venenatis ex tincidunt, Praesent tincidunt semper ex. eget semper ante porta vel. Integer egestas turpis vitae ullamcorper ultricies, Ut arcu tortor, imperdiet vel felis et. fermentum rutrum dolor. Vestibulum bibendum eu massa et tincidunt. Integer a porta enim, Curabitur quis imperdiet ante. aliquam tincidunt felis. Praesent nec est ac massa hendrerit tempus. Vivamus in mattis quam, </p> </header> </div> <div class="two"> <article id="Lorem"> <h1>Lorem ipsum</h1> <p>Lorem ipsum dolor sit amet. consectetur adipiscing elit, Aenean pulvinar nibh id dolor placerat. et luctus libero pretium. Vivamus eget arcu ligula. Vivamus blandit diam non sapien cursus malesuada. In vulputate facilisis velit ut interdum, Nam commodo ex quis ipsum rutrum. convallis venenatis ex tincidunt, Praesent tincidunt semper ex. eget semper ante porta vel. Integer egestas turpis vitae ullamcorper ultricies, Ut arcu tortor, imperdiet vel felis et. fermentum rutrum dolor. Vestibulum bibendum eu massa et tincidunt. Integer a porta enim, Curabitur quis imperdiet ante. aliquam tincidunt felis. Praesent nec est ac massa hendrerit tempus. Vivamus in mattis quam.</p> </article> </div> </section> </main> <footer> <div class="footer"> <p>II WOJNA ŚWIATOWA © wszelkie prawa zastrzeżone. Dzięki za odwiedzenie i zapraszam ponownie.</p> </div> </footer> </body> </html>
3 個解決方案
解決方案1
1 已采納 2019-11-22 17:42:52
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.two {
background-color: #f0f0f0;
margin-bottom: 125px;
text-align: center;
width: 100%;
}
#Lorem {
background-color: #f0f0f0;
margin-right: auto;
margin-left: auto;
margin-bottom: 125px;
text-align: center;
width: 950px;
}
</style>
</head>
<body>
<div class="two">
<article id="Lorem">
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pulvinar nibh id dolor placerat, et
luctus libero pretium. Vivamus eget arcu ligula. Vivamus blandit diam non sapien cursus malesuada. In
vulputate facilisis velit ut interdum. Nam commodo ex quis ipsum rutrum, convallis venenatis ex
tincidunt. Praesent tincidunt semper ex, eget semper ante porta vel. Integer egestas turpis vitae
ullamcorper ultricies. Ut arcu tortor, imperdiet vel felis et, fermentum rutrum dolor. Vestibulum
bibendum eu massa et tincidunt. Integer a porta enim. Curabitur quis imperdiet ante, aliquam tincidunt
felis. Praesent nec est ac massa hendrerit tempus. Vivamus in mattis quam.</p>
</article>
</div>
</body>
</html>
使用這個我希望你的問題會得到解決
解決方案2
0 2019-11-22 19:27:30
很簡單， width: 100%會將 div 拉伸到整個頁面。
.one {
margin-right: auto;
margin-left: auto;
margin-bottom: 125px;
text-align: center;
width: 100%;
}
.two {
background-color: #191d21;
margin-right: auto;
margin-left: auto;
margin-bottom: 125px;
text-align: center;
width: 100%;
}
另外，您需要在加載頁面時刪除填充和邊距
html, body {
margin:0;
padding:0;
}
解決方案3
0 2019-11-22 19:32:30
使用此 css 在內容仍在中間時獲得全寬。
main > section {
width: 100%;
background-color: #191d21;
margin-bottom: 125px;
}
.one, .two {
width: 100%;
max-width: 950px;
margin 0 auto;
text-align: center;
}
<main>
<section>
<div class="one">
....
</div>
</section>
<section>
<div class="two">
....
</div>
</section>
</main>
在html / css中的並發背景色內開始新的背景色
[英]starting a new background color within a concurrent background color in html / css
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.