網頁上中下佈局程式碼

admin發表於2017-02-23
網頁

分享一段簡單程式碼例項，它實現了網頁上中下簡單佈局效果。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
* {
  margin:0;
  padding:0;
}
ul{list-style:none;}
img{border:none;}
a{
  text-decoration:none;
  color:#fff;
}
a:hover{text-decoration:none;}
/*layout*/ 
#header{
  width:100%;
  margin:0 auto;
  background:#eee;
}
#menu_bg{
  width:100%;
  background:pink;
  height:50px;
}
#menu{
  width:980px;
  margin:0 auto;
}
#menu ul li{
  width:101px;
  float:left;
}
#menu ul li a{
  float:left;
  display:block;
  width:100px;
  height:48x;
  line-height:48px;
  text-align:center;
  text-transform:uppercase;
  background:black;
  border-bottom:2px solid black;
}
#menu ul li a:hover{border-bottom:2px solid pink;}
#wrap{
  width:980px;
  height:500px;
  margin:0 auto;
  background:green;
}
#footer_bg{
  width:100%;
  background:pink;
  height:50px;
}
#footer{
  width:980px;
  margin:0 auto;
}
.friend_links li{display:inline;}
</style>
</head>
<body>
<div id="header">
  <div id="logo">放logo的地方</div>
  <div id="menu_bg">
    <div id="menu">
      <ul>
        <li class="current selected"><a href="###">首頁</a></li>
        <li><a href="#">關於我們</a></li>
        <li><a href="#">公司簡介</a></li>
        <li><a href="#">產品展示</a></li>
      </ul>
    </div>
  </div>
</div>
<div id="wrap"> wrap </div>
<div id="footer_bg">
  <div id="footer">
    <p class="copyright">&copy;螞蟻部落歡迎您，只有奮鬥才會有前途</p>
    <ul class="friend_links">
      <li>百度</li>
      <li>谷歌</li>
      <li>有道</li>
      <li>騰訊</li>
    </ul>
  </div>
</div>
</body>
</html>

相關文章