-1
我想创建一个网页显示在多列。我认为左侧的一列将包含主要内容，而右侧的一列将只是占用较少空间的其他信息。我创建了3个div部分：wrapper，main_content，侧边栏。 CSS的东西在上面，HTML在下面。由于某种原因，这是行不通的。是其他容器/元素之一，如身体或可能是文章阻止它的工作？为什么不能2列工作？
<?xml version="1.0" encoding="UTF-8"?> <!--is this necessary? was in the linktastic example-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
a:link{
color:blue; <!--is this even necessary? oesnt overide the css for OL above-->
text-decoration: none;}
a:visited{color:#silver;}
a:hover{background-color: #B5DCF5;
color:white;
text-decoration:underline;
font-weight:bold
}
#art2{
margin-top: 1.5em; <!--Interestingly, when you don't give attritbute values to this child class, it will inheir parent class attribute vals-->
}
article{
background-color: white;
width: 94%;
border: 1px solid black;
margin-bottom: .625em;
margin: auto;
<!--WHYYY?????-->
padding: 2%;
}
body{
background-color: #7eb4e9 ; <!--background color edit-->
}
caption {
display: table-caption;
font-size: 1.375em;
text-align: center;
margin-bottom: 1.5%;
}
figure{
text-align: center;
margin-right: 1.375em;
margin-left: 1.375em;
padding: 1.5%;
}
figcaption{
margin-top: 1%;
text-align: center;
font-size: 1.375em;
font-style: italic;
color: black;
}
footer{
text-align: center;
padding: 5%;
}
header {
display: block;
background-color: white;
width: 85%;
margin: auto;
}
h1{
font-size: 3.75em;
color: #FF9900 ;
font-weight: Bold;
font-variant: small-caps;
font-family: "Times New Roman", Times, serif;
font-style: normal;
text-align: center;
}
h2{
font-size: 2.5em;
color: #064E7C;
font-weight: normal;
font-variant: small-caps;
font-family: "Times New Roman", Times, serif;
font-style: normal;
text-align: center;
}
img {
border: .5em solid #ddd;
border-radius: .5em;
padding: .938em;
width: 56.25em;
height: 18.75em;
}
#navlist
{
border-bottom: 1px solid #FFCC66;
border-top: 1px solid #FFCC66;
margin-bottom: 1.875em;
padding-left: 5.25em;
padding-right: 5.25em;
background-color: #FF9900;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 1.62em;
padding-bottom: 0.1875em;
padding-top: 0.1875em;
}
#navlist a, #navlist a:link, #navlist a:visited
{
border: 1px solid #FF9900;
padding: 1px;
padding-left: 0.5em;
padding-right: 0.5em;
color: #064E7C;
font-weight: bold;
text-decoration: none;
}
#navlist a:hover, #navlist a:active, #navlist a:focus
{
border: 0.0625em solid #000000;
padding: 0.0625em;
padding-left: 0.5em;
padding-right: 0.5em;
text-decoration: none;
}
#navlist li
{
padding-right: 0.0625em;
display: inline;
font-size: 0.5em;
}
#navlist ul
{
margin: 0em;
padding: 0em;
}
#navlist #active a { background-color: #FFCC66; }
ol{font-size: 1.25em;
color: #064E7C;
margin-left: 5%;
}
p{
font-size: 1.15em;
color: black;
font-weight: normal;
font-variant: normal;
font-family: "Verdana";
font-style: normal;
margin-right: 1.875em;
margin-left: 1.875em;
padding: 1.5%;
}
p.date{<!--only affects paragraphs with class "date"-->
font-size: 0.9375em;
color: grey;
font-weight: normal;
font-variant: normal;
font-family: "Times New Roman", Times, serif;
font-style: italic;
margin-right: 1.875em;
margin-left: 1.875em;
}
table{
background-color: #B5DCF5;
font-family: arial;
height: 15.625em;
width: 68%;
border: 0.125em solid #064E7C;
border-spacing: .312em;
margin-left:15%;
margin-right:15%;
margin-bottom: 5%;
text-align: center;
padding: 2.5%;
}
th{background-color: silver;}
td{background-color: white;}
#wrapper{ width: 900px;
height: 100%;
margin-left: auto;
margin-right: auto;}<!--if not needed delete-->
#wrapper #main_content{
width: 300px;
float: left;
}
#wrapper #sidebar {
width: 600px;
float: right;
}
</style>
<title> Jigme's Blog </title>
</head>
<body>
<header>
<h1>Mechanics of a Perfect Jumpshot!</h1>
</header>
<hr />
<!--horizontal line-->
<figure>
<img src="collagepic.jpg" alt="feet"><!--do CSS-->
<figcaption>
Break down of Chef Curry's perfect shot (photo edited via ed)
</figcaption>
</figure>
<article>
<nav>
<ul id="navlist">
<li id="active"><a href="homepage.html" id="current">Home </a></li>
<!--shows current page ur on-->
<li><a href="page1.html">The Base </a></li>
<li><a href="page2.html">Shoulder Alignment </a></li>
<li><a href="page3.html">BallPlacement </a></li>
<li><a href="page4.html">Elbows In </a></li>
<li><a href="page5.html">The Arc </a></li>
</ul>
</nav>
<br>
<br>
<div id="wrapper">
<div id="main_content">
<!--each blog post must be enclosed with article tag-->
<h2>Introduction</h2>
<p class="date">Article by: Jigme Ritzekura, Updated: Sept. 06, 2016 - 08:05 am</p>
<p>
To master the "perfect jumpshot", one must have a good grasp of the basic mechanics of shooting a basketball first. On this site,
we will break the jumpshot into 5 foundational components and elaborate on them. These include:
</p>
<ol>
<li>The Base</li>
<li>Shoulder Alignment</li>
<li>Ball Placement</li>
<li>Elbows In</li>
<li>The Arc</li>
</ol>
<p>
If you really want to improve your shooting accuracy, merely
knowing how to shoot is not enough. You must go out and implement these methods and allow your muscle memory to kick in. In due time,
you will see significant improvement. For example, check out the before and after statistics of John Roberts below (all shots were
taken from the free-throw range):
</p>
<table summary="This table shows the shooting statistics of player before learning the 5 methods for success. ">
<thead>
<caption>Before applying the methods</caption>
<tr>
<th>Distance From Basket</th>
<th>Shot Attempts</th>
<th>Shot Made</th>
<th>FG %</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4"><strong>*** (Total FG% Accuracy: 50%) </strong></td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Free Throw</td>
<td>100</td>
<td>65</td>
<td>65%</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Three Point</td>
<td>100</td>
<td>35</td>
<td>35%</td>
</tr>
</tbody>
</table>
<table summary="This table shows the shooting statistics of player before learning the 5 methods for success. ">
<thead>
<caption>After applying the methods</caption>
<tr>
<th>Distance From Basket</th>
<th>Shot Attempts</th>
<th>Shot Made</th>
<th>FG %</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="5"><strong>*** (Total FG% Accuracy: 64%) </strong></td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Free Throw</td>
<td>100</td>
<td>80</td>
<td>80%</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Three Point</td>
<td>100</td>
<td>48</td>
<td>48%</td>
</tr>
</tbody>
</table>
</p>
</article>
<article id="art2">
<p> Now that you are convinced, you can learn more about each segments in more detail in the links below:
<nav>
<ul>
<li><a href="page1.html">The Base</a></li>
<li><a href="page2.html">Shoulder Alignment</a></li>
<li><a href="page3.html">Ball Placement</a></li>
<li><a href="page4.html">Elbows In</a></li>
<li><a href="page5.html">The Arc</a></li>
</ul>
</nav>
</p>
</article>
</div><!--closing tag for "#main_content"" -->
<div id="sidebar">
<article>
<p>
Hello, this is the side bar of the webpage. In here will contain information about subscribing to our page
by submitting your contact info. Look out for more materials!
</p>
</article>
</div><!--closing tag for ""#sidebar""-->
<br>
<br>
</div> <!--closing tag for "#wrapper"-->
<footer>
<small>Copyrights 2016 - Jigme </small>
</footer>
</body>
</html>
替换所有'“'和'”'的'“'和在你的文本编辑器中禁用了智能引号 – Xufox
你在'margin-right auto;'忘记了一个冒号;' – Xufox
投票关闭作为错字？ – LGSon