div布局

发表于 2018-2-20 11:27:17

在本次学习中笔者采用的工具是Dreamweaver cs6

进入Dreamweaver后新建一个站点，在站点下建立css，images两个文件夹。在css文件夹中新建文档(main.css)用来存放控制网页各种规格的代码，images文件夹用来存放网页中涉及的一些图片，然后在站点下新建文件(index.html)用来编写网页代码。
      div在网页制作中主要用来布局分块，div的显示由css来控制。由于css被单独分开来编写，为了能与index.html产生联系我们需要编写这样一段代码:

<link href = "css/main.css" type = "text/css" rel = "stylesheet"/>

为了可以控制各个div块，我们就需要给每个div命名，在这里我们用id来声明:
<body>
         <div id = "header"></div>
         <div id = "main"></div>
         <div id = "footer"></div>
</body>
其次在main.css中来控制各个div的规格和形式，由于以上div都由id来声明所以我们在控制header，main，footer时要在其前加"#"
# header
{
   width:968px;
   height:164px;
   background:#9FF;
}
# main
{
   width:968px;
   height:600px;
   background:#CCC；
}
# footer
{
   width:968px;
   height:100px;
   background:#CCC；
}
"#CCC ，#9FF等"属于十六进制颜色代码。

怎样使多个div并排显示？

这就涉及到浮动布局了，我们只需要在待并排的多个div的css声明中添加"float:left;"或者是"float:right;"就可以使这些div并排靠左显示或并排靠右显示，当然要控制好各个div的宽度，避免超过网页本身的宽度，如果超过的话那么多出来的那个div又会在竖直方向显示。

[寒假笔记] div布局