八皇后问题（Css页面布局）

八皇后问题运行效果：

左侧下拉列表框中有92中计算结果，选中其中任何一项，在右侧都会显示相应的棋盘：

页面布局：

盒模型，类似于盒子，四四方方的：

margin：外边距；

border：边框；

padding：内边距：

content：内容；

在Css当中，对页面元素的选取大致有三种方式：

1、按照标签选取

2、按照ID选取

3、按照类选取

在head中对div层进行定义：

上面的定义在body中实现对div的控制，如下：

在代码中实现上述页面的布局：

下面实现对div_head和div_foot的控制：

title></title>
    <style type="text/css">
        #div_head, #div_floor {
            border:1px solid gray;
            height:30px;
        } 

    </style>

对清除浮动的层（先不用了解其含义）进行控制：

定义左右浮动层：

完善：

至此，运行效果：

改进左右浮动框：

ta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        #div_head, #div_floor {
            border:1px solid gray;
            height:30px;
        }


        #div_left {float:left;
                   border:1px solid red;
                   width:200px;
        }
        #div_right {float:right;
                    border:1px solid blue;
                    width:500px;
        }
        .clr {clear:both;}
    </style>

去掉清除浮动层，运行效果如下：

加上清除浮动层后的运行效果：

因此，我们可以了解到清除浮动层的作用；

至此，实现基本页面的布局；

作业：完成下面的页面布局

头层，中间层，底层；

头层中分为左浮动层，右边三个层都设置为有浮动层，还有清除浮动层；