2
我最近註冊了一門網絡課程。目前正在學習HTML5和CSS。我必須製作3個網頁;主要關於我和業餘愛好。我根據他們給我的規格創造了很多，但我有一個問題;某些內容不顯示其應該在的位置。我試過position：relative，position：absolute等，並使用bottom：500px等修改它的位置，但它看起來不正確。例如，在下面的代碼中，這是我的「關於我」頁面。側面的圖片目前沒有正確對齊主文章的頂部。圖片除了主要文章是正確的，但它的位置稍低。這發生在我的網頁上的表格元素..如何在標題下的網頁上對齊內容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>About Me</title>
<link property="stylesheet" rel ="stylesheet" href="cascadingstylesheet.css"/>
<!--[if lt IE 9]>
<script src="hpp://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
</head>
<body>
<header>
<h1>About Me</h1>
<nav>
<ul>
<li><a href="Main">Main</a></li>
<li><a href="About me">About me</a></li>
<li><a href="Hobbies.html">Hobby</a></li>
</ul>
</nav>
</header>
<hr>
<main>
<!--
Below I have used the article tag and the section tag. The article tag is nested inside
the section tag. This is because section tags are used to group related elements together
and the 3 articles are related since they contain information about me.
I didn't include one article tag because the articles are distinct from one another. E.g. One of the
article contains the types of mototbikes but another article tells the user information about me. !-->
<section title="border" id="aboutArticle">
<article><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet bibendum ex. Phasellus eget placerat nisi. Curabitur scelerisque condimentum vulputate. Nullam mollis mauris vel porttitor fringilla. Cras risus erat, feugiat non aliquet sit amet, molestie nec magna. Phasellus eleifend a ligula et consectetur. Fusce et malesuada sem. Donec lacinia tortor urna, eu semper metus volutpat non. Phasellus sed sapien commodo ipsum faucibus dictum rhoncus in est. Vestibulum porta metus pulvinar, ornare quam a, tristique nisl. Nullam euismod neque est, at tincidunt nunc tincidunt a. Aenean ullamcorper tincidunt congue.</p></article>
<br>
<article><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet bibendum ex. Phasellus eget placerat nisi. Curabitur scelerisque condimentum vulputate. Nullam mollis mauris vel porttitor fringilla. Cras risus erat, feugiat non aliquet sit amet, molestie nec magna. Phasellus eleifend a ligula et consectetur. Fusce et malesuada sem. Donec lacinia tortor urna, eu semper metus volutpat non. Phasellus sed sapien commodo ipsum faucibus dictum rhoncus in est. Vestibulum porta metus pulvinar, ornare quam a, tristique nisl. Nullam euismod neque est, at tincidunt nunc tincidunt a. Aenean ullamcorper tincidunt congue.</p> </article>
<br>
<article><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet bibendum ex. Phasellus eget placerat nisi. Curabitur scelerisque condimentum vulputate. Nullam mollis mauris vel porttitor fringilla. Cras risus erat, feugiat non aliquet sit amet, molestie nec magna. Phasellus eleifend a ligula et consectetur. Fusce et malesuada sem. Donec lacinia tortor urna, eu semper metus volutpat non. Phasellus sed sapien commodo ipsum faucibus dictum rhoncus in est. Vestibulum porta metus pulvinar, ornare quam a, tristique nisl. Nullam euismod neque est, at tincidunt nunc tincidunt a. Aenean ullamcorper tincidunt congue.</p>
<p>This blog was created on
<time datetime="10-10-2015 20:00">
the 10th of October 2015.</time></p>
<section>
<img id="motorbikePic" width="350" alt="Harley Davidson Logo "src="http://media1.santabanta.com/full5/Bikes/Harley%20Davidson/harley- davidson-82a.jpg"></img>
</section>
</article>
</section>
<!--
I have used the aside tag on my About page. Inside the tag there are images containing my
favourite types of cars. I did not include it in the article tag above because it's not necessarily
related to it since I said I like motobikes and not muscle cars.!-->
<aside title="cars">
<h3>My favourite cars:</h3>
<img src="http://gas2.org/wp-content/uploads/2014/07/challenger-hellcat.png" width="300" alt="Dodge Hellcat">
<br>
<img src="http://cartype.com/pics/6596/full/ford_mustang_shelby_gt500_f1_10.jpg" width="300" alt="Ford Shelby GT500">
<br>
<img src="http://www.forodefotos.com/attachments/chevrolet/14617d1289420971- camaro-2010-camaro-2010.jpg" alt="Chevrolet Camero" width="300">
</aside>
</main>
<!--
Footer tag is used at the bottom of the page since it more appropriate to use it at the bottom since
you are given more options such as contacting the web developer, in this case it is me.
!-->
<footer>
<hr>
<p>To get in touch with me you can click below:</p>
<a href="mailto:[email protected]">Click to email me!</a>
</footer>
</body>
</html>
這是我的CSS。我的CSS包含了其他頁面的一些規則，所以我粘貼了相關的規則，這樣你們就可以更容易閱讀。這些是上面代碼的相關規則，但可能會有一些規則丟失，所以如果你們需要它，我也會發布整個css。
CSS上面的代碼：
footer{
position: absolute;
right: 0;
bottom: -250px;
left: 0;
padding: 10px;
text-decoration:none;
}
#aboutArticle{
width:75%;
}
[title^="cars"]{
float:right;
margin: 0 1.5%;
position:relative;
bottom:505px;
}
[title^="bord"]{
border-style: dotted;
border-radius: 10px 30px;
}
body{
background: -webkit-linear-gradient(left, #4B0082, black , #4B0082); /* For Safari 5.1 to 6.0 */
background: linear-gradient(to right, #4B0082 , black, #4B0082); /*standard syntax*/
text-align: center;
padding-bottom:60px;
font-size:20px;
}