header区域

header：网页顶部结构常用命名，包括logo、导航nav等内容
布局类型：通栏背景，内部包含版心居中的主要内容，内容包含版心居中的主要内容，内容包含左、右浮动的两个部分
整体结构：100%的div>版心的div
注意：为了避免更改公共的版心样式，div需要重新添加一个class属性值
logo：使用h1>a结构，可以适当添加SEO搜索的关键字
nav导航：常用ul>li>a列表结构搭建 html内容

/* header 区域开始 */
<div class="heaser">
  <div class="inner-c header-c">
    /* header 区域左侧*/
    <div class="header-left">1</div>
    /* header 区域右侧*/
    <div class="header-right">2</div>
  </div>
</div>
/* header 区域结束 */

header.css内容

/* header区域*/
.header {
  width: 100%;
  height: 40px;
  background-color: #32373e;
}
.header-c {
  height: 40px;
}
.header-c .header-left {
  float: left;
}
.header-c .header-right {
  float: right;
}

首页index.html的结构布局-header整体布局

header区域