我很困惑，我知道我见过的(尚未(与我的问题无关的"提要"。
这是我的HTML代码：
<!DOCTYPE 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已加载，但不起作用。肯定有问题。
但我必须说，我使用的标题图像和背景图像与"所需效果"图像中的图像不同。
简而言之，正文不会"中心边距"(margin: 0 auto(，我的背景网址(正确(也不会显示。为什么？我很困惑。
你的jQuery不起作用，因为你在show参数两边缺少引号。
$('button').click(function() {
$('#hide').show("fast");
});
我用占位符替换了您的图像，这很有效。也许再次检查你的路径。
$('button').click(function() {
$('#hide').show("fast");
});/* STYLES - CSS File */
header,
section,
footer,
aside,
nav,
article,
figure,
figcaption {
display: block;
}
body {
color: #666666;
background-color: #f9f8f6;
background: url("https://via.placeholder.com/500");
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;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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="https://via.placeholder.com/500" 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); // Missing quotation marks around 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="https://via.placeholder.com/500" 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 -->这是我注意到的第一个不匹配：
<div id="page">
.page {
在 CSS 中，您可以像这样设置id="page"样式：
#page {