拉钩网前端项目实战02

拉钩网前端项目实战

---

拉钩网前端项目实战02

头部header设计

一、header上部分设计

1.html部分

<div class="h_top">
				<div class="topCon mian clearFixed">
					<div class="conLeft fl">
						<div class="leftTxt1 fl">
							<a href="" class="logo">拉钩</a>
							<a href="" class="city">全国站</a>
							<a href="" class="city1">[切换城市]</a>
						</div>
						<ul class="ulList clearFixed fl">
							<li><a href="#">首页</a></li>
							<li><a href="#">公司</a></li>
							<li><a href="#">校园</a></li>
							<li><a href="#">言职</a></li>
							<li><a href="#">课程</a></li>
						</ul>
					</div>
					<div class="conRight fr">
						<ul class="ulList clearFixed">
							<li><a href="" class="login btn"><span></span>登录</a></li>
							<li><a href="" class="login2"><span>|</span>注册</a></li>
							<li><a href="" class="btn app"><span></span>拉钩APP</a></li>
							<li><a href="demo.html" target="_blank">进入企业版</a></li>
						</ul>
					</div>
				</div>
			</div>

2.css部分

  .h_top {
    height: 40px;
    background: #32373e;
    .topCon {
      height: 40px;
      // background:pink;
      .conLeft {
        height: 40px;
        // width: 400px;
        // background:blueviolet;
        .leftTxt1 {
          height: 40px;
          .logo {
            font-size: 22px;
            color: #00b38a;
            margin-right: 32px;
          }
          .city {
            font-size: 12px;
            color: #00b38a;
            margin-right: 14px;
          }
          .city1 {
            font-size: 12px;
            color: #afb5c0;
            margin-right: 36px;
          }
        }
        .ulList {
          line-height: 40px;
          font-size: 12px;
          li {
            float: left;
            width: 70px;
            text-align: center;
            a {
              display: block;
              color: #a3b5a7;
            }
            :first-child {
              background: #24282c;
              a {
                color: #fff;
              }
            }
          }
        }
      }
      .conRight {
        height: 40px;
        // width: 400px;
        // background: chocolate;
        .ulList {
          line-height: 40px;
          font-size: 12px;
          li {
            float: left;
            a {
              display: block;
              color: #93b5c0;
            }
            .login {
              span {
                background-position: -9px -32px;
                margin-right: 10px;
              }
            }
            .btn {
              span {
                float: left;
                width: 18px;
                height: 18px;
                background-size: 60px 106px;
                background-image: url('img/sprite.png');
                background-repeat: no-repeat;
                margin-top: 10px;
              }
            }
            .login2 {
              margin-right: 40px;
              span {
                padding: 0 12px;
              }
            }
            .app {
              span {
                background-position: -33px -32px;
              }
            }
            :last-child {
              margin-right: 8px;
              a {
                color: #93b5c0;
              }
            }
          }
        }
      }
    }
  }

二、header下部分设计

1.html部分

 <div class="h_bottom">
                <div class="botCon main">
                    <div class="conLeft fl">
                        <div class="imgBox">
                            <img src="img/footer_lagou.png" alt="" >
                        </div>
                        <div class="txtBox">7555585家公司|67676767个职位在拉钩等你</div>
                    </div>
                    <div class="conRight fr">
                        <div class="btnBox">
                            <input type="text" placeholder="输入手机号" class="fl txt1"/>
                            <p class="fl pBtn">
                                <input type="text" placeholder="验证码" class="txt2"/>
                                |
                                <a href="" class="aTxt2">获取</a>
                            </p>
                            <input type="submit" value="登录/注册" class="fl btnSub">
                        </div>
                    </div>
                </div>
            </div>

2.css部分：

 .h_bottom {
    height: 120px;
    background: #00b38a;
    .botCon {
      height: 120px;
      //   background: rosybrown;
      .conLeft {
        position: relative;
        width: 566px;
        height: 120px;
        background: url('img/logo.png') no-repeat;
        background-size: 226px 100%;
        .imgBox {
          position: absolute;
          top: 32px;
          left: 232px;
        }

        .txtBox {
          position: absolute;
          top: 76px;
          left: 232px;
          font-size: 12px;
          color: #fff;
        }
      }
      .conRight {
        width: 454px;
        height: 120px;
        position: relative;
        .btnBox {
          position: absolute;
          top: 50%;
          width: 100%;
          margin-top: -18px;
          height: 36px;
          color: #757575;
          font-size: 12px;
        //   background: chartreuse;
          .txt1 {
            width: 163px;
            height: 36px;
            margin-right: 25px;
            text-indent: 10px;
          }
          .pBtn{
            width: 148px;
            height: 36px;
            margin-right: 12px;
            background: #fff;
            .txt2{
                width: 94px;
                height: 36px;
                text-indent: 10px;
              }
              aTxt2{
                padding: 6px 4px 9px;
                color: #00b38a;
              }
          }
        
          .btnSub{
              width: 106px;
              height: 36px;
              border:1px solid #ccefe7;
              background:transparent;
              color: #ccefe7;
          }
        }
      }
    }
  }

3.清除默认样式

// img标签下方会有3-5像素的边距
img {
  display: block;
}
input {
  border: none;
}

产生原因：
img属于行内块元素，div中的img的vertical-align默认是baseline，baseline距离div的下边界有3-5像素
解决办法
（1）将img标签设为块级元素

img {
	    display: block;
	 }

（2）为img设置浮动

  img {
      float: left;
   }

（3）设置图片的垂直对齐方式

img {
      vertical-align: top/text-top/middle/bottom/text-bottom
   }

（4）改变父元素的宽和高属性
如果父对象的宽、高固定，图片大小随父对象而定，那么可以添加以下的一个属性来去掉图片下面的空间像素：

  div {
      width: 100px;
      height: 300px;
      overflow: hidden;
   }

(5)为父元素设置font-size: 0

 div {
    font-size: 0;
 }

(6)为父元素设置line-height: 0

	 div {
  line-height: 0;
 }

结果成图