html - 背景图像和身体浮动不起作用
问题描述
我很困惑，而且我知道我所看到的（还）没有一个“提要”与我的问题有关。
这是我的 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 -->推荐阅读
- laravel - Laravel 5.7.13 - FirstOrCreate/FirstOrNew 不存储值
- c# - C# SSL 流 - 系统重启后出现证书错误
- python - 解压熊猫数据框字典 (1,1)
- android - 毕加索设置占位符图像而不是实际图像
- python - 按应用于索引的条件过滤行
- c# - 有没有办法从外部扫描仪输入我的二维码输入（Windows Forms C#）
- html - 在 CSS 中缩放锚标记
- xamarin - 如何使用 Shell 在 Xamarin Forms 中设置 OffscreenPageLimit？
- php - php 脚本花费的时间超过 max_execution_time
- c++ - 在 Windows 上使用 CMake 和 MinGW 链接 LLVM 库