网页布局II

<!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 Gallery</h1>
</header>
<nav>
London<br>
Paris<br>
Tokyo<br>
</nav>
<section>
<h1>London</h1>
<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 Erya.com
</footer>
</body>
</html>

首先看html代码部分：
①body标签内由四个盒子组成，四个盒子分别是：header、nav、section和footer，这四个盒子组成了最终的页面内容。
②盒子header位于页面内容的开头部分，一般内容是标题，标题文本为“City Gallery”，所以这里使用了标题字的标签h1。
③盒子nav是页面的导航部分，是链接其他页面的接口，就像是一个菜单，子项目分别是：London、Paris和Tokyo。
④盒子footer位于页面内容的尾部，这个元素的内容一般用于申明法律声明与版权内容。
⑤盒子section在header和footer之间，也就是页面的正中间，所谓的“C位”，当然是用来放正文和主要内容的。在这里main盒子里又有一个小标题以及两段文本内容。

CSS样式部分：
①header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
背景颜***ackground-color为黑色，字体颜色color为白色， text-align:center;文本位置居中。
②nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px;
}
盒子背景颜background-color为白灰色，规定了盒子的高度和宽度为300px和100px，浮动位置为左边。
③#footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
color表示字体颜色为白色，header盒子背景颜***ackground-color为黑色，文本内容居中，
clear:both表示清除左右两侧的浮动。
④section {
width:350px;
float:left;
padding:10px;
}
section规定了宽度为350px，浮动属性往左，也就是在水平线上紧挨着左侧的导航nav盒子。

上述源代码生成的页面效果如下：
在这里插入图片描述