我已经完成了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/
这里有人知道为什么我不能添加更多段落吗？
你可以.
该<p>元素必须是主内,先div用类texto,否则,就像你的"OI"文本,*它会出现,因为你拿了CSS的文档流外Codeacademy的网站.
此外,当您在上下文中使用时,这对您的包装器来说不是一个很好的做法:
.texto {
position: absolute;
}
这可能会给你带来很多困惑,并且当从Codeacademy的网站(它是左侧边栏)脱离上下文时没有目的.
*你忘了关闭</p>"oi" 的元素,但不要担心它也会遇到最有经验的开发人员!实际上,它对布局和浏览器渲染无关紧要,但我认为,如果所有非自动关闭的元素都被关闭,那么它就更健壮且面向未来的代码.