-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