HTML布局
网站常以杂志、报纸样式显示
使用<div>元素的HTML布局，方便通过css对其进行设计
<!DOCTYPE html>
<html>
<head>
<style>
#header{
background-color:balck;
color:white;
text-align:center;
padding:5px:}
#nav{
line-heitht:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px;{
#section{
width:350px;
float:left;
padding:10px;}
#flooter{
background-color:bkack;
color:white;
clear:both;
text-align:center;
padding:5px;}
</style>
</head>
<body>
<div id="header">
<h1>City Gallery</h1>
</div>
<div id="nav">
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.
</p>
<p>
Standing on the River Thames,London has been a major settlement for two millennia.
</p>
</div>
<div id="footer">
Copyrith ? linyuansun.com
</div>
</body>
</html>
--------------------------------------------------------------------------------------------------------------------------
HTML响应式web设计
RWD，响应式web设计（Responsive Web Design），能够以可变的尺寸传递网页
RWD对于平板和移动设备是必需的
一般使用现有的框架快速实现，如Bootstrap框架