分享div css佈局案例的目的

admin發表於2018-08-06
CSS

本版塊將會分享一些簡單的div css佈局案例供初學者參考。

具體包括以下幾個部分:

（1）.基本div css佈局案例。

（2）.響應式佈局案例。

（3）.flex彈性佈局案例。

分享案例目的:

作為一個前端初學人員，可能掌握了一部分HTML與CSS知識，但是真正去構建一個頁面，甚至一個非常簡單頁面的時候卻無從下手，本版塊的目的是分享一些非常基礎的佈局案例或者佈局結構，供初學者參考或者給予一定的啟發作用。程式碼大多都是佈局框架型別，並不會過多涉及網頁內容的具體細節。

程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
body{background:#ffcc99;}
#header {
  margin:0px auto;
  width:1000px;
  height:100px;
  background:#FFFFCC;
}
#menu {
  margin:5px auto;
  width:1000px;
  height:30px;
  line-height:30px;
  color:#99FF99;
  font-weight:bold;
  font-size:14px;
  background:#6699FF;
}
#content {
  margin:5px auto;
  width:1000px;
  height:400px;
  background-color:#cccccc;
}
.content_left {
  float:left;
  width:200px;
  height:400px;
  background:#cc99ff;
}
.content_center {
  float:left;
  width:590px;
  height:400px;
  margin-left:5px;
  background:#cc99ff;
}
.content_right {
  float:left;
  width:200px;
  height:400px;
  margin-left:5px;
  background:#cc99cc
}
#footer1 {
  margin:5px auto;
  background-color:#5185E6;
  color:#FFFFFF;
  border-top:0px solid #F7F7F6;
  height:30px;
  line-height:30px;
  width:1000px;
  padding:5px 0;
  text-align:center;
}
#footer2 {
  margin:5px auto;
  background-color:#3333FF;
  color:#FFFFFF;
  border-top:0px solid #F7F7F6;
  height:30px;
  line-height:30px;
  width:1000px;
  padding:5px 0;
  text-align:center;
}
a{text-decoration:none;}
</style>
</head>
<body>
<div id="header">頁面頭部</div>
<div id="menu"> </div>
<div id="content">
  <div class="content_left">左側欄</div>
  <div class="content_center">中間內容</div>
  <div class="content_right">右側欄</div>
</div>
<div id="footer1">滾動資訊欄</div>
<div id="footer2">底部</div>
</body>
</html>

相關文章