找工作，我要和老板谈-优快云博客

本文链接：https://blog.youkuaiyun.com/2301_81323885/article/details/138805532
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 709px;
            height: 720px;
            background-color:#467cd1;
        }
        p{
            color:#ffffff;
            font-size: 28px;
        }
       .mi input{
        float: left;
        width: 459px;
        height: 33px;
        padding-left: 10px;
        padding: 0 10px;
        font-size: 14px;
        line-height: 48px;
        border:3px solid #53cac3;
        outline: none;
        transition: all 0.3s;
       }
       .box2{
        width: 90px;
        height: 33px;
        background-color: #53cac3;
        float: left;
       color: #ffffff;
        
       }
       .box4{
           width: 709px;
           height: 510px;
           float:left;
           margin-top: 10px;
           background-color: #3964a8;

       }
       .box3{
            width: 100px;
            height: 500px;
            background-color: #3964a8;
            float: left;
            font-size: 20px;
        color: #bcc2c9;
       }
       .box6{
           width: 100px;
           height: 83px;
           background-color: #3964a8;
           margin: auto;
       }
       .box7{
        width: 100px;
           height: 83px;
           background-color: #5995cd;
       }
       .box8{
        width: 100px;
           height: 83px;
           background-color: #5995cd;
       }
       .box9{
        width: 100px;
           height: 83px;
           background-color: #5995cd;

       }
       .box10{
           width: 100px;
           height: 83px;
           background-color: #5995cd;
       }
       .box11{
        width: 100px;
           height: 106px;
           background-color: #5995cd;
       }
    
       .box5{
           width: 609px;
           height: 520px;
           float:left;
           background-color: #5691cd;
       }
       .box12{
        width: 600px;
           height: 83px;
           float: left;
           background-color: #5691cd; 
       }
       .box13{
           width: 130px;
           height: 83px;
           float: left;
           background-color: #dce7f5;
           margin-left: 20px;
       }
       .box14
       {
        width: 130px;
           height: 83px;
           background-color: #dce7f5;
           margin-left: 20px;
           float: left;
       }
       .box15{
        width: 130px;
           height: 83px;
           background-color: #dce7f5;
           margin-left: 20px;
           float: left;
       }
       .box16{
        width: 130px;
           height: 83px;
           background-color: #dce7f5;
           margin-left: 20px;
           float: left;
       }
       .box17
       {
           width: 600px;
           height: 150px;
           background-color: #5691cd;
           float:left;
           margin-top:5px;
       }
       .box18{
           width: 180px;
           height: 150px;
           background-color: #fffdfb;
           float: left;
           margin-left: 20px;
           margin-top: 10px;
       }
       .box19{
        width: 180px;
           height: 150px;
           background-color: #dce7f5;
           float: left;
           margin-left: 20px;
           margin-top: 10px;
       }
       .box20{
        width: 180px;
           height: 150px;
           background-color: #dce7f5;
           float: left;
           margin-left: 20px;
           margin-top: 10px;
       }
       .box21{
        width: 180px;
           height: 70px;
           background-color: #ffffff;
           float: left;
           color: #40526e;
       }
       .box22{
        width: 180px;
           height: 80px;
           background-color: #ffffff;
           float: left;
           text-align: center;
       }
       .box23{
        width: 180px;
           height: 70px;
           background-color: #ffffff;
           float: left;
       }
       .box24{
        width: 180px;
           height: 80px;
           background-color: #ffffff;
           float: left;
           text-align: center;
       }
       .box25{
        width: 180px;
           height: 70px;
           background-color: #ffffff;
           float: left;
       }
       .box26{
        width: 180px;
           height: 80px;
           background-color: #ffffff;
           float: left;
           text-align: center;
       }
       .box27{
           width: 590px;
           height: 120px;
           margin-top: 25px;
           float: left;
           margin-left:19px ;
           background-color: #5691cd;
       }
       .box28{
        width: 180px;
           height: 110px;
           background-color: #fffdfb;
           float: left;
       }
       .box29{
        width: 180px;
           height: 60px;
           background-color: #ffffff;
           float: left;
       }
       .box30{
        width: 180px;
           height: 70px;
           background-color: #ffffff;
           float: left;
           text-align: center;
       }
       .box31{
        width: 180px;
           height: 110px;
           background-color: #ffffff;
           float: left;
           margin-left: 19px;
       }
       .box32{
        width: 180px;
           height: 60px;
           background-color: #ffffff;
           float: left;
       }
       .box33{
        width: 180px;
           height: 70px;
           background-color: #ffffff;
           float: left;
           text-align: center;
       }
       .box34{
        width: 180px;
           height: 110px;
           background-color: #ffffff;
           float: left;
           margin-left: 19px;
       }
       .box35{
        width: 180px;
           height: 60px;
           background-color: #ffffff;
           float: left;
       }
       .box36{
           
        width: 180px;
           height: 70px;
           background-color: #ffffff;
           float: left;
           text-align: center;
       }
       .box37{
        width: 590px;
           height: 110px;
           margin-top: 25px;
           float: left;
           background-color: #5691cd;
       }  
       .box38{
           width: 260px;
           height: 110px;
           margin-left: 2px;
           float: left;
           background-color: #ffffff;
       }
       .box39{
           width: 100px;
        height: 120px;
        float: left;
        background-color: #ffffff;
       }
       .box40{
        width: 159px;
        height: 120px;
        background-color: #ffffff;
        float: left;
           text-align: center;
       }
        .box41{
            width: 300px;
           height: 120px;
           margin-left: 2px;
           margin-left: 20px;
           float: left;
           background-color: #ffffff;
        }
        .box42{
            width: 130px;
        height: 110px;
        float: left;
        background-color: #ffffff;
        }
        .box43{
            width: 170px;
        height: 110px;
        background-color: #ffffff;
        float: left;
           text-align: center;
        }
       h2{
           font-weight: 900;
           color: #e68a71;
       }
    </style>
