div+css完成首頁佈局

時間 2020-05-20

標籤 div+css div css 完成首頁佈局欄目 HTML 简体版

原文原文鏈接

要完成一個簡單的網站首頁並不難，咱們只要尋找到方法便很容易，完成一個簡單的網站首頁咱們只要將總體的首頁佈局用div+css寫出來而後再填充內容那麼一個簡單的網站首頁即可以完成了，那麼咱們一步一步來實現他們，首先咱們從宏觀的角度將首頁分紅幾大塊，如下的案例咱們將首頁分紅三大塊：css

這個首頁咱們先無論放置大圖的部分，咱們將這個簡單的首頁分爲三大塊，這樣咱們就須要來一個最大的div包含咱們要創建三大塊的div，咱們將最大的div取名爲「container」容器的意思，那麼再將其餘三個div按照習慣分別取名爲header、main、footer：html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
  <div id="container">
   <div id="header"></div>
   <div id="main">   </div>
   <div id="footer"></div>
  </div>
</body>
</html>瀏覽器

寫好後咱們再給這四個div規定大小顏色：ide

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <style>
   #container{
    width: 960px;
    background: grey;
   }
   #header{
    height: 120px;
    background: orange;
   }
   #main{
    height: 720px;
    background: green;
   }
   #lside{
    width: 780px;
    height: 720px;
   }
   #footer{
    height: 120px;
    background: blue;
   }
  </style>
</head>
<body>
  <div id="container">
   <div id="header"></div>
   <div id="main"></div>
   <div id="footer"></div>
  </div>
</body>
</html>佈局

那麼效果呢就是如下圖片所呈現的了：網站

如今呢已經有三大塊了，接下來咱們再看下咱們要作的首頁，三大塊中間的一塊被分紅了兩塊，兩塊中的左邊一塊又被分紅了四塊：spa

那麼咱們就開始實現這幾塊div，看下效果：

好了，初步的效果已經有了，那麼能夠看到咱們這個並無在瀏覽器居中顯示而是靠左邊的，若是咱們用偏移也是能夠作到居中的，可是若是換一臺電腦或換一個瀏覽器也許就不是居中了，那麼怎麼作到居中呢，咱們能夠用margin中特殊的一個屬性，咱們來看下：htm

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <style>
   #container{
    width: 960px;
    background: grey;
    margin:0 auto;
   }
   #header{
    height: 120px;
    background: orange;
   }
   #main{
    height: 720px;
    background: green;
   }
   #lside{
    float: left;
    width: 780px;
    height: 720px;
    background:pink;
   }
   .four{
    width: 300px;
    height: 300px;
    background: white;
    margin: 10px;
    float: left;
    padding: 20px;
   }
   #rside{
    float: right;
    width: 180px;
    height: 720px;
    background: purple;
   }
   #footer{
    height: 120px;
    background: blue;
   }
  </style>
</head>
<body>
  <div id="container">
   <div id="header"></div>
   <div id="main">
    <div id="lside">
     <div class="four">當面對兩個選擇時，拋硬幣總能奏效，由於在你把它拋在空中的那一秒裏，你忽然知道你但願它是什麼。</div>
     <div class="four">當面對兩個選擇時，拋硬幣總能奏效，由於在你把它拋在空中的那一秒裏，你忽然知道你但願它是什麼。</div>
     <div class="four">當面對兩個選擇時，拋硬幣總能奏效，由於在你把它拋在空中的那一秒裏，你忽然知道你但願它是什麼。</div>
     <div class="four">當面對兩個選擇時，拋硬幣總能奏效，由於在你把它拋在空中的那一秒裏，你忽然知道你但願它是什麼。</div>
    </div>
    <div id="rside"></div>
   </div>
   <div id="footer"></div>
  </div>
</body>
</html>blog