背景图片和 body 浮动不起作用
background image and body float not working
我很困惑，我知道 none 我所看到的“提要”与我的问题有关。
这是我的 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;
}
我的布局应该是这样的：
Desired Effect
我直接从编码书上得到这段代码，但不知何故它不起作用！另一件奇怪的事情是我的 jQuery 已加载，但无法正常工作。肯定有问题。
但我必须说，我使用的 header 图片和背景图片与“所需效果”图片中的不同。
简而言之，body 不会显示“center-margin”（margin: 0 auto），我的背景 url（正确）也不会显示。为什么？我很困惑。
您的 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 {
我很困惑，我知道 none 我所看到的“提要”与我的问题有关。
这是我的 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;
}
我的布局应该是这样的：
Desired Effect
我直接从编码书上得到这段代码，但不知何故它不起作用！另一件奇怪的事情是我的 jQuery 已加载，但无法正常工作。肯定有问题。
但我必须说，我使用的 header 图片和背景图片与“所需效果”图片中的不同。
简而言之，body 不会显示“center-margin”（margin: 0 auto），我的背景 url（正确）也不会显示。为什么？我很困惑。
您的 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 {