码迷,mamicode.com
首页 > Web开发 > 详细

css基础-2 div布局

时间:2017-07-16 19:24:12      阅读:192      评论:0      收藏:0      [点我收藏+]

标签:class   头部   css基础   margin   元素   多个   span   标签   解释   

div布局

 

<html>

        <head>

                <title>div布局 </title>

                <meta charset="utf-8">

                <style>

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

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

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

      .dibu  {width: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;

 

 

 

css基础-2 div布局

标签:class   头部   css基础   margin   元素   多个   span   标签   解释   

原文地址:http://www.cnblogs.com/pangbing/p/7191198.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!