静态网页头部导航板块写法

如上图所示，是一个网页的头部和导航板块，接下来我们就用html和css实现上图的效果。

首先，划分出该页面的版心区域：

一、头部板块（header）：

因为版心两侧为白色，所有没有必要做颜色的平铺， 所以直接写版心区域：

1.左边的logo直接用h1包着img标签将logo图片导入，代码如下：

<h1>
            <img src="./images/logo.jpg" alt="">

</h1>

.header-con{
    height:100px;
}
/* 给h1 logo区域 和 右侧的表单区域添加样式 */
.header-con h1{
    width:281px;
    height:66px;
    /* 添加浮动 */
    float:left;
    /* 添加padding  调整img的位置 */
    padding:34px 0 0 20px;
}

2.再写搜索框时，需要用到两个input标签：

<