css實現的網頁三列布局效果程式碼例項

admin發表於2017-03-30
CSS網頁

本章節分享一段程式碼例項，它實現了雜湊布局效果，程式碼非常的簡單如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#wrap{
  width:1000px;
  margin:0 auto;
  overflow:hidden;
}
#left,#center,#right{
  height:500px;
}
#left{
  background:#00FFFF;
  float:left;
  width:250px;
}
#center{
  background:#FF0000;
  float:left;
  width:500px;
}
#right{
  width:250px;
  background: #00FF00;
  float:right;
}
</style>
</head>
<body>
<div id="wrap">
  <div id="left"></div>
  <div id="center"></div>
  <div id="right"></div>
</div>
</body>
</html>

上面的程式碼實現了三列布局效果，非常的簡單。

但是上面的程式碼有一個缺點，就是寬度固定了，無法根據頁面的實際尺寸進行自動調節。

如果要實現自動調節的當然有很多方法，可以參閱CSS3 calc()一章節。

相關文章