所以我在udemy上编写一个关于在CSS3和HTML5中编写PSD页面模型的课程。一切进展顺利，然后当我开始布置侧边栏时，我的布局崩溃了，多个物体出现不合适。没有div位于正确的位置，内容遍布整个页面，颜色显示不正确。一般来说，它似乎已经破裂了，我无法回到它需要的地方。
演示JSFiddle：http://jsfiddle.net/4fT7R/
<head>
<title>Gyeahhhh and shit...</title>
<link href="styles/normalize.css" rel="stylesheet" type="text/css" media="screen">
<link href="styles/style.css" rel="stylesheet" type="text/css" media="screen">
</head>
<body>
<header>
<div class="container clearfix">
<a id="logo" href="/" title="Return to Home">
<img src="images/logo.gif" alt="Logo">
</a>
<nav>
<ul>
<li><a href="">About</a></li>
<li><a href="">Services</a></li>
<li class="last-link"> <a href="">Contact</a></li>
</ul>
</nav><!-- end nav -->
</div><!-- end container -->
<div id="hero">
<div class="container clearfix">
<div id="hero-title">
<h1>Really big title 2.0</h1>
<h2>Simple, yet engaging and descriptive subtitle</h2>
<div id="call-to-action">
<a href="" class="btn btn-large">Primary call to action</a>
<a href="" class="btn btn-secondary">Secondary action</a>
</div><!-- end call-to-action -->
</div><!-- end hero-title -->
<img src="images/computer.png" alt="large desktop computer" id="hero-image">
</div><!-- end container -->
</div><!-- end hero -->
</header>
<div id="content" class="container clearfix">
<section id="column-content">
<div id="lead-in">
<h3>PSD to HTML5 & CSS3</h3>
<p class="lead">Etiam porta sem malesuada magna mollis euismod. Nulla vitae elit libero, a pharetra augue.
Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo.</p>
</div><!-- end lead-in -->
<div class="column four">
<img src="images/puppy.jpg" alt="puppy">
<h4>A Cute Puppy</h4>
<p>Maecenas faucibus mollis interdum. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
</div><!-- end column -->
<div class="column four">
<img src="images/crazy_dog.jpg" alt="puppy">
<h4>Crazy Dog</h4>
<p>Maecenas faucibus mollis interdum. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
</div><!-- end column -->
<div class="column four last">
<img src="images/husky.jpg" alt="A beautiful husky staring off into the distance">
<h4>A Beautiful Husky</h4>
<p>Maecenas faucibus mollis interdum. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
</div><!-- end column -->
</section><!-- end column content -->
<aside>
<div class="widget">
<h4>Latest News</h4>
<h5>Dec 02 2013 </h5>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
</div><!-- end widget -->
<div class="widget second-widget">
<h4>Follow Us</h4>
<div id="social-links">
<a href="http://www.twitter.com" target="_blank"> <img src="images/social_twitter.gif" alt="Follow us on Twitter"></a>
<a href="http://www.facebook.com" target="_blank"> <img src="images/social_facebook.gif" alt="Follow us on Facebook"></a>
<a href="http://www.youtube.com" target="_blank"> <img src="images/social_youtube.gif" alt="Follow us on YouTube"></a>
</div>
</div><!-- end widget -->
</aside><!--end aside -->
</div><!-- end CONTENT -->
<div id="secondary-cta" class="container clearfix">
<h4>Keep up to date with the latest news from our company</h4>
<form>
<input type="email" placeholder="Enter your email here">
<input type="submit" class="btn btn-small" value="Sign up">
</form>
</div><!-- end secondary-cta -->
<footer>
<div id="footer" class="container clearfix">
<p id="copyright">Copyright © 2014 Gyeeahhh Enterprises</p>
<nav>
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Services</a></li>
<li><a href="">Contact</a></li>
</ul>
</nav><!-- end footer nav -->
</div><!-- end footer -->
</footer>
</body>
/* -----------------------------------------------------------------------------------------------
General Styles
----------------------------------------------------------------------------------------------- */
html {
-webkit-font-smoothing: antialiased;
text-rendering: optimizelegibility;
}
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 20 px;
color: #444444;
}
/* -----------------------------------------------------------------------------------------------
Typography
----------------------------------------------------------------------------------------------- */
h1, h2, h3 {
font-weight: 300;
margin: 0;
line-height; 45px;
}
h4, h5, h6 {
font-weight: bold;
margin: 5px 0 5px 0 /* top-right-bottom-left */
}
h1 {
font-size: 48px;
}
h2 {
font-size: 24px;
}
h3 {
font-size: 30px;
}
h4 {
font-size: 18px;
margin: 10px 0 /* if top/bottom and right/left are the same, then top/bottom - left/right */
}
h5 {
font-size: 13px;
margin: 0;
text-transform: uppercase;
}
p {
margin: 0 0 10px 0; /* top-right-bottom-left */
}
p.lead {
font-size: 18px;
font-weight: 300;
line-height: 24px;
}
/* -----------------------------------------------------------------------------------------------
Layout
----------------------------------------------------------------------------------------------- */
.container {
width: 940px;
padding: 0 10px; /* actual width=960px */
margin: 0 auto; /* sets containers to center content despite screen size */
}
header {
background: #000; /* if a color code is six of the same number, you can use shorthand and only put the first 3 - i.e. #000 = #000000 */
}
#logo {
display: block; /* there are two main types of elements...block and inline. block level elements
span the entire width of its container. inline elements are the width of the
element itself. images are block level, links are inline. */
padding: 17px 0; /* you can select a specific margin i.e. top or left */
float: left;
}
#hero {
background: #00c0ff;
color: #000;
}
#hero-title {
width: 520px;
padding: 60px 0;
float: left;
}
#call-to-action {
margin: 40px 0;
}
#hero-image {
float: right;
margin: 10px 0 -30px 0;
}
#lead-in {
margin-bottom: 30px;
}
#content {
padding: 100px 0;
}
#column-content {
width: 700px;
float: left;
}
/* -----------------------------------------------------------------------------------------------
Sidebar
-----------------------------------------------------------------------------------------------*/
aside {
background: #444;
width: 160px; /* 220px with 60px of left and right padding */
color: #fff;
float: left;
margin-left: 20px;
padding: 30px;
font-size: 12px;
line-height: 18px;
}
aside .widget {
margin: 10px 0;
}
aside .second-widget {
margin-top: 40px;
}
#social-links {
margin-top: 10px;
}
/* -----------------------------------------------------------------------------------------------
Navigation
----------------------------------------------------------------------------------------------- */
/* nav ul is an example of selecting a parent and its child...refer to HTML */
nav ul {
margin: 0;
padding: 0;
float: right;
}
nav ul li {
list-style: none;
float: left; /* css-tricks.com/all-about-floats for more */
}
header nav ul li a {
display: block;
color: #fff;
text-decoration: none;
font-weight: bold;
padding: 20px;
border-left: solid 1px #333;
}
header nav ul li a:hover {
background: #222;
}
header nav ul li a:active {
-webkit-box-shadow: 0 0 5px rgba(0 ,0, 0, 0.8) inset; /* for Safari/Chrome */
-moz-box-shadow: 0 0 5px rgba(0 ,0, 0, 0.8) inset; /* for Firefox */
-box-shadow: 0 0 5px rgba(0 ,0, 0, 0.8) inset; /* fallback */
}
.last-link {
border-right: solid 1px #333;
}
aside .widget h4 {
font-weight: 200;
font-size: 20px;
margin: 0 0 10px; /* top --> right and left --> bottom */
}
aside .socials a {
position: relative;
aside .socials a:hover {
position: relative;
top: -1px;
}
/* -----------------------------------------------------------------------------------------------
Buttons
-------------------------------------------------------------------------------------------------*/
.btn {
width: auto;
background: #0090bf;
border: 1px solid #1e728c;
color: #fff;
cursor: pointer;
display: inline-block; /* IE7 inline-block fix */
zoom: 1;
*display: inline;
margin: 0;
outline: none;
padding: 10px 20px 11px;
position: relative;
text-align: center;
text-decoration: none;
/* button shadows */
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
/* CSS3 transitions */
-webkit-transition: background-color 0.15s ease-in-out
-moz-transition: background-color 0.15s ease-in-out
-o-transition: background-color 0.15s ease-in-out
transition: background-color 0.15s ease-in-out
}
.btn:hover {
color: #fff;
background-color: #0086b2;
}
.btn:active {
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2) inset;
color: #fff;
}
.btn-large {
padding: 20px 30px;
font-size: 24px;
font-weight: 200;
}
.btn-secondary {
font-size: 20px;
}
.btn-secondary:hover {
text-decoration: underline;
}
.btn-secondary:active {
position: relative;
top: 1px;
}
.btn-secondary, .btn-secondary:hover, .btn-secondary:active {
background: none;
border: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
/* -----------------------------------------------------------------------------------------------
Global Styles
--------------------------------------------------------------------------------------------------- */
.column {
float: left;
margin-right: 20px;
}
.four {
width: 220px;
}
.last {
margin-right: 0;
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1; /* for IE6/7 (trigger hasLayout) */
}
答案 0 :(得分：9)
你提到事情突然崩溃了。任何一个有效的CSS规则只会影响某些事情，所以当由于单个更改而出现多个问题时，我倾向于首先查看拼写错误：缺少括号和缺少分号。
这是你的罪魁祸首。主要问题是你缺少一个结束括号，导致很多CSS没有被应用。还有一些缺失的分号会导致某些次要影响无法应用于某些浏览器。
aside .socials a {
position: relative;
aside .socials a:hover {
position: relative;
top: -1px;
}
aside .socials a {
position: relative;
}
aside .socials a:hover {
position: relative;
top: -1px;
}
header nav ul li a:active {
-webkit-box-shadow: 0 0 5px rgba(0 ,0, 0, 0.8) inset; /* for Safari/Chrome */
-moz-box-shadow: 0 0 5px rgba(0 ,0, 0, 0.8) inset; /* for Firefox */
-box-shadow: 0 0 5px rgba(0 ,0, 0, 0.8) inset; /* fallback */
}
box-shadow没有-）header nav ul li a:active {
-webkit-box-shadow: 0 0 5px rgba(0 ,0, 0, 0.8) inset; /* for Safari/Chrome */
-moz-box-shadow: 0 0 5px rgba(0 ,0, 0, 0.8) inset; /* for Firefox */
box-shadow: 0 0 5px rgba(0 ,0, 0, 0.8) inset; /* fallback */
}
-webkit-transition: background-color 0.15s ease-in-out
-moz-transition: background-color 0.15s ease-in-out
-o-transition: background-color 0.15s ease-in-out
transition: background-color 0.15s ease-in-out
-webkit-transition: background-color 0.15s ease-in-out;
-moz-transition: background-color 0.15s ease-in-out;
-o-transition: background-color 0.15s ease-in-out;
transition: background-color 0.15s ease-in-out;
任何时候一切都一下子乱了，要怀疑错别字......特别是缺少括号。