学成在线案例制作

1. 确定版心

.w{
	width: 1200px;
	margin: auto;
}

2. 
   划线部分制作两种思路
   1）div高同logo一样，然后用padding撑上下
   2）直接高就是head区域的高，然后用padding-top撑下来

.header {
    height: 42px;
    /* background-color: pink; */
    /* 注意此地方会层叠 w 里面的margin */
    margin: 30px auto;
}
/*

.logo {
    float: left;
    width: 198px;
    height: 42px;
}
/*logo部分制作*/

3. 导航栏制作
   

.nav {
    float: left;
    margin-left: 60px;
}/*不给宽度，之后添加内容会撑开，由于是块级元素，高和父元素一致*/
.nav ul li {
    float: left;
    margin: 0 15px;
}
.nav ul li a {
    display: block;
    height: 42px;
    padding: 0 10px;
    line-height: 42px;
    font-size: 18px;
    color: #050505;   
}
.nav ul li a:hover {
    border-bottom: 2px solid #00a4ff;
    color: #00a4ff;
}

1）先调整盒子与盒子之间的间距，再调节内部的
2）加浮动是对li加，而不是a加，因为a 是行内元素，本身就在一行内
3）由于需要调节a元素的宽高，故需要将a元素转为行内块
4）因为a里面的文字不一样多，a左右用padding撑开

4. search部分
   
   1）量div宽的时候，是整个的宽，不是只有输入框的宽
   2）div里面两部分输入框和搜索按钮

/* search搜索模块 */
.search {
    float: left;
    width: 412px;
    height: 42px;
    margin-left: 70px;
}
.search input {
    float: left;
    width: 345px;
    height: 40px;
    border: 1px solid #00a4ff;
    border-right: 0;
    color: #bfbfbf;
    font-size: 14px;
    padding-left: 15px;
}
.search button {
    float: left;
    width: 50px;
    height: 42px;
    /* 按钮button默认有个边框需要我们手动去掉 */
    border: 0;
    background: url(images/btn.png);
}