前端案例分享:簡易手風琴

<!DOCTYPE html>javascript

<html>css

<head>html

<meta charset="UTF-8">前端

<title>手風琴效果</title>java

<style type="text/css">jquery

.accordions {sql

  overflow: hidden;數據庫

  width: 800px;設計模式

  height: 350px;瀏覽器

  margin: 0 auto;

}

 

.yhd-switchable-trigger {

  float: left;

  overflow: hidden;

  width: 18px;

  height: 350px;

  padding: 3px 25px;

  cursor: pointer;

  margin: 2px;

  border-right: 1px solid #f0f0f0;

  background: #CCC;

}

 

h3 {

  float: left;

  width: 18px;

  padding-top: 65px;

  margin-left: 0;

  color: #333;

}

 

strong {

  color: #f63

}

 

.yhd-switchable-panel {

  float: left;

  width: 350px;

  height: 345px;

  padding: 0;

  border: 1px solid #f63;

  border-radius: 5px

}

 

.position_list {

  list-style: none;

  text-decoration: none;

  font-family: 宋體;

  padding: 5px;

  font-size: 12px

}

 

.olitem {

  padding-top: 10px;

  padding-left: 15px

}

</style>

</head>

<div class="accordions" id="accordion">

    <div class="yhd-switchable-trigger"><h3>安卓工程師</h3></div>

    <div class="yhd-switchable-panel">

<div class="boxcontent">

<ul>

<li class="position_list"><strong>崗位職責:</strong>

<ol class="olitem">

<li>負責本部門規章制度的創建與執行;</li>

<li>負責本部門平常管理工做;</li>

<li>負責制定年度新技術新產品的開發設計,以及執行;</li>

<li>負責技術研發團隊的建設;</li>

</ol></li>

<li class="position_list"><strong>任職要求:</strong>

<ol class="olitem">

<li>本科學歷,具備4年以上Java經驗;</li>

<li>可以獨立承擔開發和設計Java Web系統能力;</li>

<li>精一般用的應用服務器(Tomcat、Weblogic、Websphere等)使用和調優;</li>

<li>精一般用的設計模式,具備較高的javascript水平;</li>

<li>精通J2EE開發和經常使用框架開發(SSH),對Java基礎API具備深刻掌握;熟悉Java設計模式者優先;</li>

<li>熟練使用Oracle等數據庫,熟練編寫各類SQL語句;</li>

<li>本職位對java能力要求達到較高水平,能擔任技術研究工做,並可以指導其餘技術人員;</li>

<li>有Android開發能力者優先;</li>

</ol><br>有意者請把簡歷發到:HR@xxxx.com</li>

</ul>

</div>

</div>

    <div class="yhd-switchable-trigger"><h3>初級工程師</h3></div>

    <div class="yhd-switchable-panel">

<div class="boxcontent">

<ul>

<li class="position_list"><strong>崗位職責:</strong>

<ol class="olitem">

<li>負責本部門規章制度的創建與執行;</li>

<li>負責本部門平常管理工做;</li>

<li>負責制定年度新技術新產品的開發設計,以及執行;</li>

<li>負責技術研發團隊的建設;</li>

</ol></li>

<li class="position_list"><strong>任職要求:</strong>

<ol class="olitem">

<li>本科學歷,具備1年以上Java開發經驗;</li>

<li>熟悉J2EE技術框架,具備獨立承擔開發Java系統模塊能力;</li>

<li>熟練使用Structs、Spring、Hibernate框架開發;</li>

<li>熟悉Java設計模式者優先;</li>

<li>熟悉Tomcat應用服務器技術及Eclipse等開發工具;</li>

<li>熟練使用Oracle、MSSQLSERVER等主流關係數據庫;</li>

<li>對數據倉庫行業有興趣;</li>

</ol><br>有意者請把簡歷發到:HR@xxxx.com</li>

</ul>

</div>    

</div>

    <div class="yhd-switchable-trigger"><h3>數據庫工程師</h3></div>

    <div class="yhd-switchable-panel">

<div class="boxcontent">

<ul>

<li class="position_list"><strong>崗位職責:</strong>

<ol class="olitem">

<li>Oracle數據庫基本診斷和維護工做;</li>

<li>維護並開發Oracle相關PL/SQL程序;</li>

<li>參與調查客戶數據分析、查詢需求和系統設計;</li>

<li>系統問題數據修改,響應用戶對系統的數據修改需求;</li>

<li>參與公司數據倉庫系統開發</li>

</ol></li>

<li class="position_list"><strong>任職要求:</strong>

<ol class="olitem">

<li>計算機及其相關專業本科以上,至少3年程序開發工做經驗;</li>

<li>可以快速接受各類新技術,可以積極主動完成工做和學習;</li>

