4

我已经在 Codecademy 完成了我的 HTML 和 CSS 课程，现在我想学习 Python。

在此之前，我想建立一个关于我将要学习的东西的小型网站，只是为了练习我的 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/

这里有人知道为什么我不能添加更多段落吗？

4

1 回答 1

6

你可以。

<p>元素必须在 main 内部，首先是divclass texto，否则，就像您的“oi”文本*，由于您从Codeacademy 的站点获取的CSS，它将出现在文档流之外。

此外，当在您放入的上下文中使用时，这对您的包装器来说不是一个很好的做法：

.texto {
    position: absolute;
}

如果从 Codeacademy 的网站（左侧栏）中脱离上下文，这可能会给您带来很多困惑。

* 您忘记关闭</p>“oi”元素，但不要担心最有经验的开发人员也会遇到这种情况！事实上，布局和浏览器渲染应该无关紧要，但我认为如果所有非自动关闭的元素都关闭，它会更加健壮和面向未来的代码。

于 2013-05-21T09:04:07.390 回答