CSS學習筆記--Div+Css佈局實戰(入門)

時間 2019-11-10

標籤 css 學習筆記 div+css div 佈局實戰入門欄目 CSS 简体版

原文原文鏈接

基本頁面佈局

本教程帶着你們作一個簡單的頁面佈局

最重效果以下:

1.第一部，先建立上下左右4個DIV

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <style type="text/css" >


    </style>
    <title></title>
</head>
<body>
  <div class="main">
  <div class="top">頂部</div>

  <div class="left">左邊</div>
  <div class="right">右邊</div>
  <div class="bottom">底部</div>
  </div>
</body>
</html>

頁面效果以下：

2.設置body的margin屬性

咱們從下圖能夠看到，頁面Body離瀏覽器邊緣有8px的大寫，咱們能夠經過設置margin屬性解決

 body{
            margin:0;
        }

3.設置頁面頂部

設置頂部div，使top距在頂部

 .top{
            width:900px;
            height: 100px;
            background-color: red;
        }

效果以下：

4.設置左邊DIV元素

經過float屬性，實現DIV向左浮動

 .left{
            
            float:left;
           
            width:200px;
            height: 600px;
            background-color: green;


        }

效果以下:

5.設置右邊DIV元素

同上，經過float屬性，把右邊DIV也向左漂浮

  .right{
           
            float:left;
            left: 200px;
        
            width:700px;
            height: 600px;
            background-color: pink;
        }

效果以下：

6.設置底部DIV

經過float把底部DIV也向左浮動

        .bottom{
            float: left;
            width:900px;
            height: 200px;
            background-color: blueviolet;
        }

效果以下：

7.最終代碼

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <style type="text/css" >

        body{
            margin:0;
        }
        .top{
            width:900px;
            height: 100px;
            background-color: red;
        }
        .left{
            float:left;
            width:200px;
            height: 600px;
            background-color: green;

        }

        .right{
            float:left;
            left: 200px;
            width:700px;
            height: 600px;
            background-color: pink;
        }

        .bottom{
            float: left;
            width:900px;
            height: 200px;
            background-color: blueviolet;
        }
    </style>
    <title></title>
</head>
<body>
  <div class="main">
  <div class="top">頂部</div>

  <div class="left">左邊</div>
  <div class="right">右邊</div>
  <div class="bottom">底部</div>
  </div>
</body>
</html>

若是須要作精肯定位，最好加上position屬性，而後用top,left,right,bottom這幾個來設置定位，能夠用浮動元素位置固定