拉钩网前端项目实战03

拉钩网前端项目实战

文章目录

• 拉钩网前端项目实战
• 拉钩网前端项目实战03
• 一、search部分设计
• • 1.html部分
  • 2.css部分
• 二、banner部分设计
• • 1.html部分
  • 2.css部分
• 设计结果图

---

拉钩网前端项目实战03

search和banner部分设计

一、search部分设计

1.html部分

  <div class="search">
            <div class="searCon main">
                <div class="sear">
                    <input type="text" placeholder="搜索公司，搜索职位或地点" class="searchInp fl">
                    <a href="" class="btn fl">搜索</a>
                </div>
                <ul class="searList clearFixed">
                    <li><a href="">热门搜索：</a></li>
                    <li><a href="">24小时极速入职</a></li>
                    <li><a href="">名企校招早班车</a></li>
                    <li><a href="">Java面试</a></li>
                    <li><a href="">架构设计</a></li>
                    <li><a href="">数据分析</a></li>
                    <li><a href="">PHP</a></li>
                    <li><a href="">C++</a></li>
                </ul>

            </div>
        </div>

2.css部分

.search {
  height: 132px;
  background: #f2f5f4;
  .searCon {
    height: 102px;
    padding-top: 30px;
    .sear {
      width: 937px;
      height: 47px;
      margin-left: 133px;
      .searchInp {
        width: 794px;
        height: 45px;
        border: 1px solid #e8e8e8;
      }
      .btn {
        width: 141px;
        height: 47px;
        line-height: 47px;
        text-align: center;
        color: #fff;
        font-size: 18px;
        background: #00b38a;
      }
    }
    .searList {
      margin-left: 133px;
      font-size: 12px;
      height: 38px;
      line-height: 38px;
      li {
        float: left;
        a {
          color: #00c1cc;
          padding: 0 11px;
        }
      }
      :first-child {
        a {
          color: #778ab9;
          padding: 0;
        }
      }
    }
  }
}

二、banner部分设计

1.html部分

<div class="banner">
            <div class="banCon main clearFixed">
                <div class="banLeft fl">
                    <ul class="banList">
                        <li>
                            <a href="">技术</a>
                            <a href="">Java</a>
                            <a href="">PHP</a>
                            <a href="">区块链</a>
                            <span class="fr">&gt;</span>
                        </li>
                        <li>
                            <a href="">技术</a>
                            <a href="">Java</a>
                            <a href="">PHP</a>
                            <a href="">区块链</a>
                            <span class="fr">&gt;</span>
                        </li>
                        <li>
                            <a href="">技术</a>
                            <a href="">Java</a>
                            <a href="">PHP</a>
                            <a href="">区块链</a>
                            <span class="fr">&gt;</span>
                        </li>
                        <li>
                            <a href="">技术</a>
                            <a href="">Java</a>
                            <a href="">PHP</a>
                            <a href="">区块链</a>
                            <span class="fr">&gt;</span>
                        </li>
                        <li>
                            <a href="">技术</a>
                            <a href="">Java</a>
                            <a href="">PHP</a>
                            <a href="">区块链</a>
                            <span class="fr">&gt;</span>
                        </li>
                        <li>
                            <a href="">技术</a>
                            <a href="">Java</a>
                            <a href="">PHP</a>
                            <a href="">区块链</a>
                            <span class="fr">&gt;</span>
                        </li>
                        <li>
                            <a href="">技术</a>
                            <a href="">Java</a>
                            <a href="">PHP</a>
                            <a href="">区块链</a>
                            <span class="fr">&gt;</span>
                        </li>
                        
                    </ul>
                </div>
                <div class="banRight fr">
                    <div class="banImgBox">
                        <img src="img/banner.JPG" alt="" class="banImg">
                    </div>
                    <span class="btnLeft">&lt;</span>
                    <span class="btnRight">&gt;</span>
                </div>
            </div>
        </div>

2.css部分

.banner {
  .banCon {
    padding-top: 46px;
    .banLeft {
      width: 300px;
      .banList {
        font-size: 12px;
        li {
          margin-bottom: 33px;
          a {
            padding: 0 13px;
            color: #555555;
            :first-child {
              font-size: 17px;
              padding: 0;
            }
          }
          span {
            font-family: '宋体';
            margin-top: 5px;
            color: #555555;
          }
        }
      }
    }
    .banRight {
      position: relative;
      width: 840px;
      height: 347px;
      .banImgBox {
        width: 840px;
        height: 347px;
        .banImg{
          width: 100%;
          height: 100%;
        }
      }

      span{
        position: absolute;
        top:50%;
        margin-top: -17px;
        width: 22px;
        height: 34px;
        font-size: 34px;
        color: #000;
        font-family: '宋体';
        font-weight: blod;
      }
      .btnRight{
        right: 20px;
      }
      .btnLeft{
        left: 20px;
      }
    
      
    }
  }
}

设计结果图