<li>能完成較爲複雜的SQLServer或Oracle存儲過程;</li>

<li>可以對Oracle進行故障處理和基本管理;</li>

<li>有1年以上Java或dotNet等程序開發經驗更佳;</li>

<li>有數據倉庫ETL工做經驗更佳;</li>

</ol><br>有意者請把簡歷發到:HR@xxxx.com</li>

</ul>

</div>    

</div>

 <div class="yhd-switchable-trigger"><h3>安卓工程師</h3></div>

    <div class="yhd-switchable-panel">

<div class="boxcontent">

<ul>

<li class="position_list"><strong>崗位職責:</strong>

<ol class="olitem">

<li>負責網站頁面的總體美工創意、設計和頁面的實現;</li>

<li>配合網站策劃及開發人員進行相應的專題頁面製做;</li>

<li>負責公司平面宣傳品的設計;</li>

<li>全面主持設計工做,擔綱創意核心、設計指導、效果統籌、設計溝通的任務;</li>

<li>負責公司廣告、圖片、動畫、海報、logo及網頁的設計製做上傳;</li>

</ol></li>

<li class="position_list"><strong>任職要求:</strong>

<ol class="olitem">

<li>精通photoshop、coreldraw、flash、dreamweaver、div+css等;</li>

<li>兩年以上網頁美工工做經驗;</li>

<li>熟練處理CSS與IE六、IE七、IE八、FireFox等瀏覽器兼容問題;</li>

<li>具有優秀的網站總體策劃、設計能力,有豐富的網頁設計經驗;</li>

<li>具備深厚的美術功底及良好的創意構思能力;</li>

<li>具備豐富的視覺創做經驗和獨到的審美修養;</li>

<li>很好把握視覺色彩與網站佈局,思想敏銳活躍;</li>

</ol><br>有意者請把簡歷發到:HR@xxxx.com</li>

</ul>

</div>    

</div>

    <div class="yhd-switchable-trigger"><h3>前臺</h3></div>

    <div class="yhd-switchable-panel">

<div class="boxcontent">

<ul>

<li class="position_list"><strong>崗位職責:</strong>

<ol class="olitem">

<li>負責本部門規章制度的創建與執行;</li>

<li>負責本部門平常管理工做;</li>

<li>負責制定年度新技術新產品的開發設計,以及執行;</li>

<li>負責技術研發團隊的建設;</li>

</ol></li>

<li class="position_list">任職要求:

<ol class="olitem">

<li>本科學歷,具備1年以上Java開發經驗;</li>

<li>熟悉J2EE技術框架,具備獨立承擔開發Java系統模塊能力;</li>

<li>熟練使用Structs、Spring、Hibernate框架開發;</li>

<li>熟悉Java設計模式者優先;</li>

<li>熟悉Tomcat應用服務器技術及Eclipse等開發工具;</li>

<li>熟練使用Oracle、MSSQLSERVER等主流關係數據庫;</li>

<li>對數據倉庫行業有興趣;</li>

</ol><br>有意者請把簡歷發到:HR@xxxx.com</li>

</ul>

</div>    

</div>

    <div class="yhd-switchable-trigger"><h3>網站美工</h3></div>

    <div class="yhd-switchable-panel">

<div class="boxcontent">

<ul>

<li class="position_list"><strong>崗位職責:</strong>

<ol class="olitem">

<li>計算機相關專業本科畢業,優秀實習生也能夠考慮;</li>

<li>開發新的系統,參與調查客戶需求和系統設計;</li>

<li>系統問題修改,響應用戶對系統的修改需求,培訓用戶使用;</li>

<li>可以積極學習,有很好的合做態度;</li>

</ol></li>

<li class="position_list">任職要求:

<ol class="olitem">

<li>本科以上學歷,1年以上.Net開發工做經驗;</li>

<li>具備獨立承擔開發.Net項目能力;獨立設計開發.NET管理系統能力;</li>

<li>精通Visual Studio, ASP.NET, C#;</li>

<li>擁有較強的HTML, CSS和JavaScript技術;</li>

<li>熟練使用Oracle、sqlserver等主流關係數據庫;</li>

<li>熟練編寫各類複雜SQL和存儲過程語句更佳;</li>

</ol><br>有意者請把簡歷發到:HR@xxxx.com</li>

</ul>

</div>    

</div>

</div>

<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>

<script>

/*簡易手風琴效果*/

$('#accordion').find('.yhd-switchable-panel').hide();

$('#accordion').find('.yhd-switchable-trigger').click(function () {

  var next = $(this).next();

  next.toggle();

  $('.yhd-switchable-panel').not(next).hide();

  return false;

});

</script>

 

</body></html>

你要的海量學習資料,在這裏——前端/JAVA/PHP學習交流羣

相關文章
相關標籤/搜索