2013-05-21 60 views
4

我已經在Codecademy完成了我的HTML和CSS課程,現在我想學習Python。爲什麼我無法在此HTML文檔中添加更多段落?

在此之前,我想建立一個關於我即將學習的東西的小網站,只是爲了練習我的HTML和CSS技能。

我遇到了麻煩,因爲我無法在我的HTML文件下面添加更多內容,也不知道爲什麼。

下面是HTML(也http://pastebin.com/br4W1YGL):

<!DOCTYPE HTML> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
     <link rel="stylesheet" type="text/css" href="style.css"> 
     <title>Python</title> 
    </head> 
    <body> 
     <div class="texto"> 
      <h2>Welcome to the Flying Circus</h2> 
      <p>Python is a powerful, flexible programming language you can use in web/Internet development, to write 
      desktop graphical user interfaces (GUIs), create games, and much more. Python is:</p> 
      <ul> 
      <li><strong>High-level</strong>, meaning reading and writing Python is really easy—it looks a lot like regular English!</li> 
      <li><strong>Interpreted</strong>, meaning you don't need a compiler to write and run Python! You can write it here at Codecademy 
      or even on your own computer (many are shipped with the Python interpreter built in—we'll get to the interpreter later in this lesson).</li> 
      <li><strong>Object-oriented</strong>, meaning it allows users to manipulate data structures called <strong>objects</strong> in order to build and execute programs. 
      We'll learn more about objects later.</li> 
      <li><strong>Fun to use</strong>. Python is named after Monty Python's Flying Circus, and example code and tutorials 
      often refer to the show and include jokes in order to make learning the language more interesting.</li> 
      </ul> 
      <p>This course assumes no previous knowledge of Python in particular or programming/computer science in general.</p> 

      <div id="instrucoes"> 
      <h4>INSTRUCTIONS</h4> 
      <p>Ready to learn Python? Click Save & Submit Code to continue!</p> 
      </div> 
      <div id="hint"> 
      <h4>Hint</h4> 
      <p>If the loading bar fills but doesn't fade away, try refreshing the page.</p> 
      </div> 
     </div> 
     <a id="voltar" href="#">[ voltar ]</a> 
     <div class="codigo"> 
      print "Welcome to Python!" 
     </div> 
     <p>oi<p> 
    </body> 
</html> 

而CSS(http://pastebin.com/48XvxedE):

html, body, form, fieldset, legend { 
    margin: 0; 
    padding: 0; 
} 
h1, h2, h3, h4, h5, h6, p { 
    margin-top: 0; 
} 
fieldset,img { 
    border: 0; 
} 
legend{ 
    color: #000; 
} 
sup { 
    vertical-align: text-top; 
} 
sub { 
    vertical-align: text-bottom; 
} 
table { 
    border-collapse: collapse; 
    border-spacing: 0; 
} 
caption, th, td { 
    text-align: left; 
    vertical-align: top; 
    font-weight: normal; 
} 
input, textarea, select { 
    font-size: 110%; 
    line-height: 1.1; 
} 
abbr, acronym { 
    border-bottom: .1em dotted; 
    cursor: help; 
} 

/*o meu código começa aqui, o código acima é um reset*/ 
/*fonte do reset: http://www.maxdesign.com.au/articles/css-reset/ */ 

html { 
    width: 1300px; 
    margin: 0 auto; 
    font-family: sans-serif; 
    font-size: 0.95em; 
    color: #424242; 
    background-color: #FFFFFF; 
} 
body { 

} 
.texto { 
    position: absolute; 
    top: 20px; 
    width: 550px; 
} 
#instrucoes { 
    background-color: #FAFAFA; 
    width: 536px; 
    padding: 5px; 
    color: #585858; 
    border: 2px solid #D8D8D8; 
} 
#hint { 
    background-color: #FAFAFA; 
    width: 536px; 
    padding: 5px; 
    color: #585858; 
    border: 2px solid #D8D8D8; 
    margin: 10px 0 0 0; 
} 
.codigo { 
    position: absolute; 
    left: 630px; 
    top: 65px; 
    padding: 10px; 
    width: 676px; 
    height: 420px; 
    background-color: #e6efc2; 
    color: #264409; 
    border: 2px solid #c6d880; 
    font-family: mono; 
    font-weight: bold; 
    font-size: 0.85em; 
} 
#voltar { 
    position: absolute; 
    left: 1275px; 
    top: 25px; 
    color: #585858; 
} 
a:link {text-decoration: none;} 
a:visited {text-decoration: none;} 
a:hover {background-color: #F2F2F2; } 
a:active {text-decoration: none;} 
hr { 
    border: 0; 
    width: 100%; 
    color: #D8D8D8; 
    background-color: #D8D8D8; 
    height: 2px; 
} 

這裏是我的jsfiddle:http://jsfiddle.net/MBMf2/

這裏有人知道我爲什麼不能添加更多段落?

回答

6

You can

<p>元素必須是主要的,第一div與類texto,否則,就像你的「OI」文本,*它會出現,因爲你從Codeacademy's site採取了CSS的文檔流外內。

而且,你把它放在上下文中使用時,這是不是你的包裝一個非常好的做法:

.texto { 
    position: absolute; 
} 

,可能導致混亂的衆多適合你的路線,並沒有按」從Codeacademy的網站(它是一個左側欄)取消了上下文後,沒有任何目的。

*您忘記關閉「oi」的</p>元素,但不要擔心它發生在最有經驗的開發人員身上!實際上,it shouldn't matter to the layout and browser rendering,但我認爲,如果所有不是自閉的元素都關閉,它會更強大,更具前瞻性。

+0

對不起,我已經完成了這個項目,不過謝謝! ;) – vcamargo

+0

@ GoodbyeEarl,沒問題,很高興幫助:) – Baumr

相關問題