/* Don't erase box-sizing */
*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-box-sizing: border-box;
}
/* Don't erase .group */
.group:after {
content: "";
display: table;
clear: both;
}
body {
background: #cccccc;
font-family: Helvetica, Arial, Sans-serif;
line-height: 1.5em;
font-size: 14px;
color: #666666;
margin: 0;
}
a{
color: #f58220;
}
#main_wrapper{
width: 960px;
margin: 0 auto;
}
header {
background: #333333;
padding: 30px 0 0 0;
}
.logo a{
display: block;
width: 133px;
height: 46px;
background: url(http://www.teamusa.org/~/media/USA_Fencing/Logo/Nike-Fencing.png?la=en);
background-repeat: no-repeat;
background-size: 100% 100%;
text-indent: -9999px;
margin: 0 0 25px 20px;
}
.primary ul {
background: #666666;
}
.primary ul li {
float: left;
border-right: 1px solid #333333;
}
.primary ul li a {
display: block;
padding: 20px;
color: #ffffff;
}
.content_wrap {
background: e5e5e5;
}
#main_content {
background: #ffffff;
float: left;
width: 660px;
}
aside {
width: 300px;
background: #e5e5e5;
float: right;
}
footer {
clear: both;
background: #333333;
height: 50px;
}
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}<!DOCTYPE HTML}>
<html>
<head>
<title>Yonsei Fencing</title>
<link rel="stylesheet" href="reset.css" type="text/css"/>
<link rel="stylesheet" href="index5.css" type="text/css"/>
</head>
<body>
<div id="main_wrapper">
<header>
<h1 class="logo"><a href="#" title="cool image">This is an image</a></h1>
<nav class="primary">
<ul class="group">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</nav>
</header><!--end header-->
<div class="content_wrap" group>
<section id="main_content">
<article class="posts"><img class="thumbnail" src="#" alt="thumbnail">
<div>
<h1><a href="#" title="">This is a Lorem Ipsum Heading</a></h1>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<a href="#" title="readmore">Read More</a>
</div>
</article>
<article class="posts"><img class="thumbnail" src="#" alt="thumbnail">
<div>
<h1><a href="#" title="">This is a Lorem Ipsum Heading</a></h1>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<a href="#" title="readmore">Read More</a>
</div>
</article>
<article class="posts"><img class="thumbnail" src="#" alt="thumbnail">
<div>
<h1><a href="#" title="">This is a Lorem Ipsum Heading</a></h1>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<a href="#" title="readmore">Read More</a>
</div>
</article>
<article class="posts"><img class="thumbnail" src="#" alt="thumbnail">
<div>
<h1><a href="#" title="">This is a Lorem Ipsum Heading</a></h1>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<a href="#" title="readmore">Read More</a>
</div>
</article>
<article class="posts"><img class="thumbnail" src="#" alt="thumbnail">
<div>
<h1><a href="#" title="">This is a Lorem Ipsum Heading</a></h1>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<a href="#" title="readmore">Read More</a>
</div>
</article>
</section><!--end main_content-->
<aside>
<div class="side_box">
<h2 class="sidebar_heading">Sidebar Links</h2>
<ul>
<li><a href="#" title="">Link 1</a></li>
<li><a href="#" title="">Link 2</a></li>
<li><a href="#" title="">Link 3</a></li>
<li><a href="#" title="">Link 4</a></li>
</ul>
</div><!--end sidebox-->
<div class="side_box">
<h2 class="sidebar_heading">Text Widget</h2>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </br></br>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div><!--end sidebox-->
</aside><!--end sidebar-->
</div><!--end content wrap-->
<footer>
<small>Copyright <a href="#">WebSite.</a> All rights reserved.</small>
</footer>
</div>
</body>
</html>你好，这里是初学者。
我的 CSS 重置 ( http://meyerweb.com/eric/tools/css/reset/ ) 位于单独的样式表(我在此处组合了两个 CSS 样式表)似乎通过禁用我 Logo 周围标题上的黑色背景颜色来干扰我的主样式表。 body 中的 font-size 和 line-height 也不会改变。此外，“.group:after” ( https://css-tricks.com/snippets/css/clear-fix/ ) 应该填补我的侧边栏中缺失的背景颜色间隙，但仍然留有空白空间...
帮忙吗？
最佳答案
header 选择器中的 background 属性后缺少分号。
关于html - CSS Reset 干扰主 CSS 样式表，clearfix 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36249903/