So I'm doing a class on udemy on coding a PSD page mockup in CSS3 and HTML5. Everything was going well, and then when I started laying out the sidebar, my layout collapsed, with multiple objects appearing out of place. None of the divs are in the right places, content is scattered all over the page, colors aren't appearing correctly. In general, it seems broken, and I can't get it back to where it needs to be.
所以我正在为udemy做一个关于在CSS3和HTML5中编写PSD页面模型的课程。一切进展顺利,然后当我开始布置侧边栏时,我的布局崩溃了,多个物体出现不合适。没有div在正确的位置,内容遍布整个页面,颜色没有正确显示。一般来说,它似乎已经破碎,我无法将其恢复到需要的位置。
Demo JSFiddle: http://jsfiddle.net/4fT7R/
演示JSFiddle:http://jsfiddle.net/4fT7R/
HTML:
<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>
CSS:
/* -----------------------------------------------------------------------------------------------
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) */
}
1 个解决方案
#1
9
What's Going On
You mentioned that things all fell apart suddenly. Any one valid CSS rule is only going to affect certain things, so when multiple problems occur due to a single change, I tend to look first for typos: Missing brackets and Missing semi-colons.
你提到事情突然崩溃了。任何一个有效的CSS规则只会影响某些事情,所以当由于单个更改而出现多个问题时,我倾向于首先查看拼写错误:缺少括号和缺少分号。
Those are your culprit here. The main problem is that you are missing a closing bracket, which is causing much of the CSS to not be applied. There are also a few missing semi-colons which are causing some minor effects to not be applied on certain browsers.
那些是你的罪魁祸首。主要问题是你缺少一个结束括号,这导致很多CSS没有被应用。还有一些缺失的分号会导致某些次要影响无法应用于某些浏览器。
Code
Current:
aside .socials a {
position: relative;
aside .socials a:hover {
position: relative;
top: -1px;
}
Correct: (Missing Closing Bracket)
aside .socials a {
position: relative;
}
aside .socials a:hover {
position: relative;
top: -1px;
}
Current:
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 */
}
Correct: (box-shadow doesn't have a -)
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 */
}
Current:
-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
Correct:
-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;
Summary
Any time everything goes haywire all at once, be suspicious for typos ... especially missing brackets.
任何时候一切都一下子乱了,要怀疑错别字......特别是缺少括号。
#1
9
What's Going On
You mentioned that things all fell apart suddenly. Any one valid CSS rule is only going to affect certain things, so when multiple problems occur due to a single change, I tend to look first for typos: Missing brackets and Missing semi-colons.
你提到事情突然崩溃了。任何一个有效的CSS规则只会影响某些事情,所以当由于单个更改而出现多个问题时,我倾向于首先查看拼写错误:缺少括号和缺少分号。
Those are your culprit here. The main problem is that you are missing a closing bracket, which is causing much of the CSS to not be applied. There are also a few missing semi-colons which are causing some minor effects to not be applied on certain browsers.
那些是你的罪魁祸首。主要问题是你缺少一个结束括号,这导致很多CSS没有被应用。还有一些缺失的分号会导致某些次要影响无法应用于某些浏览器。
Code
Current:
aside .socials a {
position: relative;
aside .socials a:hover {
position: relative;
top: -1px;
}
Correct: (Missing Closing Bracket)
aside .socials a {
position: relative;
}
aside .socials a:hover {
position: relative;
top: -1px;
}
Current:
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 */
}
Correct: (box-shadow doesn't have a -)
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 */
}
Current:
-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
Correct:
-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;
Summary
Any time everything goes haywire all at once, be suspicious for typos ... especially missing brackets.
任何时候一切都一下子乱了,要怀疑错别字......特别是缺少括号。