学成在线 （一）

学成在线---header部分

1.建立一个文件夹 ： 包括index.html style.css images

2.确定版心 .w 作为公共类 方便引用

3.header 直接量 量学成在线logo部分的宽度 作为头部宽度 然后设定一个上下magrin

* {
    padding: 0;
    margin: 0;
}
li {
    list-style: none;
}
a {
    text-decoration: none;
}
.w {
    width: 1200px;
    margin: auto;
}
.header {
    height: 42px;
    margin: 30px auto;
    /* background-color: pink; */
}

4.header---logo部分

<div class="logo">
            <img src="../STUDY/images/logo.png" alt="">
</div>


.header .logo {
    float: left;
    width: 198px;
    height: 42px;
}

 

5.header--nav部分

注意：a一般在ul的li里面   hover 边框时要给a 加高度（把a转换成块元素）否则下边框会紧贴着a

nav li a直接给高度 不需要给宽度 因为每个a字数不一样 用padding量a之间的距离撑开就好 

         

 <div class="nav">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">课程</a></li>
                <li><a href="#">职业规划</a></li>
            </ul>
 </div>



.header .nav {
    float: left;
    height: 42px;
    margin-left: 60px;
}

.header ul li {
    float: left;
    padding: 0 5px;
}
.header .nav ul li a {
    display: block;
    height: 42px;
    line-height: 42px;
    padding: 0 16px;
    font-size: 18px;
    color: #050505;
}
.header .nav ul li :hover {
    border-bottom: 2px solid #00a4ff;
    color: #00a4ff;
}

6.header---search

 <div class="search">
            <input type="text" class="txt" value="请输入关键字">
            <button class="btn"></button>
 </div>


.header .search {
    float: left;
    width: 412px;
    height: 42px;
    margin-left: 60px;
    background-color: #00a4ff;
}
.search .txt {
    float: left;
    width: 345px;
    height: 40px;
    padding-left: 15px;
    border: 1px solid #00a4ff;
    border-right: 0;
    font-size: 14px;
    color: #bfbfbf;
    outline: none;
}
.search .btn {
    float: left;
    width: 50px;
    height: 42px;
    border: none;
    background-image: url(../STUDY/images/btn.png);
}

 

7.header---user 

<div class="user">
            <img src="../STUDY/images/user.png" alt="">
        </div>

.header .user {
    float: right;
    width: 120px;
    height: 38px;
    margin-right: 20px;
    padding-top: 6px;

}