[網頁設計]模仿某網站招聘列表

引言

       關注到一朋友所在公司的網站，看到招聘信息部分，忽然覺的這個效果簡單而且可複用，而後本身就練習了一把。

缺點

      點擊標題展開內容後，文字有點抖動，還沒排查出來問題所在。

頁面

 1 <div class='jobs_box'> 2   <h2 class='up'><b>高級Java軟件工程師</b></h2> 3   <div class='hp_cont' style="display:none"> 4     <h3>崗位職責</h3> 5     <ul> 6       <li>負責系統架構設計和優化。</li> 7       <li>參與核心模塊的編碼與開發。</li> 8       <li>指導軟件工程師的開發</li> 9       <li>瞭解互聯網的技術發展，評估外部技術與解決方案</li>10       <li>提供團隊的技術分析，設計和編碼能力</li>11     </ul>12     <h3>任職要求:</h3>13     <ul>14       <li>計算機相關專業本科以上學歷，大型互聯網經驗者優先；</li>15       <li>2-5年大型分佈式應用系統分析、設計、開發經驗；</li>16       <li>2年SSH(Struts, Spring, Hibernate)實踐經驗；</li>17       <li>在可擴展、高性能，高併發，高穩定性系統設計，開發和調優方面有實際經驗；</li>18       <li>JAVA技術知識紮實，熟悉IO，多線程，異步處理，集合類等基礎框架，熟悉緩存，消息，搜索等機制；</li>19     </ul>20   </div>21 </div>22 <div class='jobs_box'>23   <h2 class='up'><b>高級C#軟件工程師</b></h2>24   <div class='hp_cont' style="display:none">25     <h3>崗位職責</h3>26     <ul>27       <li>負責系統架構設計和優化。</li>28       <li>參與核心模塊的編碼與開發。</li>29       <li>指導軟件工程師的開發</li>30       <li>瞭解互聯網的技術發展，評估外部技術與解決方案</li>31       <li>提供團隊的技術分析，設計和編碼能力</li>32     </ul>33     <h3>任職要求:</h3>34     <ul>35       <li>計算機相關專業本科以上學歷，大型互聯網經驗者優先；</li>36       <li>2-5年大型分佈式應用系統分析、設計、開發經驗；</li>37       <li>2年SSH(Struts, Spring, Hibernate)實踐經驗；</li>38       <li>在可擴展、高性能，高併發，高穩定性系統設計，開發和調優方面有實際經驗；</li>39       <li>JAVA技術知識紮實，熟悉IO，多線程，異步處理，集合類等基礎框架，熟悉緩存，消息，搜索等機制；</li>40     </ul>41   </div>42 </div>

 

 

CSS

body  {    margin:0px;    padding:0px;    font-size:10px;  }    .jobs_box  {    width:590px;    margin:20px 0 0 10px;    border-bottom:1px dashed #e7eaec;  }    .jobs_box ul   {    list-style-type:decimal;  }    .jobs_box ul li   {    margin-left:15px;  }    .jobs_box .up, .jobs_box .down  {    width:16px;    height:16px;      }      .jobs_box .up {background:url(images/plus.png) no-repeat;}  .jobs_box .down{background:url(images/minus.png) no-repeat;}    .jobs_box h2  {    font-size:14px;    line-height:24px;    cursor:pointer;  }    .jobs_box h2 b   {    float:left;    width:560px;    margin:-3px 0 0 30px;      }    .jobs_box h3  {    padding-top:30px;      }    .jobs_box .hp_cont  {    padding:0 15px 0 25px;      }

 

 

jQuery代碼

<script type='text/javascript'>  $(function(){    $(".jobs_box").each(function(){      $(this).children('.up').click(function(){        if($(this).hasClass('up')){          $(this).removeClass('up').addClass('down');        }else{          $(this).removeClass('down').addClass('up');        }                if($(this).next('.hp_cont').parent().siblings().children('h2').hasClass('down')){          $(this).next('.hp_cont').parent().siblings().children('h2').removeClass('down').addClass('up');        }        $(this).next('.hp_cont').slideToggle().parent().siblings().children('.hp_cont').slideUp();      });    });  });</script>

 

 

效果圖