将背景颜色添加到HTML / CSS中的部分时出错
[英]Error in adding background color to section in HTML/CSS
问题描述
I am trying to add a dark background color to the newsletter section of this website using CSS. 
我正在尝试使用CSS将深色背景颜色添加到此网站的新闻稿部分。 Instead nearly the entire page displays the background color. 相反，几乎整个页面都显示背景颜色。 I've checked the the HTML document to make sure I mistakenly left a div or section open, but have found nothing. 我检查了HTML文档，以确保我错误地将div或section保持打开状态，但未发现任何内容。 Can anyone tell me why my 75% of my page is being recognized as the "newsletter" section? 谁能告诉我为什么我页面的75％被视为“新闻”部分？
/* Will prevent padding from affecting the width of our columns */ * { box-sizing: border-box; } html, body { font-family: 'Open Sans',sans-serf; } .clearfix:before, .clearfix:after { content: " "; display: table; } /* Prevents floating elements on either side. */ .clearfix:after { clear: both; } .wrapper { width: 1440px; max-width: 90%; margin: 0 auto; } h1, h2, h3, h4, h5, h6 { font-weight: 300; } /* Header */ #top_header { padding: 1.5em 0; } #top_header .logo { float: left; text-transform: uppercase; font-size: 1.15em; font-weight: 700; } #top_header .logo span { font-weight: 300; color: #73e298; } #top_header #main_nav { float: right; font-size: .9em; padding-top: 1em; } #top_header #main_nav a { color: #8b8b9f; text-decoration: none; margin-left: 1em; } #banner { background: url(../images/banner_background.jpg); background-repeat: no-repeat; background-size: cover; width:100%; padding: 6.5em, 0; } #banner #banner_content_wrapper { width: 900px; max-width: 90%; margin: 0 auto; display: flex; justify-content: center; align-items: center } #poster { width: 275px; position: relative; float: left; } #poster .featured_image { width: 100%; max-width: 100%; border-radius: .5em; -webkit-box-shadow: 0px 0px 76px 0px rgba(0, 0, 0, 0.47); -moz-box-shadow: 0px 0px 76px 0px rgba(0, 0, 0, 0.47); box-shadow: 0px 0px 76px 0px rgba(0, 0, 0, 0.47); } /* Moves play button to center of poster image */ #poster .play_button { position: absolute; width: 80px; left: 50%; top: 50%; margin: -40px 0 0 -40px; } /* Moves Deadpool movie info to the right of the image. With better spacing */ #content { float: left; width: 500px; margin-left: 100px; } /* Changes Deadpool title to white, increases font size, and adjusts spacing in the display*/ #content .title { display: inline; font-size: 1.75em; color: #FFFFFF; } /* Rating system now side by side with title instead of below.*/ #content .ratings { display: inline; margin-left: 1em; } /* Adds color and increases size of stars */ #content .ratings i { color: #73e298; font-size: 1.35em; margin: 0 .15em; } /* Changes last star to a grey color */ #content .ratings .inactive { color: #48494d; } /* Changes description color to white which shows up better with the background. Double spaces description as well.*/ .description { color: #bbbebf; font-size: 1em; line-height: 2; } .info { color: #FFFFFF; font-size: .8em; font-weight: 700; margin-top: 3em; } .info span { margin: 0 .5em; } .row { width: 100% } /* Organizes images horizontally */ .post { width: 14%; /* 100% /6(images) -2.5% */ float: left; margin-right: 2.5%; } /* Shrinks images to playing card size. Adds space to images */ .post img { width: 100%; max-width: 100%; border-radius: .5em; } .post .title { font-size: 1.25em; margin: 1em 0 0 0; color:#252529; } /* Lightens the rating and mins. Slight size and margin adjustment */ .post_info { font-size: .75em; color: #8b8b9f; margin: 0.5em 0; } /* Better spacing between top movies and top shows*/ #top_movies, #top_shows { padding: 5em 0; } #top_movies, #top_shows header { padding: 0 0 1.5em 0; } #top_movies, #top_shows header h2, .view_more { display: inline; } #top_movies, #top_shows h2 { font-size: 1.75em; } #top_movies, #top_shows, .view_more { float: right; font-size: .8em; margin: .75em 3.5% 0 0; } /*Adds border between popular movies and tv sections*/ #top_movies { border-bottom: 1px solid #d4d4d4; } #newsletter { padding: 5em 0; text-align: center; background: #2a2a2e; } #newsletter .newsletter_inner{ width: 600px; margin: 0 auto; } #newsletter h2 { font-size: 1.75em; color:#FFFFFF; }
<!DOCTYPE html> <html> <head> <title>Movies & TV | Dan Mayle </title> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css"> <link href='https://fonts.googleapis.com/css?family=Open+Sans:300,700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="css/styles.css"> </head> <body> <!--Header including navigation bar--> <header id="top_header" class="clearfix"> <div class="wrapper"> <h1 class="logo">Movies<span>&</span>TV</h1> <nav id="main_nav"> <a href="#">Movies</a> <a href="#">TV Shows</a> <a href="#">Celebs & Photos</a> <a href="#">News</a> </nav> </div> </header> <section id="banner" class="clearfix"> <div id="banner_content_wrapper"> <div id="poster"> <img src="images/movies/deadpool.jpg" alt="Deadpool Movie Poster" class="featured_image"> <img src="images/play_button.png" alt="Play Trailer" class="play_button"> </div> <div id="content"> <h2 class="title">Deadpool</h2> <div class="ratings"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star inactive"></i> </div> <p class="description">A former Special Forces operative turned mercenary is subjected to a rogue experiment that leaves him with accelerated healing powers, adopting the alter ego Deadpool.</p> <p class="info">R <span>|</span> 108 min <span>|</span> Action, Adventure, Comedy <span>|</span> 12 February 2016</p> </div> </div> </section> <section id="top_movies" class="clearfix"> <div class="wrapper"> <header class="clearfix"> <h2>Popular Movies</h2> <p class="view_more">View All Movies</p> </header> <div class="row"> <div class="post"> <img src="images/movies/the-martian.jpg" alt="The Martian"> <h3 class="title">The Martian</h3> <p class="post_info">PG13 | 144 Minutes</p> </div> </div> <div class="row"> <div class="post"> <img src="images/movies/inside-out.jpg" alt="Inside Out"> <h3 class="title">Inside Out</h3> <p class="post_info">PG | 95 Minutes</p> </div> </div> <div class="row"> <div class="post"> <img src="images/movies/jurassic-world.jpg" alt="Jurassic World"> <h3 class="title">Jurassic World</h3> <p class="post_info">PG13 | 124 Minutes</p> </div> </div> <div class="row"> <div class="post"> <img src="images/movies/mad-max.jpg" alt="Mad Max"> <h3 class="title">Mad Max: Fury Road</h3> <p class="post_info">R | 120 Minutes</p> </div> </div> <div class="row"> <div class="post"> <img src="images/movies/star-wars.jpg" alt="Star Wars"> <h3 class="title">Star Wars: The Force Awakens</h3> <p class="post_info">PG13 | 109 Minutes</p> </div> </div> <div class="row"> <div class="post"> <img src="images/movies/avengers.jpg" alt="The Avengers"> <h3 class="title">Avengers: Age Of Ultron</h3> <p class="post_info">PG13 | 141 Minutes</p> </div> </div> </div> </section> <section id="top_shows" class="clearfix"> <div class="wrapper"> <header class="clearfix"> <h2>Popular Shows</h2> <p class="view_more">View All Shows</p> </header> <div class="row"> <div class="post"> <img src="images/tv_shows/walking-dead.jpg" alt="The Walking Dead"> <h3 class="title">The Walking Dead</h3> <p class="post_info">TV-MA | Season 4</p> </div> </div> <div class="row"> <div class="post"> <img src="images/tv_shows/game-of-thrones.jpg" alt="Game Of Thrones"> <h3 class="title">Game Of Thrones</h3> <p class="post_info">TV-MA | Season 6</p> </div> </div> <div class="row"> <div class="post"> <img src="images/tv_shows/breaking-bad.jpg" alt="Breaking Bad"> <h3 class="title">Breaking Bad</h3> <p class="post_info">TV-MA | Season 5</p> </div> </div> <div class="row"> <div class="post"> <img src="images/tv_shows/empire.jpg" alt="Empire"> <h3 class="title">Empire</h3> <p class="post_info">TV-14 | Season 2</p> </div> </div> <div class="row"> <div class="post"> <img src="images/tv_shows/master-of-none.jpg" alt="Master of None"> <h3 class="title">Master of None</h3> <p class="post_info">TV-MA | Season 1</p> </div> </div> <div class="row"> <div class="post"> <img src="images/tv_shows/mr-robot.jpg" alt="Mr Robot"> <h3 class="title">Mr Robot</h3> <p class="post_info">TV-14 | Season 1</p> </div> </div> </div> </section> <section id="newsletter"> <div class="newsletter_inner"> <h2>Get the best Movie & TV Show trailers straight in your inbox each week.</h2> <div class="sign_up_form"> <input type="text" placeholder="First Name"> <input type="email" placeholder="Email Address"> <button class="button">Subscribe</button> </div> </div> </section> <footer id="main_footer"> <p class="logo">Movies<span>&</span>Stuff</p> <p class="copyright">©2016 Movies & Stuff. All Rights Reserved.</p> <div class="links"> <a href="#">Terms of Service</a> <a href="#">Privacy Policy</a> </div> </footer> </body> </html>
2 个解决方案
解决方案1
1 2016-06-27 23:53:14
Get rid of the unnecessary float:right on #top_movies and #top_shows. 摆脱不必要的float：right在#top_movies和#top_shows上。 You're outsmarting yourself there by floating them and then applying clearfix. 您可以通过浮动它们然后应用clearfix来使自己聪明。 :) :)
解决方案2
0 2016-06-27 23:37:52
I'am not sure what's your design idea. 我不确定您的设计思路是什么。 But on floating div's following containers are floated around the parent. 但是在浮动div上，以下容器在父容器周围浮动。 Though you have to clear them: 尽管您必须clear它们：
#newsletter {
clear: both;
}
see here ( http://codepen.io/f7o/pen/LZWZWp ) 看到这里（ http://codepen.io/f7o/pen/LZWZWp ）
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
CSS 背景颜色部分但不是页面 - CSS Background color section but not page
CSS 柔性部分背景颜色 - CSS Flex Section Background Color
HTML / CSS背景颜色 - HTML/CSS background color
Html 和 css 背景色 - Html and css background color
将HTML的一部分设置为不同的背景颜色 - Setting one Section of HTML as a Different Background Color
无法获取背景颜色以填充我页面中的正确部分（HTML / CSS） - Can't get the background color for fill in the proper section in my page (HTML/ CSS)
在HTML中使用bgcolor添加背景色 - adding background color with bgcolor in html
HTML CSS背景颜色 - HTML CSS Background-Color
输入 HTML/CSS 中的背景颜色 - Background color in Inputs HTML/CSS
将CSS链接到HTML背景颜色 - Linking CSS to HTML background color
相关标签