布局的划分：一定是先水平，后垂直

<div id="header">
    <div class="header">
        <div class="header_left">
            <div>
                <span>IT</span>-精品学习网
            </div>
            <div>
                <a href="">
                    <img src="./img/cptub.png" alt="">
                    核心产品
                    <i class="icon-icon-test iconfont"></i>
                </a>
            </div>
        </div>
        <div class="header_right">
        </div>
    </div>
</div>

body{
    font-size: 16px;
}
a{
    text-decoration:none;
}
/*设置顶部样式 */
#header{
    width:100%;   /*最上面的栏的*/
    height:40px;
    /*background: red;*/
    border:1px solid red;
}
.header{
    width:70%;  /*里面的小框*/
    height:40px;
    /*background: green;*/
    /*定义边框*/
    border:1px solid red;
}
.header_left{
    width:260px;
    height:40px;
    /*background: aqua;*/
    float:left;
    border:1px solid red;
}
/*设置顶部左侧div中的两个div浮动*/
.header_left>div:first-child{
    float:left;
}
.header_left>div:last-child{
    float:right;
}
/*设置头部内容样式*/
.header_left>div{ /*旗下的所有div都是这个属性*/
    float:left;
    /*background: red;*/
    line-height:40px; /*设置成与大div一样，这样文字就是垂直居中的了*/
    color:#8492A6;
}
.header_left>div>span{
    font-weight:bold; /*加粗，与b标签是一个效果*/
}
.header_left>div:nth-child(2)>a,.header_left>div:nth-child(2)>a>img{ /*设置div下面的a和img的属性*/
    color:#8492A6;
}
.header_left>div:nth-child(2)>a>img{  /*设置div下面的img的另一个属性，修改图片的大小*/
    width:20px;
}
.header_right{
    width:400px;
    height:40px;
    /*background: aquamarine;*/
    float:right;
    border:1px solid red;
}

font字体图标的使用：

iconfont-阿里巴巴矢量图标库

打开此网站，搜索相应图标，点击添加到购物车

点击购物车，点击添加至项目：

点击在线链接，复制生成的代码


在html文件中引入网络上面的css文件地址：必须有网才可以，这个的话，整个项目只需要导入一次即可

<!--引入字体图标-->
<link rel="stylesheet" href="https://at.alicdn.com/t/font_1362546_avlbbb6hync.css">

放进i标签里面，在i标签中加入图标的class属性：

点击复制代码，得到类名，再类名后面再加空格加iconfont，得到完整的类名，然后就成功了

<i class="icon-icon-test iconfont"></i>