xx闪购—logo和分类导航

头部导航栏包含三部分：

1.logo

2.中间商品的类别

3.搜索框

 

一.页面的结构：

1.最外面div包裹着所有内容 高度 和 背景 ——>里面的div 是控制 宽度 和在 页面上居中 ——>三个紧挨的三个div 分别包括：logo、中间商品的、搜索框；

<div>
        <div>
            <!--div*3 + 回车-->
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>

 

二.页面结构更清晰化：

2.每一块具体位置：

<div class="header">
        <!--居中 -->
        <div class="container">
            <div class="header-log"></div>
            <!-- 头部下面 的导航 -->
            <div class="header-nav"></div>
            <!-- 头部下面 的搜索框 -->
            <div class="header-search"></div>
        </div>
    </div>

/* header */
.header {
    height: 100px;
}
.header-log {
    float: left;
    width: 62px;
    /* 设置 高度 */
    margin-top: 22px;
    height: 55px;
    /* 加 边框 */
    border : 1px solid black;
}
.header-nav {
    float: left;
    width: 820px;
    height: 100px;
    border : 1px solid black;
}
.header-search {
    float: right;
    width: 296px;
    height: 50px;
    margin-top: 25px;
    border : 1px solid black;
}

在浏览器中显示的效果！

 

2.1.1. 制作logo——>从静止的图片开始：

https://www.mi.com/seckill

 

/* header */
.header {
    height: 100px;
}
.header-log {
    float: left;
    width: 62px;
    /* 设置 高度 */
    margin-top: 22px;
   /* height: 55px;*/
    /* 加 边框 */
    /*border : 1px solid black;*/
}
.header-log a {
    /* 先把A标签 修改成块元素*/
    display: block;
    width: 55px;
    height: 55px;
    /* url后面的.表示返回上一级 no-repear 50% 50%不循环 */
    background: #ff6700 url(../img/logo12.png) ;
}

在浏览器中显示的效果！

2.1.2. 网速不好时，显示用“小米官网”字代替 图片：

<div class="header">
        <!--居中 -->
        <div class&