zoukankan      html  css  js  c++  java
  • css基础-2 div布局

    div布局

     

    <html>

            <head>

                    <title>div布局 </title>

                    <meta charset="utf-8">

                    <style>

          .toubu {100%;height:100px;background:aqua;}

          .zhuti {80%;height:600px;background:red;float:left;}

          .left  {20%;height:600px;background:green;float:left}

          .dibu  {100%;height:200px;background:blue;clear:both}

                    </style>

            </head>

            <body style=margin:0px;>

                    <div class="toubu">头部</div>

                    <div class="left">左边</div>

                    <div class="zhuti">主题部分</div>

                    <div class="dibu">底部</div>

            </body>

    </html>

     

    解释:

    1.div标签属于块级元素,自己会独占一行,要想让多个div从左到右排列,需要用到     "浮动"属性。

    2.最后一个div需要清除左浮动效果

           clear:both;

           属性意思为:不允许有浮动对象

    3.设置div头部的时候,头部会离浏览器最上边默认或有8px的间距。我们可以通过外边距标签,将8px的空白缝隙取消。

           style=margin:0px;

     

     

     

  • 相关阅读:
    前端基础之html
    前端基础之css
    python模块之pyMySql
    MySQL基础命令
    python 异常处理、进程
    python第三方模块之paramiko模块
    python之socket网络编程
    centos65安装docker遇到的问题
    在Mac和win7上分别安装了docker后,发现原来的vagrant都启动不了了
    应用升级提示页面
  • 原文地址:https://www.cnblogs.com/pangbing/p/7191198.html
Copyright © 2011-2022 走看看