zoukankan      html  css  js  c++  java
  • HTML布局排版1清除body的margin

    观察可发现,一般的HTML页面分为上中下三部分,上边是导航一栏,中间是内容,下方是页面的下部分。
    注意html里body本身自带8px的上下左右外边距,如图,在qq浏览器和ie里可以看到body本身是8px的margin,在设置大分区的时候,需要把该margin清零,如果有需要,带着也可以,如果不想留这边距,可以设置body的margin为0。
    本博文介绍两点
    1:布局前清除body的margin。
    2:div的float让div在并排在一行里。

    布局前如果有需要,清除body自带的margin:

    body{margin:0px;}

    图示:

    本人只在上学的时候做过网页,都是PS做好,切好用DW排版的,总的来说,一般网页都是分为三个大区,大区就是上边中间和下边,上边一般是导航条一类的,中间是内容,最后是页脚,有点关于这个网页或网站的备注之类的。
    首先是划分大区域,然后在大区域里划分小区域。
    上边一般用来放导航条一类的,高度是固定的,下边一般用来放页脚一类的,高度一般也是固定的的,如果网页中间内容比较比较固定,也可以用固定高度,但是一般内容会随着后期修改,为了不修改内容的时候再修改样式,一般设置成高度自适用。
    div中的一些特点(相关博文:),
    1.div不设置具体高度,和设置100%,就会根据高度自适用。
    2.div设置具体高度,内容如果超出了,就会超出div,如果div本身有背景图或背景色,肯定会超出了。
    3.div默认是占一行,如果想并排几个div,可以设置float
    不同的定位和布局方式,有些固定位置,有些会随着浏览器的大小而产生变化,样式和大小会受容器的影响。
    在使用绝对定位,相对定位等,调整上下左右位置的时候,如果用editplus,不如用dreamweaver更简单,DW分成设计和代码,还可以进行拖动布局。
    div本身是块状元素,占一行,如果想并排div,可以设置float了,如图,设置后三个div可以并排在一行里。

    测试代码:

    <style>
    body{background:#7acbcc;margin:0px;}
    #header{background:#e7a0dc;width:100%;height:200px;}
    #body{background:#87cf7d;width:100%;}
    #footer{background:#e1da71;width:100%;height:200px;}
    </style>
    </head>
    <body>
    <div id="header">
    </div>
    <div id="body">LODOP<br>内容<br>内容<br>内容<br>内容<br></div>
    <div id="footer">
    </div>
    </body>
    <style>
    body{background:#7acbcc;margin:0px;}
    #header{background:#e7a0dc;width:100%;height:200px;}
    #body{background:#87cf7d;width:100%;}
    #footer{background:#e1da71;width:100%;height:200px;clear:both;}
    #bodyleft{background:#9a99cf;width:20%;float:left;}
    #bodymiddle{background:#0066ff;width:30%;float:left;}
    #bodyright{background:#009999;width:50%;float:left;}
    </style>
    </head>
    <body>
    <div id="header">
    </div>
    <div id="body">
    <div id="bodyleft">LODOP<br>内容<br>内容<br>内容<br>内容<br></div>
    <div id="bodymiddle">LODOP<br>内容<br>内容<br>内容<br>内容<br></div>
    <div id="bodyright">LODOP<br>内容<br>内容<br>内容<br>内容<br</div>
    </div>
    <div id="footer">
    </div>
    </body>

    如图,注意,
    (1)下面的footer的下边div,由于要另起一行,不和中间的div左浮动影响,需要设置clear:both,来让下面的div单独不受影响。
    (2)这里中间的三个div内容高度一样,所以布满了,如果内容不同,也会有差异,高度少的会漏出body,这里给body加了颜色,body一般是空白,所有会有空白出现。

  • 相关阅读:
    博客园美化-打赏代码
    苹果appID的获取方法
    简体、繁体相互转换
    iOS Socket编程(一)基本概念
    无线通信
    http与https通信
    iOS开发网络篇—发送GET和POST请求(使用NSURLSession)
    iOS开发网络篇—GET请求和POST请求的说明与比较
    iOS开发网络篇—HTTP协议
    Verify the Developer App certificate for your account is trusted on your device.
  • 原文地址:https://www.cnblogs.com/huaxie/p/11309000.html
Copyright © 2011-2022 走看看