div css三列布局效果例項程式碼

admin發表於2017-02-23
CSS

三列布局在是比較中規中矩的佈局之一，大量的網站都有應用，也是初學者必須要掌握的佈局方式之一，下面就是一個三列布局的例項程式碼，僅供參考之用，希望對初學者有一定的幫助，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.softwhy.com/" />
<title>三列布局效果程式碼例項</title>
<style type="text/css" >
* {
  padding:0px;
  margin:0px;
}
body {
  background-color:#e1ddd9;
}
h1 {
  font-size:11px;
  text-align:center;
  color:#564b47;
  background-color:#90897a;
}
strong{font-size:13px;}
#left{
  position:absolute;
  left:0px;
  width:190px;
  color:#564b47;
  margin:0px;
  padding:0px;
  height:500px;
}
#content {
  margin:0px 190px 0px 190px;
  border-left:2px solid #564b47;
  border-right:2px solid #564b47;
  padding:0px;
  background-color:#ffffff;
  height:500px;
}
#right {
  position:absolute;
  right:0px;
  width:190px;
  height:500px;
  color:#564b47;
  margin:0px;
  padding:0px;
}
</style>
</head>
<body>
<div id="left"></div>
<div id="right"></div>
<div id="content"></div>
<h1>螞蟻部落歡迎您</h1>
</body>
</html>

相關文章