</head>
<body>
    <div class="box1">
         <p>找工作，我要跟老板谈! <br>
         <img src="../素材/img/屏幕截图 2023-12-06 192619.png" alt=""><br>
        </p>
       
            <div class="mi">
                <input type="search" name="" id=" " placeholder="搜索职位填写一份简历涨薪59%">
               
            </div>
            <div class="box2" >
              搜索职位
        </div>
        <div class="box4">
            <div class="box3">
                <div class="box6">
                   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&emsp;&emsp;&emsp;&emsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;lT
                </div>
                <div class="box7">
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;金融&nbsp;&nbsp;&nbsp;
                </div>
                <div class="box8">
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &emsp; 房地产
                </div>
                <div class="box9">
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &emsp; 消费品
                </div>
                <div class="box10">
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; 汽车制造
                </div>
                <div class="box11">
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; 医疗化工
                </div>
               
            </div>
            <div class="box5">
                <div class="box12">
                    <div class="box13">
                        <img src="../素材/img/1.jpg" alt="" width="130" height="83">
                    </div>
                <div class="box14">
                    <img src="../素材/img/2.jpg" alt="" width="130 " height="83">
                </div>
                <div class="box15">
                    <img src="../素材/img/3.jpg" alt="" width="130" height="83">
                </div>
                <div class="box16">
                    <img src="../素材/img/4.jpg" alt="" width="130" height="83">
                </div>

                </div>
                <div class="box17">
                    <div class="box18">
                        <div class="box21">
                            <img src="../素材/img/5.jpg" alt="" width="180" height="71">
                        </div>
                        <div class="box22">
                        算法工程师<h2>30k-60k</h2>
                            
                        </div>
                    </div>
                    <div class="box19">
                       <div class="box23">
                           <img src="../素材/img/6.jpg" alt="" width="180" height="70">
                       </div>
                       <div class="box24">
                        Java后端工程师<h2>20K-35K</h2>
                       </div>
                    </div>
                    <div class="box20">
                        <div class="box25">
                            <img src="../素材/img/7.jpg" alt="" width="180" height="70">
                        </div>
                        <div class="box26">
                            产品经理<h2>15K-30K</h2>
                        </div>
                       
                    </div>
                   
                </div>
                 <div class="box27">
                     <div class="box28">
                         <div class="box29">
                             <img src="../素材/img/8.jpg" alt="" width="180" height="60">
                         </div>
                         <div class="box30">
                            系统策划<h2>20K-40K</h2>
                         </div>
                     </div>
                     <div class="box31">
                        <div class="box32">
                            <img src="../素材/img/9.jpg" width="180" height="60">
                        </div>
                        <div class="box33">
                            算法工程师<h2>25K-50K</h2>
                        </div>
                     </div>
                        <div class="box34">
                            <div class="box35">
                                <img src="../素材/img/10.jpg" alt=""width="180" height="60" >
                            </div>
                            <div class="box36">
                                C++ <h2>20K-40K</h2>
                            </div>
                        </div>
                        <div class="box37">
                            <div class="box38"> 
                                <div class="box39">
                                    <img src="../素材/img/11.png" alt="" width="99" height="100">
                                </div>
                                <div class="box40">
                                    自然语言处理... <h2>20K-40K</h2>携程
                                </div>
                            </div>
                                <div class="box41">
                                    <div class="box42">
                                        <img src="../素材/img/12.jpg" alt="" width="99" height="100">
                                    </div>
                                    <div class="box43">
                                        Android开发工程师 <h2>20K-40K</h2>小米
                                    </div>
                                </div>
                        </div>
                        
                 </div> 
               
            </div>
        </div>
         
        
    </div>
    
</body>
</html>
效果图如下：