我已经在 Codecademy 完成了 HTML 和 CSS 类(class)，现在我想学习 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/
这里有人知道为什么我不能添加更多段落吗？
最佳答案
You can .
<p>元素必须在主内，第一个 div同类texto ，否则，就像您的“oi”文本一样，*由于您从 Codeacademy's site 中获取的 CSS，它会出现在文档流之外。 .
另外，当在你放入它的上下文中使用时，这对你的包装器来说不是一个很好的做法:
.texto {
position: absolute;
}
这可能会给您带来很多困惑，而且如果脱离 Codeacademy 网站的上下文(在左侧栏中)就没有任何意义。
* 你忘了关闭 </p> “oi”的元素，但不要担心最有经验的开发人员也会遇到这种情况!事实上，it shouldn't matter to the layout and browser rendering ，但我的观点是，如果所有非自关闭元素都关闭，则代码会更健壮且面向 future 。
关于html - 为什么我不能向该 HTML 文档中添加更多段落？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16669056/