<html>
<head>
<style>
#header{background-color:black;
color:white;
text-align:center;
padding:5px;
<head>
<style>
#header{background-color:black;
color:white;
text-align:center;
padding:5px;
}
#nav{background-color:#eeeeee;
color:black;
height:300px;
width:100px;
float:left;
padding:5px;
}
#section{width:300px;
float:left;
padding:10px;
}
#footer{background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>
</head>
#nav{background-color:#eeeeee;
color:black;
height:300px;
width:100px;
float:left;
padding:5px;
}
#section{width:300px;
float:left;
padding:10px;
}
#footer{background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>
</head>
<body>
2016/11/22
<p style="font-family:arial;color:green">此处用div布局<br/>
<b>注意：</b>对一个元素声明clear:both，会将来自元素周围的的浮动清除，举一个简单的例子就是当先声明一个元素向左浮动时，那么这个元素的右边就会留出一部分空白，如果这个时候空间可以容下该元素的下一个元素的大小，那么由于此元素声明过浮动向左，那么下一个元素就会自动弥补留下的空间。</p>
2016/11/22
<p style="font-family:arial;color:green">此处用div布局<br/>
<b>注意：</b>对一个元素声明clear:both，会将来自元素周围的的浮动清除，举一个简单的例子就是当先声明一个元素向左浮动时，那么这个元素的右边就会留出一部分空白，如果这个时候空间可以容下该元素的下一个元素的大小，那么由于此元素声明过浮动向左，那么下一个元素就会自动弥补留下的空间。</p>
<div id="header">
<h1>City Gallery</h1>
</div>
<h1>City Gallery</h1>
</div>
<div id="nav">
London<br/>
Paris<br/>
Tokyo<br/>
</div>
London<br/>
Paris<br/>
Tokyo<br/>
</div>
<div id="section">
<h2>London</h2>
<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>
<h2>London</h2>
<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
</div>
Copyright
</div>
<hr/>
</body>
</html>
</html>