Question

我已经完成了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/

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

Answer 1

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，但我认为，如果所有非自动关闭的元素都被关闭，那么它就会更健壮且面向未来的代码。}

为什么我不能在此HTML文档中添加更多段落？

1 个答案: