从零开始HTML(二 2016/9/20)
1.布局
① 使用
DOCTYPE html>
html>
head>
style>
#header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
把div理解成一个盒子,设置了盒子的高和宽,后面的盒子就自动跑到前面盒子没占的地方
#nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px;
}
#section {
width:350px;
float:left;
padding:10px;
}
#footer {
background-color:black;
color:white;
clear:both; 清除前面float(浮动)的影响
text-align:center;
padding:5px;
}
style>
head>
body>
div id="header">
h1>City Galleryh1>
div>
div id="nav">
Londonbr>
Parisbr>
Tokyobr>
div>
div id="section">
h2>Londonh2>
p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
p>
p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
p>
div>
div id="footer">
Copyright ? W3Schools.com
div>
body>
html>
② 使用 HTML5 的网站布局
HTML5 提供的新语义元素定义了网页的不同部分:
HTML5 语义元素:
header | 定义文档或节的页眉 |
nav | 定义导航链接的容器 |
section | 定义文档中的节 |
article | 定义独立的自包含文章 |
aside | 定义内容之外的内容(比如侧栏) |
footer | 定义文档或节的页脚 |
details | 定义额外的细节 |
summary | 定义 details 元素的标题 |
DOCTYPE html>
html>
head>
style>
header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px;
}
section {
width:350px;
float:left;
padding:10px;
}
footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
style>
head>
body>
header>
h1>City Galleryh1>
header>
nav>
Londonbr>
Parisbr>
Tokyobr>
nav>
section>
h1>Londonh1>
p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
p>
p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
p>
section>
footer>
Copyright W3Schools.com
footer>
body>
html>
③ 使用表格的 HTML 布局 。
是这一行的表头, | 是这一行的内容, |
---|
推荐阅读