簡單的CSS網頁佈局--一二列佈局

-Advertisement-

1.一列佈局 (一)一列自適應自適應瀏覽器，隨著瀏覽器的拉伸而變化，一般寬度採用百分比的寫法，很簡<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>一列佈局自適應</title> <style type="t

1.一列佈局

　　(一)一列自適應

　　自適應瀏覽器，隨著瀏覽器的拉伸而變化，一般寬度採用百分比的寫法，很簡<!DOCTYPE html>

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>一列佈局自適應</title>
    <style type="text/css">
        body{
            margin: 0;      /*清除瀏覽器預設樣式*/
            padding: 0;
        }
        div{
            text-align: center;  /*字體居中*/
            font-size: 30px;
            font-weight: bold;
        }
       .head,.middle,.foot{
            width: 50%;          /*百分比寬度*/
            margin: 0 auto;      /* 典型的設置居中*/
        }
        .head{
            height: 200px;
            background: #F0B6CF;
        }
        .middle{
            height: 500px;
            background: tan;
        }
        .foot{
            height: 200px;
            background-color: #57A9D1;
        }
    </style>
</head>
<body>
        <div class="head">head</div>
        <div class="middle">middle</div>
         <div class="foot">foot</div>
</body>
</html>

　　(二)一列固定

　　顧名思義，固定佈局的寬度，設置固定的PX值。

　　只需要在上面一列自適應的HTML代碼中，把width:50% 修改成 width:960px即可，當然，各部分如果要求設置的寬度不同，在每個部分的類選擇器上進行適當修改即可。

2.二列佈局

　　(一)二列自適應

　　　二列的自適應，這時候要用到float屬性。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>二列自適應</title>
    <style type="text/css">
        body{
            margin: 0;      /*清除瀏覽器預設樣式*/
            padding: 0;
        }
        div{
            text-align: center;  /*字體居中*/
            font-size: 30px;
            font-weight: bold;
        }
        .left{
            width: 30%;                 
            background-color: #CCFF00;
            height: 500px;
            float: left;         /*先左浮動，使之靠瀏覽器左側*/
        }
        .right{
            width: 70%;
            height: 500px;
            background-color: bisque;
            float: right;       /*先右浮動，使之靠瀏覽器右側*/
        }
    </style>
</head>
<body>
        <div class="left">left</div>
        <div class="right">right</div>
</body>
</html>

註意：以上百分比30%和70%加起來剛好是100%，寬度會充滿整個瀏覽器頁面，如果加起來沒有100%，則他們中間會空出一欄的空間出來。

　　(二)二列居中自適應

　　在左右部分包裹成一個div,在該div類選擇器中選擇 margrin:0,auto;設置寬度為：80%；則子代標簽的寬度會基於80%的瀏覽器寬度來定。

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title>二列居中自適應</title>
 6     <style type="text/css">
 7         body{
 8             margin: 0;      /*清除瀏覽器預設樣式*/
 9             padding: 0;
10         }
11         div{
12             text-align: center;  /*字體居中*/
13             font-size: 30px;
14             font-weight: bold;
15         }
16         .main{
17             width:80%;
18             height: 500px;
19             margin: 0 auto;      /*居中*/
20         }
21         .left{
22             width: 30%;
23             background-color: #CCFF00;
24             height: 500px;
25             float: left;         /*先左浮動，使之靠瀏覽器左側*/
26         }
27         .right{
28             width: 70%;
29             height: 500px;
30             background-color: bisque;
31             float: right;       /*先右浮動，使之靠瀏覽器右側*/
32         }
33     </style>
34 </head>
35 <body>
36     <div class="main">
37         <div class="left">left</div>
38         <div class="right">right</div>
39     </div>
40 </body>
41 </html>

　　(三)二列居中固定

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title>二列居中固定寬度</title>
 6     <style type="text/css">
 7         body{
 8             margin: 0;      /*清除瀏覽器預設樣式*/
 9             padding: 0;
10         }
11         div{
12             text-align: center;  /*字體居中*/
13             font-size: 30px;
14             font-weight: bold;
15         }
16         .main{
17             width:960px;
18             height: 500px;
19             margin: 0 auto;
20         }
21         .left{
22             width: 360px;
23             background-color: #CCFF00;
24             height: 500px;
25             float: left;         /*先左浮動，使之靠瀏覽器左側*/
26         }
27         .right{
28             width: 600px;
29             height: 500px;
30             background-color: bisque;
31             float: right;       /*先右浮動，使之靠瀏覽器右側*/
32         }
33     </style>
34 </head>
35 <body>
36     <div class="main">
37         <div class="left">left</div>
38         <div class="right">right</div>
39     </div>
40 </body>
41 </html>

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

js晉級篇——前端記憶體泄漏探討

1.IE7/8 DOM對象或者ActiveX對象迴圈引用導致記憶體泄漏迴圈引用分為兩種：第一種：多個對象迴圈引用 var a=new Object; var b=new Object; a.r=b; b.r=a; 第二種：迴圈引用自己 var a=new Object; a.r=a; 對於ECMA
小眾機械鍵盤推薦
10個最佳最新的網頁設計工具

產生獨特的音樂，背景圖片，照片過濾器和幾何藝術與本月的一批工具。需要一點點的網頁設計靈感？或者，也許你需要幫助如何啟動一個博客？由於建立一個網站的複雜性不斷增加，所幸也是如此由網路社區製作工具幫助您的質量和數量。下麵你會發現，為您生成唯一的，無版權的資產，從而迅速解決發現的畫面和音樂和處理相關權
CSS去除Chrome瀏覽器的控制項預設樣式

html的input輸入框在Chrome瀏覽器里是有預設樣式的，當它獲得焦點時，即使你沒有為它設置:focus時的樣式，Chrome瀏覽器還是會給它加上藍色的邊框，今天百度找到有個方法可以去除該預設樣式。給需要去除預設樣式的元素加上這麼一條CSS屬性: -webkit-appearance: no
《Cocos2d-x游戲開發實戰精解》學習筆記1--在Cocos2d中顯示圖像

Cocos2d-x中的圖像是通過精靈類來顯示的。在Cocos2d-x中游戲中的每一個角色、怪物、道具都可以理解成是一個精靈，游戲背景作為一種特殊的單位將其理解成是一個精靈也沒有什麼不妥。
windows下nodejs環境配置

一、下載去nodejs下載node.msi安裝文件包，裡面包含了node.js和npm；雙擊node.msi就行了，選擇安裝路徑和npm；二、設置環境變數 [新版本都不需要設計環境變數了，軟體會自動寫入環境變數] 電腦（或者我的電腦）右擊屬性-》高級系統設置-》環境變數。新建一個用戶變數。
4種input元素滑塊UI樣式

分享4種input元素滑塊UI樣式是一款使用CSS3來渲染樣式，使用JavaScript來處理滑塊的滑鼠拖動事件。效果圖如下：線上預覽源碼下載實現的代碼。 js代碼： var range_els = document.querySelectorAll('input[type=range]'),
JavaScript類和繼承：constructor屬性

constructor屬性始終指向創建當前對象的構造函數。比如下麵例子： // 等價於 var foo = new Array(1, 56, 34, 12); var arr = [1, 56, 34, 12]; console.log(arr.constructor === Array); //