堆栈内存溢出
  简体   繁体   English

Html 和 css 背景色

[英]Html and css background color

 原文  2019-11-22 17:26:35  1   3    html/ css/ background-color

问题描述

I am doing private project and I don't know how to set background color of the article for the whole width of the page, not just around the text, like in screen1.我正在做私人项目，我不知道如何为页面的整个宽度设置文章的背景颜色，而不仅仅是在文本周围，就像在 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 &copy 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>

use this one i hope your problem will be solved使用这个我希望你的问题会得到解决

解决方案2
 0  2019-11-22 19:27:30

It is simple, width: 100% will stretch the div across the whole page.很简单， 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%;
    }

Additional, you need to remove padding and margin upon loading the page另外，您需要在加载页面时删除填充和边距

html, body {
    margin:0;
    padding:0;
}

解决方案3
 0  2019-11-22 19:32:30

Use this css to get the full width while the content is still in the middle.使用此 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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 HTML / CSS背景颜色 - HTML/CSS background color 输入 HTML/CSS 中的背景颜色 - Background color in Inputs HTML/CSS 将CSS链接到HTML背景颜色 - Linking CSS to HTML background color 侧边栏的背景颜色，HTML,CSS - Background color of sidebars, HTML,CSS HTML CSS背景颜色 - HTML CSS Background-Color 在html / css中的并发背景色内开始新的背景色 - starting a new background color within a concurrent background color in html / css 将背景颜色添加到HTML / CSS中的部分时出错 - Error in adding background color to section in HTML/CSS 使用CSS和HTML的表格单元格的背景色 - background color of table cells using css and html 单选按钮不更改背景颜色HTML / CSS - Radio button not changing background color HTML/CSS 使用html n css的背景颜色 - background color using html n css
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM