gpt4 book ai didi

html - 背景颜色应用于 HTML/CSS 中的先前元素

转载 作者:行者123 更新时间:2023-11-28 01:25:31 26 4
gpt4 key购买 nike

我目前正在使用 W3 学校示例制作定价表。但是,下面 div 的样式正在应用于上面的所有内容。我希望它只适用于那个特定的 div。

我试过使用: overflow: hidden;它不起作用,因为 div 中的内容被隐藏,但它确实删除了背景。

我也尝试过:将这三个列表放在一个 div 中,希望它将列表包裹在它周围并且不会受到下面的 div 的影响。相反,似乎没有任何效果。

我想要的效果:是能够在此列表下方放置另一个 div,并应用背景颜色而不影响页面的其余部分。

根据要求,我将插入

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}

.columns {
float: left;
width: 33.3%;
padding: 8px;
}

.price {
list-style-type: none;
border: 1px solid #eee;
margin: 0;
padding: 0;
-webkit-transition: 0.3s;
transition: 0.3s;
}

.price:hover {
box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
}

.price .header {
background-color: #111;
color: white;
font-size: 25px;
}

.price li {
border-bottom: 1px solid #eee;
padding: 20px;
text-align: center;
}

.price .grey {
background-color: #eee;
font-size: 20px;
}

.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 25px;
text-align: center;
text-decoration: none;
font-size: 18px;
}

@media only screen and (max-width: 600px) {
.columns {
width: 100%;
}
}
</style>
</head>
<body>

<h2 style="text-align:center">Responsive Pricing Tables</h2>
<p style="text-align:center">Resize the browser window to see the effect.</p>

<div class="columns">
<ul class="price">
<li class="header">Basic</li>
<li class="grey">$ 9.99 / year</li>
<li>10GB Storage</li>
<li>10 Emails</li>
<li>10 Domains</li>
<li>1GB Bandwidth</li>
<li class="grey"><a href="#" class="button">Sign Up</a></li>
</ul>
</div>

<div class="columns">
<ul class="price">
<li class="header" style="background-color:#4CAF50">Pro</li>
<li class="grey">$ 24.99 / year</li>
<li>25GB Storage</li>
<li>25 Emails</li>
<li>25 Domains</li>
<li>2GB Bandwidth</li>
<li class="grey"><a href="#" class="button">Sign Up</a></li>
</ul>
</div>

<div class="columns">
<ul class="price">
<li class="header">Premium</li>
<li class="grey">$ 49.99 / year</li>
<li>50GB Storage</li>
<li>50 Emails</li>
<li>50 Domains</li>
<li>5GB Bandwidth</li>
<li class="grey"><a href="#" class="button">Sign Up</a></li>
</ul>
</div>
<!-- THIS IS WHERE MORE CONTENT WOULD GO -->
<div style="background-color: black"> <!-- WHY DOES THIS AFFECT EVERYTHING ABOVE IT? -->
<span style="color: white;">hello</span>
</div>
<!-- END OF FOOTER -->

</body>
</html>

Example of what is happening + code

最佳答案

CSS 中的级联术语说明了这一点:优先级一:在 HTML 应答器中直接定义样式优先级二(低):HTML 文件头部的 CSS 样式较低的优先级:单独的 CSS 文件中的 CSS 样式

现在,如何解决您的问题?这不是一个级联问题(这就是为什么你搜索太多时间的原因)但你在你的列样式上使用了 float:left 。

  • 然后,您必须为您的其他 div 创建一个“白色”类(在 <li> 应答器中)
  • 或者您可以创建一个带有 float: left 的 .other 类用于黑色的最后一个 div

    希望我能帮到你 :)

    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
    * {
    box-sizing: border-box;
    }

    .columns {
    float: left;
    width: 33.3%;
    padding: 8px;
    }

    .price {
    list-style-type: none;
    border: 1px solid #eee;
    margin: 0;
    padding: 0;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    }

    .price:hover {
    box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
    }

    .price .header {
    background-color: #111;
    color: white;
    font-size: 25px;
    }

    .price li {
    border-bottom: 1px solid #eee;
    padding: 20px;
    text-align: center;
    }

    .price .grey {
    background-color: #eee;
    font-size: 20px;
    }

    .other {
    float: left;
    }


    .button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 10px 25px;
    text-align: center;
    text-decoration: none;
    font-size: 18px;
    }

    @media only screen and (max-width: 600px) {
    .columns {
    width: 100%;
    }
    }
    </style>
    </head>
    <body>

    <h2 style="text-align:center">Responsive Pricing Tables</h2>
    <p style="text-align:center">Resize the browser window to see the effect.</p>

    <div class="columns">
    <ul class="price">
    <li class="header">Basic</li>
    <li class="grey">$ 9.99 / year</li>
    <li>10GB Storage</li>
    <li>10 Emails</li>
    <li>10 Domains</li>
    <li>1GB Bandwidth</li>
    <li class="grey"><a href="#" class="button">Sign Up</a></li>
    </ul>
    </div>

    <div class="columns">
    <ul class="price">
    <li class="header" style="background-color:#4CAF50">Pro</li>
    <li class="grey">$ 24.99 / year</li>
    <li>25GB Storage</li>
    <li>25 Emails</li>
    <li>25 Domains</li>
    <li>2GB Bandwidth</li>
    <li class="grey"><a href="#" class="button">Sign Up</a></li>
    </ul>
    </div>

    <div class="columns">
    <ul class="price">
    <li class="header">Premium</li>
    <li class="grey">$ 49.99 / year</li>
    <li>50GB Storage</li>
    <li>50 Emails</li>
    <li>50 Domains</li>
    <li>5GB Bandwidth</li>
    <li class="grey"><a href="#" class="button">Sign Up</a></li>
    </ul>
    </div>
    <!-- THIS IS WHERE MORE CONTENT WOULD GO -->
    <div class="other" id="other" style="background-color: black"> <!-- WHY DOES THIS AFFECT EVERYTHING ABOVE IT? -->
    test
    <span style="color: white;">hello</span>
    </div>
    <!-- END OF FOOTER -->

    </body>
    </html>

  • 关于html - 背景颜色应用于 HTML/CSS 中的先前元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51272184/

    26 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com