HTML基本布局

1、新建一个HTML文档，如图所示

2、定义页眉，页脚，侧边栏和内容，在body标签里输入

<div class="">

    <div id="">页眉</div>

    <div class="">侧边栏</div>

    <div class="">主内容</div>

    <div id="">页脚</div>

</div>

如图所示

3、然后定义他们的id和class，如图所示

4、然后在head标签里定义css文件，如图所示

5、编写全体输入

* {

    margin: 0;

    padding: 0;

}

如图所示

6、编辑定位整体，输入

.wrapper {

    width: 960px;

    margin-left: auto;

    margin-right: auto;

    color: #fff;

    font-size: 30px;

    text-align: center;

}

如图所示

7、编写页眉，输入

#header {

    height: 100px;

    background: #38382e;

    margin-bottom: 10px;

}

8、编写页脚。输入

#footer {

    background: #cc4ad5;

    height: 100px;

    text-align: center;

    clear: both;

}

9、编写侧边栏，输入

.sidebar {

    float: left;

    width: 220px;

    margin-right: 20px;

    margin-bottom: 10px;

    height: 300px;

    background: #5d33cf;

}

10、编写内容部分，输入

.content {

    float: left;

    width: 720px;

    height: 300px;

    background: #c8ca30;

    margin-bottom: 10px;

}

11、最后按f12预览即可