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