英文:
How do I make my code look like the screenshot?
问题
I am stumped. I need help making my code look like the screenshot provided. I am using Microsoft Visual Code.
这是我目前屏幕的样子
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="zxx">
<head>
<meta charset="utf-8">
<title>College of Music</title>
<style>
/* Hex Colors: #CDC2B3, #5F3E2F, #C23315, #341C12, #D8B9AB, #862E06, #F0D1C3 */
* {margin: 0; padding: 0}
#wrapper {
width: 778px;
margin: auto;
text-align: left;
}
#header {
height:320px;
background: url(images/header.jpg)no-repeat;
}
#header div {
padding: 183px 213px 0px 82px;
}
#header p {
margin: 0px;
padding: 0px;
}
#header a {
color:#FFFFFF;
}
body {
background: #cdc2b3;
text-align: center;
margin: 0px;
padding: 20px 0px 20px 0px;
font: 15px "Georgia";
color: #5F3E2F;
}
a {
color: #5F3E2F;
font-weight: bold;
text-decoration: none;
}
a:hover {
color: #1D110B;
text-decoration: underline;
}
img {
border: 0px;
}
#header p {
font-size:18px;
font-style:italic;
color:#FFFFFF;
font-family: "Georgia";
}
#header p.more {
padding-right: 22px;
}
#nav {
width: 740px;
height: 48px;
margin: 0px 0px 0px 20px;
background-color: #c23315;
border-radius: 10px;
margin-top: 0px;
float: left;
text-align: center;
background-repeat:no-repeat;
display:inline;
float:left;
}
#nav a {
font-size: 18px;
font-style: italic;
font-family: "Georgia";
margin: 12px 0px 10px 0px;
padding: 0px 20px 0px 20px;
display:inline;
float:left;
border-right-width: 2px;
border-right-style: inset;
color: black;
}
f#nav a:hover {
color:#862e06;
text-decoration:none;
}
.lastchild {
border-right: none 0px
}
#body {
clear: both;
width: 100%;
}
#body-bot {
background: bottom url(images/foot_stretch.gif)no-repeat;
padding-top: 20px;
border: 10px;
padding: 21px 25px 15px 42px;
}
#about-box {
float: left;
width: 315px;
}
#about-box ul {
margin-left: 8px;
}
#express-box {
float: right;
width: 327px;
}
#foot {
width: 738px;
margin-left: 20px;
}
#foot-top {
background:url(images/foot_top.gif)no-repeat;
}
#foot-bot {
background:url(images/foot_bot.gif)no-repeat;
padding: 13px 21px 12px 28px;
}
#what-box {
float: left;
width: 332px;
}
#what-box img.left {
margin-left: 10px;
}
#what-box ul {
float: left;
margin-left: 2px;
width: 184px;
}
#news-box {
float: right;
width: 316px;
}
#news-box ul {
float: left;
margin-left: 2px;
width: 184px;
}
#footer {
margin: 14px;
text-align: center;
font-weight: bold;
color: black;
}
h2 {
margin: 0px;
padding: 0px 0px 10px 0px;
font-family: "Georgia";
font-size:20px;
font-style:italic;
color:#862e06;
}
h2 b{
color:#341c12;
}
ul {
margin: 0px;
padding: 0px;
}
li {
margin: 0px;
padding: 0px 0px 5px 20px;
list-style: none;
background: 0px 3px url(images/bullet.gif) no-repeat;
}
p {
margin-top: 0px;
margin-bottom: 10px;
}
div.narrow-text {
margin-right: 18px;
}
img.left {
float: left;
padding-right: 14px;
padding-bottom: 16px;
}
#body p.more {
padding-top: 6px;
}
#news-box p.more {
padding-top: 0px;
margin-top: 0px;
}
p.more {
text-align: right;
}
.clear {
clear: both;
}
td {
text-align: right;
}
table {
font-family: Georgia,;
border-collapse: separate;
width: 70%;
}
td, th {
border: 1px solid #dddddd;
text-align:
padding: 8px;
box-shadow: 1px 2px grey;
margin-right:revert;
}
tr:nth-child(even) {
background-color: #F0D1C3;
}
tr:nth-child(odd) {
background-color: white;
}
</style>
</head>
<label>Search our Site</label>
<input type="text" name="txt1">
<div id="wrapper">
<div id="header">
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div id="nav"> <a href="#">Home</a> <a href="#">About us</a> <a href="#">Services</a> <a href="#">Music</a> <a href="#">Courses</a> <a class="lastchild" href="#">Contact us</a></div>
<div id="body">
<div id="body-top">
<div id="body-bot">
<div id="about-box">
<h2><b>About</b> our music</h2>
<img src="images/pic_1.jpg" alt="Pic 1" class="left" width="112" height="92">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </li>
<li>Cras sem
<details>
<summary>英文:</summary>
I am stumped. I need help making my code look like the screenshot provided. I am using Microsoft Visual Code.
Correct Screenshot I need my code to look like
This is what my current screen looks like
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="zxx">
<head>
<meta charset="utf-8">
<title>College of Music</title>
<style>
/* Hex Colors: #CDC2B3, #5F3E2F, #C23315, #341C12, #D8B9AB, #862E06, #F0D1C3 */
* {margin: 0; padding: 0}
#wrapper {
width: 778px;
margin: auto;
text-align: left;
}
#header {
height:320px;
background: url(images/header.jpg)no-repeat;
}
#header div {
padding: 183px 213px 0px 82px;
}
#header p {
margin: 0px;
padding: 0px;
}
#header a {
color:#FFFFFF;
}
body {
background: #cdc2b3;
text-align: center;
margin: 0px;
padding: 20px 0px 20px 0px;
font: 15px "Georgia";
color: #5F3E2F;
}
a {
color: #5F3E2F;
font-weight: bold;
text-decoration: none;
}
a:hover {
color: #1D110B;
text-decoration: underline;
}
img {
border: 0px;
}
#header p {
font-size:18px;
font-style:italic;
color:#FFFFFF;
font-family: "Georgia";
}
#header p.more {
padding-right: 22px;
}
#nav {
width: 740px;
height: 48px;
margin: 0px 0px 0px 20px;
background-color: #c23315;
border-radius: 10px;
margin-top: 0px;
float: left;
text-align: center;
background-repeat:no-repeat;
display:inline;
float:left;
}
#nav a {
font-size: 18px;
font-style: italic;
font-family: "Georgia";
margin: 12px 0px 10px 0px;
padding: 0px 20px 0px 20px;
display:inline;
float:left;
border-right-width: 2px;
border-right-style: inset;
color: black;
}
f#nav a:hover {
color:#862e06;
text-decoration:none;
}
.lastchild {
border-right: none 0px
}
#body {
clear: both;
width: 100%;
}
#body-bot {
background: bottom url(images/foot_stretch.gif)no-repeat;
padding-top: 20px;
border: 10px;
padding: 21px 25px 15px 42px;
}
#about-box {
float: left;
width: 315px;
}
#about-box ul {
margin-left: 8px;
}
#express-box {
float: right;
width: 327px;
}
#foot {
width: 738px;
margin-left: 20px;
}
#foot-top {
background:url(images/foot_top.gif)no-repeat;
}
#foot-bot {
background:url(images/foot_bot.gif)no-repeat;
padding: 13px 21px 12px 28px;
}
#what-box {
float: left;
width: 332px;
}
#what-box img.left {
margin-left: 10px;
}
#what-box ul {
float: left;
margin-left: 2px;
width: 184px;
}
#news-box {
float: right;
width: 316px;
}
#news-box ul {
float: left;
margin-left: 2px;
width: 184px;
}
#footer {
margin: 14px;
text-align: center;
font-weight: bold;
color: black;
}
h2 {
margin: 0px;
padding: 0px 0px 10px 0px;
font-family: "Georgia";
font-size:20px;
font-style:italic;
color:#862e06;
}
h2 b{
color:#341c12;
}
ul {
margin: 0px;
padding: 0px;
}
li {
margin: 0px;
padding: 0px 0px 5px 20px;
list-style: none;
background: 0px 3px url(images/bullet.gif) no-repeat;
}
p {
margin-top: 0px;
margin-bottom: 10px;
}
div.narrow-text {
margin-right: 18px;
}
img.left {
float: left;
padding-right: 14px;
padding-bottom: 16px;
}
#body p.more {
padding-top: 6px;
}
#news-box p.more {
padding-top: 0px;
margin-top: 0px;
}
p.more {
text-align: right;
}
.clear {
clear: both;
}
td {
text-align: right;
}
table {
font-family: Georgia,;
border-collapse: separate;
width: 70%;
}
td, th {
border: 1px solid #dddddd;
text-align:
padding: 8px;
box-shadow: 1px 2px grey;
margin-right:revert;
}
tr:nth-child(even) {
background-color: #F0D1C3;
}
tr:nth-child(odd) {
background-color: white;
}
</style>
</head>
<label>Search our Site</label>
<input type="text" name="txt1">
<div id="wrapper">
<div id="header">
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div id="nav"> <a href="#">Home</a> <a href="#">About us</a> <a href="#">Services</a> <a href="#">Music</a> <a href="#">Courses</a> <a class="lastchild" href="#">Contact us</a></div>
<div id="body">
<div id="body-top">
<div id="body-bot">
<div id="about-box">
<h2><b>About</b> our music</h2>
<img src="images/pic_1.jpg" alt="Pic 1" class="left" width="112" height="92">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </li>
<li>Cras semper erat ut mi. </li>
<li>Proin lobortis ipsum ac erat. </li>
<li>Morbi nec enim vitae est posuere luctus.</li>
</ul>
</div>
<div id="express-box">
<h2><b>About</b> our staff</h2>
<img src="images/pic_2.jpg" alt="Pic 2" class="left" width="112" height="92">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<div class="narrow-text">
<p>Our staff all received special training from former American Idol judges!</p>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<div id="foot">
<div id="foot-top">
<div id="foot-bot">
<div id="what-box">
<table>
<td class="header" colspan="2">
<h2><b>What</b> we offer</h2>
<table>
<tr>
</tr>
<tr>
<td>Advanced Banjo</td>
<td>10,000 Bitcoins</td>
</tr>
<tr>
<td>Beginner Washboard</td>
<td>6000 Bitcoins</td>
</tr>
<tr>
<td>Whacking Paintbucktes</td>
<td>20,000 Bitcoins</td>
</tr>
<tr>
<td>Humming Annoyingly</td>
<td>50,000 Bitcoins</td>
</tr>
</table>
</div>
<div id="news-box">
<h2><b>News</b> &amp; events</h2>
<img src="images/pic_4.jpg" alt="Pic 4" class="left" width="86" height="77">
<ul>
<li><a href="#">Nullam</a> scelerisque consequat libero. </li>
<li><a href="#">Vivamus</a> mattis augue ut augue.</li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<div id="footer">
<p>© 2019 collegeofmusic.com all right reserved - Designed by Keebler Elves</p>
</div>
</div>
</html>
<!-- end snippet -->
When I added the table to "What we offer / News & Events" my table background went white and my footer box went away. Now they are stacked on top of each other. My top box where my "About our Music / About Our Staff" won't show up. My background color sits on top of the box. I am trying to make my code look like the "Correct Screenshot".
</details>
# 答案1
**得分**: 1
Your HTML is not valid.
You can test it here, for example: https://validator.w3.org/nu/#textarea
I marked it with comments in the following code block.
```html
<div id="foot">
<div id="foot-top">
<div id="foot-bot">
<div id="what-box">
<table><!-- This element is not closed, and the "tr" is missing -->
<td class="header" colspan="2"><!-- This element is not closed -->
<h2><b>What</b> we offer</h2>
<table>
<tr><!-- This element must contain "td" -->
</tr>
<tr>
<td>Advanced Banjo</td>
<td>10,000 Bitcoins</td>
</tr>
<tr>
<td>Beginner Washboard</td>
<td>6000 Bitcoins</td>
</tr>
<tr>
<td>Whacking Paintbuckets</td>
<td>20,000 Bitcoins</td>
</tr>
<tr>
<td>Humming Annoyingly</td>
<td>50,000 Bitcoins</td>
</tr>
</table>
</td>
</table>
</div>
</div>
</div>
</div>
(Note: I've added HTML tags to your code to make it more readable.)
英文:
Your HTML is not valid.
You can test it here for example: https://validator.w3.org/nu/#textarea
I marked it with comments in the following code block.
<div id="foot">
<div id="foot-top">
<div id="foot-bot">
<div id="what-box">
<table><!-- This element is not closed and the "tr" is missing -->
<td class="header" colspan="2"><!-- This element is not closed -->
<h2><b>What</b> we offer</h2>
<table>
<tr><!-- This element must contain "td" -->
</tr>
<tr>
<td>Advanced Banjo</td>
<td>10,000 Bitcoins</td>
</tr>
<tr>
<td>Beginner Washboard</td>
<td>6000 Bitcoins</td>
</tr>
<tr>
<td>Whacking Paintbucktes</td>
<td>20,000 Bitcoins</td>
</tr>
<tr>
<td>Humming Annoyingly</td>
<td>50,000 Bitcoins</td>
</tr>
</table>
</div>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论