在bootstrap网站中更改部分背景颜色

时间:2018-01-12 10:29:27

标签: colors background bootstrap-4 sections

在像www.teachyourselfpython.com这样的引导网站中,欢迎和资源部分(如果向下滚动)是白色的。也就是说,背景颜色是白色。

我尝试了各种各样的事情,但是我不知道在哪里放置代码或放置什么,将每个部分的白色背景(但不影响其余部分)更改为浅灰色。

例如页面上的“我们的资源”部分是黑色的,但我看不到将其变为黑色的代码。

<!-- About Section -->
    <section id="about">
        <div class="container">

            <div class="row">
                <p></br></br></br></p>
            </div>
            <div class="row">
                <div class="col-lg-12 text-center">
                    <h2 class="section-heading">Our Resources</h2>
                    <h3 class="section-subheading text-muted">A Better way to learn Python.<h3>

                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <p>Unlike other books, websites and resources on Python, our customisable and hugely comprehensive, not to mention pedagogically tested power points, can be used by both teachers (to teach) and students for independent learning.</p>
                    <p>On subscribing to a series, interactivity and embedded videos can be accessed, together with all the python task and challenge solution files.</p>
                    <p></br></br></br></p>
                    <a href="signup.php" class="btn-block" style="text-align:center;">Sign Up Today!</a>
                </div>
                <div class="col-md-6" style="text-align:center;">
                    <div class="jetpack-video-wrapper"><iframe src='https://www.slideshare.net/slideshow/embed_code/64063652' width='80%' height='288' allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe></div>
                </div>
            </div>
            <div class = "row">
                <p></br></p>
            </div>
        </div>
    </section>

任何人都可以建议最好的方法来做一个非常简单的调整(简单到主索引页面)来转动背景光的白色部分灰色

源代码:www.teachyourselfpython.com可以用于演示(在哪里插入什么)

我尝试在每个部分下添加

<!-- About Section -->
    <section id="about">
        <div class="container"  style="background-color: #ce0818;opacity:0.8;">

但这会使块变为“红色”(或任何颜色)而不是网站的整个宽度,这就是问题所在。

1 个答案:

答案 0 :(得分:2)

在我们的资源环境中 - 你应该将背景css放在div而不是容器div

<section id= 'about' style="background:black;padding: 60px 0;
text-align: center;">

并将背景更改为浅灰色,将其写入标签

<body style="background:#cccccc !important;">

这是一种不太优选的内联方法。您可以使用外部css并在那里编写css并在页面

中包含该文件

要使用外部样式表,请在HTML页面的部分中添加指向它的链接: 例如:

<link rel="stylesheet" href="styles.css">

并写

body{
background:#cccccc;
}

#about{
   background: #24242a;
   padding: 60px 0;
  text-align: center;
  }

或者可以在头标记示例中包含该页面中的css代码:

    <head>

     <style>
          //write your style code here
     </style>

   </head>

teachyourself用css / main.css文件写的那个css