2
我正在爲學校項目製作單頁個人配置文件。我必須回到學校內部網上的班級主頁。我想要鏈接直接位於我的名字下面的紅色矩形。 我的HTML是下方，code can be viewed here的的jsfiddle（替換Lorem存有和隱私的原因，通用名）：HTML標籤定位
<!DOCTYPE html>
<html>
<head>
<title>John Smith</title>
<link type="text/css" rel="stylesheet" href="styles.css"/>
</head>
<body>
<div class="title">
<h1><img width="50px" style="border-radius:100%" src="http://goo.gl/fj0Qm1"/> John Smith</h1>
<p><a href="#">9IST Home</a></p>
</div>
<div class="about">
<h3>About Me</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pulvinar dictum odio a aliquet. In cursus erat non fermentum elementum. Sed imperdiet odio quam, quis efficitur nunc dignissim quis. Donec porta finibus justo. Vivamus eleifend neque at finibus viverra. Proin at mi nec ligula blandit aliquet. Praesent sodales odio in risus gravida, ut sodales diam imperdiet. Integer at malesuada arcu, id hendrerit libero. Aliquam at leo sit amet quam porta scelerisque et eu felis. Vestibulum quis ligula in enim iaculis accumsan. Sed consequat, tellus vitae iaculis dignissim, ligula erat luctus tellus, non dapibus tortor enim eget risus.</p>
</div>
<div class="school-life">
<h3>School Life</h3>
<p>Quisque scelerisque nunc nec mauris elementum venenatis. In hac habitasse platea dictumst. Etiam placerat, dolor a pretium elementum, neque urna tincidunt velit, in sodales velit arcu sed justo. Ut eu imperdiet felis. Phasellus eget justo id nulla lobortis semper. Pellentesque sodales cursus purus sit amet vehicula. Fusce hendrerit risus sed bibendum aliquet. Morbi fringilla iaculis orci, non finibus purus tristique sed. In ac fringilla massa, sed egestas nulla. Aliquam eleifend, orci et sollicitudin mollis, purus ipsum rutrum libero, eget aliquam metus ligula vitae leo. Fusce sodales, tortor non lobortis lacinia, libero elit maximus mi, eu eleifend quam nulla id nibh. Aliquam pulvinar mi vitae convallis posuere. Fusce pharetra nibh sit amet diam tempus, id pellentesque tellus condimentum. Praesent porta sollicitudin nisi quis ultrices. Donec molestie purus arcu, sit amet iaculis tortor tempor eu.</p>
</div>
<div class="favourites">
<h3>My Favourites</h3>
<p>Morbi tristique ut nisi non euismod. Maecenas id massa cursus, auctor nisl ut, commodo enim. Nulla sed malesuada turpis. Cras quis justo elit. Etiam vitae leo metus. Aliquam sed urna scelerisque, vestibulum dui nec, viverra nibh. Mauris eu interdum sem, eu varius est. Vivamus tellus nulla, interdum a varius ac, rutrum eget velit. Suspendisse iaculis semper neque, nec pretium mi pharetra ut. Suspendisse condimentum a purus vel viverra. Suspendisse nec consequat dui. Duis tristique fermentum orci rutrum eleifend. Donec finibus, tellus interdum convallis commodo, risus lectus accumsan nibh, ac lacinia turpis est ut sem. Pellentesque elit tellus, faucibus id dictum in, ultrices in mi. Proin eget velit consequat, mollis arcu eget, fermentum ligula. Proin venenatis nisi et dui vulputate sodales.</p>
</div>
<div class="hopes">
<h3>Hopes for the future</h3>
<p>Donec a lobortis quam. Donec ultrices nunc diam, a sollicitudin diam finibus eget. Mauris aliquam vulputate nisl ut auctor. Aenean eget mi ligula. Phasellus consequat neque ullamcorper, ultricies orci vel, eleifend elit. Suspendisse non augue at ex semper sagittis. Maecenas sed congue risus, nec aliquet sapien. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec commodo nunc ultricies felis cursus, non auctor libero cursus. Morbi pharetra nec sapien sit amet pretium. Duis tempus faucibus est non dignissim. Vestibulum vestibulum vestibulum libero, in convallis mi condimentum sed. Integer tincidunt mollis risus, vitae ornare eros porta vitae. Morbi aliquet lorem commodo, bibendum ex ac, dictum nibh. Curabitur tempus congue semper. Duis risus tortor, tempor in consequat quis, dictum non nisl.</p>
</body>
</html>
和我的CSS這裏：
* {
box-sizing: border-box;
}
body {
font-family:helvetica;
background-color:orange;
}
a {
color:black;
text-decoration:none;
}
h1 {
font-size:50px;
color:white;
}
.container {
margin: auto;
width: 1000px;
}
.title {
width:auto;
margin-top: 0px;
height: 100px;
background-color: red;
text-align: center;
line-height: 100px;
padding-top: 0px;
padding-bottom:0px;
}
.title a {
color:#ffff00;
text-decoration:underline;
}
.main-content {
display: block;
overflow: hidden;
}
.about {
width: 33.33%;
height: 700px;
background-color: lightblue;
float: left;
padding:10px 10px 10px 10px;
margin:0px 0px 0px 0px;
display: inline;
}
.school-life {
width: 33.33%;
height: 700px;
background-color: lightgreen;
float: left;
padding:10px 10px 10px 10px;
margin:0px 0px 0px 0px;
display: block;
}
.favourites {
width: 33.33%;
height: 700px;
background-color: moccasin;
float: left;
padding:10px 10px 10px 10px;
margin:0px 0px 0px 0px;
display: block;
}
.hopes {
width:100%;
height:auto;
background-color: black;
color:white;
padding: 40px 10px 10px 10px;
bottom: 0;
}
li {
list-style-type:none;
}
.hopes h3 {
padding-top:40px;
}
任何幫助，不勝感激感謝
對我來說是最好的答案，因爲它解釋了什麼是錯誤的，因爲它遇到了一個快速，髒的修復程序。 – 2014-10-09 03:56:31