我非常困惑，我知道我尚未看到（但至今）与我的问题有关的“提要”。
这是我的HTML代码：
<html>
<head>
<title>
Creating a Proper HTML/PHP/CSS Project
</title>
<!-- Links to jQuery and JavaScript files -->
<script src="js/jquery-1.4.1.js" type="text/javascript"></script>
<!-- Links to external CSS stylesheets -->
<link href="css/styles.css" rel="stylesheet" type="text/css"/>
<!-- Internal Styles (if necessary) -->
<style>
/* Internal styles go here */
</style>
<!--[if IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="page">
<header>
<h1>Learning to Build a Proper Web Site with HTML, PHP, and CSS</h1>
<nav>
<ul>
<li><a href="#" class="current">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Lessons</a></li>
<li><a href="#">References</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Donate</a></li>
</ul>
</nav>
</header>
<section class="content">
<article>
<figure>
<img src="img/html.jpg" alt="Client-side Programming" class="article_img">
<figcaption>
Client-side Programming
</figcaption>
</figure>
<hgroup>
<h2>What is Client-side Programming?</h2>
<h3>And Client-side Languages</h3>
</hgroup>
<script type="text/javascript">
/* window.onload = function() {
if (window.jQuery) {
// jQuery is loaded
alert("Yeah!");
} else {
// jQuery is not loaded
alert("Doesn't Work");
}
} CHECKS TO SEE IF JQUERY IS LOADED */
$('button').click(function() {
$('#hide').show(fast);
});
</script>
<button>Click</button>
<p id="hide" style="display: none;">Hide this text by pushing the button</p>
<p class="indent">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</article>
<article>
<figure>
<img src="img/php.jpg" alt="Server-side Programming" class="article_img">
<figcaption>
Server-side Programming
</figcaption>
</figure>
<hgroup>
<h2>Article 2</h2>
<h3>Subtitle</h3>
</hgroup>
<p class="indent">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</article>
</section> <!-- End content section -->
<aside>
<section class="popular-topic">
<h2>Topic Tops</h2>
<a href="#">Lesson 1: Editor, IDE, and the "Hello, World" program (FRONTEND)</a>
<a href="#">Lesson 2: Linking to CSS and JS files (FRONTEND)</a>
<a href="#">Lesson 3: Server-side scripts and MySQL (BACKEND)</a>
<a href="#">Lesson 4: PROJECT! CREATE A SOCIAL MEDIA PLATFORM! (BACK- AND FRONTEND) </a>
<p>So who's ready to embark on the journey of a lifetime? These lessons, realistically, are designed for those just starting out with code, and those who are still learning. If you are a know-it-all yuppy, please move to the next site. Thanks!</p>
</section>
<section class="popular-topic">
<h2>Topic Tops</h2>
<p>Paragragh</p>
</section>
</aside>
<footer>
© 2020 | Magdi Kanaan | Free Coding Lessons
</footer>
</div> <!-- End page div -->
</body>
</html>
<?php
//TODO, Separate header and footer into respective php files. (i.e. header.php and footer.php)
?>
这是我的CSS代码：
/* STYLES - CSS File */
header, section, footer, aside, nav, article, figure, figcaption {
display: block;
}
body {
color: #666666;
background-color: #f9f8f6;
background: url("img/bg.jpg");
background-position: center;
font-family: Georgia, Times, serif;
line-height: 1.4em;
margin: 0px;
}
.page {
width: 940px;
margin: 20px auto 20px auto;
border: 2px solid #000000;
background-color: #ffffff;
overflow: auto;
}
header {
height: 160px;
/* background-image: url('img/#.jpg') */
}
h1 {
/* text-indent: -9999px; */
width: 940px;
height: 130px;
margin: 0px;
}
nav, footer {
clear: both;
color: #ffffff;
background-color: #aeaca8;
height: 30px;
}
nav ul {
margin: 0px;
padding: 5px 0px 5px 30px;
}
nav li {
display: inline;
margin-right: 40px;
}
nav li a {
color: #ffffff;
}
nav li a:hover, nav li a.current {
color: #000000;
}
section.content {
float: left;
width: 659px;
border-right: 1px solid #eeeeee;
}
article {
clear: both;
overflow: auto;
width: 100%;
}
.article_img {
width:300px;
height: 200px;
}
hgroup {
margin-top: 40px;
}
figure {
float: left;
width: 290px;
height: 220px;
padding: 5px;
margin: 20px;
border: 1px solid #eeeeee;
}
figcaption {
font-size: 90%;
text-align: left;
}
aside {
width: 230px;
float: left;
padding: 0px 0px 0px 20px;
}
aside section a {
display: block;
padding: 10px;
border-bottom: 1px solid #eeeeee;
}
aside section a:hover {
color: #985d6a;
background-color: #efefef;
}
a {
color: #de6581;
text-decoration: none;
}
h1, h2, h3 {
font-weight: normal;
}
h2 {
margin: 10px 0px 5px 0px;
padding: 0px;
}
h3 {
margin: 0px 0px 10px 0px;
color: #de6581;
}
aside h2 {
padding: 30px 0px 10px 0px;
color: #de6581;
}
footer {
font-size: 80%;
padding: 7px 0px 0px 20px;
}
我的布局应该看起来像这样，（（我可以补充一下，我是直接从编码书中得到这段代码的，因此它不起作用！！另一不可思议的事情是我的jQuery已加载，但不起作用... hmmm。绝对错误）：
但是我必须说，我使用的标题img和背景img与“期望的效果” img中的不同。
简而言之，正文不会“中心距”（保证金：0自动），并且我的背景网址（正确！）将不会显示！为什么？我很困惑。
您的jQuery无法正常工作，因为您缺少show参数周围的引号。
这是我发现的第一个不匹配：