CSS学习笔记--Div+Css布局实战(入门)

偏执的太偏执、 2022-09-25 00:28 272阅读 0赞

# 基本页面布局 #

本教程带着大家做一个简单的页面布局

最重效果如下:

![20160803234105176][]

## 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>

页面效果如下：

![Image 1][] ![20160804001156169][]

## 2.设置body的margin属性 ##

我们从下图可以看到，页面Body离浏览器边缘有8px的大写，我们可以通过设置margin属性解决

![20160804001515315][]

body{
                margin:0;
            }

## 3.设置页面顶部 ##

设置顶部div，使top距在顶部

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

效果如下：

![20160803235658900][]

## 4.设置左边DIV元素 ##

通过float属性，实现DIV向左浮动

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

效果如下:

![20160804000138999][]

## 5.设置右边DIV元素 ##

同上，通过float属性，把右边DIV也向左漂浮

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

效果如下：

![20160804001916868][]

## 6.设置底部DIV ##

通过float把底部DIV也向左浮动

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

效果如下：

![20160804002418663][]

## 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这几个来设置定位，可以用浮动元素位置固定

[20160803234105176]: /images/20220719/ffd72d5ddf444e658357b9274361a573.png
[Image 1]: 
[20160804001156169]: /images/20220719/b726cf7dccff4dcb8d2ff5081c7d8d44.png
[20160804001515315]: /images/20220719/69f8c465fb73440b814f7d6ccaadbd54.png
[20160803235658900]: /images/20220719/b13cc439bdaa4d2591f685277bac3182.png
[20160804000138999]: /images/20220719/36900c8043ee4ed09aa040f6ea2ce55b.png
[20160804001916868]: /images/20220719/43025c78d30d47279792c2fac6e449fb.png
[20160804002418663]: /images/20220719/9a43832a49724c4683c2784e517bec26.png