首页 > html > three_column > CSS Layout - 如何三列与标题，导航栏和页脚

CSS Layout - 如何三列与标题，导航栏和页脚

three_column 【three_column】
我们想知道如何三列与标题，导航栏和页脚。
代码展示 运行结果 


<html>
<head>
<title>Layout Example</title>
<style>
#header {
  background-color: #cccccc;
  padding: 10px;
  height: 120px;
}

#navigation {
  background-color: #efefef;
  padding: 10px;
  height: 40px;
}

#footer {
  background-color: #cccccc;
  padding: 10px;
  height: 40px;
  clear: both;
  border-top: 20px solid #ffffff;
}

/* 3 columns */
.column1of3, .column2of3, .column3of3 {
  float: left;
  width: 28%;
  margin-left: 2%;
  background-color: #cccccc;
  padding: 1%;
  margin-top: 20px;
  height: 175px;
}
</style>
</head>
<body>
  <div id="header">header</div>
  <div id="navigation">navigation</div>
  <div class="column1of3">column 1 of 3</div>
  <div class="column2of3">column 2 of 3</div>
  <div class="column3of3">column 3 of 3</div>
  <div id="footer">footer</div>
</body>
</html>