960次阅读
DIV布局

div是一个块元素,可以通过style属性设置其宽高,可以看例子:

<!DOCTYPE html>
<head>
<meta charset=utf-8 />
<title>DIV布局</title>
</head>
<body>
  <div style="width: 100px; height: 100px; background-color: red;">第一个div</div>
  <div style="width: 200px; height: 200px; background-color: blue;">第二个div</div>
  <div style="width: 300px; height: 300px; background-color: green;">第三个div</div>
</body>	
check the result

这个例子中,style属性可以设置div元素的宽、高和背景色,这个例子一看就懂,需要注意的是,div每个元素都要占一行,不会从左到右排列,如果想让它从左到右排列,就要用到第二个法宝了,float。

再看例子:

<!DOCTYPE html>
<head>
<meta charset=utf-8 />
<title>DIV布局</title>
</head>
<body>
  <div style="width: 100px; height: 100px; background-color: red; float: left;">第一个div</div>
  <div style="width: 200px; height: 200px; background-color: blue; float: left;">第二个div</div>
  <div style="width: 300px; height: 300px; background-color: green; float: left;">第三个div</div>
</body>	
check the result

这下我们就清楚了float的作用了,当然有float:left就有float:right,一个是左浮,一个是右浮。

当然还有一个事情不得不记一下,因为发现这个现象我还是有点惊讶的,看个例子:

<!DOCTYPE html>
<head>
<meta charset=utf-8 />
<title>DIV布局</title>
</head>
<body>
  <div style="width: 100px; height: 100px; background-color: red;">第一个div</div>
  <div style="width: 200px; height: 200px; background-color: blue; float: left;">第二个div</div>
  <div style="width: 300px; height: 300px; background-color: green; float: left;">第三个div</div>
  <div style="width: 300px; height: 300px; background-color: gray;">第四个div</div>
  <div style="width: 200px; height: 200px; background-color: pink; float: left;">第五个div</div>
  <div style="width: 300px; height: 300px; background-color: yellow;">第六个div</div>
</body>	
check the result

如果设置了float的div和没设置float的div混合,效果就是这样,其中的规律我总结了一下:设置了float的div会按照其原来的位置浮动,但是不会影响没有设置浮动div的位置。当然,这个规律知道就行了,我可不会笨到混用。

好了,来试试W3School的页面布局吧。

<!DOCTYPE html>
<head>
<meta charset=utf-8 />
<title>DIV布局</title>
</head>
<body style="background-color: #F9F9F9;">
  <div style="width: 1120px; height: 2200px; background-color: #FFFFFF; margin: 0px auto;">
    <div style="width: 1100px; height: 90px; margin: 0px auto;">
      <div style="width: 370px; height: 90px; background-color: #BEBEBE; float: left;">W3School</div>
      <div style="width: 730px; height: 90px; background-color: #0C5A8D; float: left;">广告</div>
    </div>
    <div style="width: 1100px; height: 55px; background-color: #FFFFFF; margin: 0px auto;">导航栏</div>
    <div style="width: 1100px; height: 2000px; background-color: #FFFFFF; margin: 0px auto;">
      <div style="width: 180px; height: 2000px; background-color: #EFEFEF; float: left;">课程表</div>
      <div style="width: 740px; height: 2000px; background-color: #FFFFFF; float: left;">教程</div>
      <div style="width: 180px; height: 2000px; background-color: #EFEFEF; float: left;">工具箱</div>
    </div>
    <div style="width: 1100px; height: 55px; background-color: #B6B6B6; margin: 0px auto;">尾部栏</div>
  </div>
</body>	
check the result

是不是有点像,有点成就感呢?在这里有几个知识点要记录一下:1、body中也能通过设置style来设置背景色;2、为了让div居中,可以通过style设置margin: 0px auto;,这里margin的意思是边距,但是不是这次的重点,就知道这个小技巧可以让div居中就行啦;3、通过div嵌div就可以实现复杂布局了。

这个页面做出来还是比较有成就感的,但是感觉内容还是有点空洞呀!

如果您觉得此教程不错,想支持一下,您可以通过支付宝扫码给我们一点,不要超过100元哦!
评论请先登录