jquery-1.8.3.min.js
首先上图看一下效果是什么样的。
接着我们要准备的东西,jquery的脚本文件,可以去网上下载。jquery-1.8.3.min.js,还要就是要用到的图片
在head 标签里引用jquery。
html页面的代码结构,这里做个演示,所以测试数据就用两条吧
职位名称 | 职位类别 | 工作地点 | 招聘人数 | 发布时间 | |
---|---|---|---|---|---|
博士后 | 研发类 | 珠海,北京,武汉 | 10 | 2016-4-20 | 更多 |
1、已获得或在入站前将获得受教育认可的正规院校博士学位,入站后能够保证全职从事博士后研究; 2、计算机、信息管理、财务、金融、数学、电力等研究方向; 3、品学兼优,身体健康,年龄在35周岁以下,有多篇国内外学术期刊或者会议上发表论文。 | |||||
售前咨询顾问 | 营销类 | 珠海,北京,武汉 | 2 | 2016-4-20 | 更多 |
1、熟悉国内外最新的企业管理发展趋势,对于大型集团的管理理念、方法、流程熟悉,熟悉集团财务、供应链管理、工程项目管理、审计管理其中之一并在此领域工作多年。 2、具有有大型企业咨询、审计及售前顾问经验;拥有内部审计监控、风险、内控、财务、数据分析等项目实务操作经验或具有咨询、外部审计经验 3、有电力行业背景,持有注册会计师证书、注册内部审计师、项目管理认证等资格证书优先考虑; 4、熟悉管理软件(财务管理、ERP、供应链、风险与内控、营销、物资)的设计、分析、实施、应用或维护等经验优先考虑; 5、、软件企业售前经验优先 |
页面布局css ,样式设定:首先table :/*table 基本设定*/table { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; display: table; border-collapse: separate; } tr:nth-of-type(odd) { background: #eee; margin: 1px; padding: 0 10px; } tr, th, td, input { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } td { padding: 5px; line-height: 20px; font-size: 12px; border-bottom: 1px solid #ccc; position: relative; } tr:hover { background: #CFE7F8; color: #000; } th { background-color: #A9D0EC; color: #000; border-bottom: 1px solid #6BA4CB; height: 35px; line-height: 35px; text-align: center; padding: 0 5px; }/*外面框架div*/#ygHrListBox { margin: 20px 0 0 0; width: 830px; }/*触发特效的按钮*/ a { color: #0655a4; text-decoration: none; }/*伸缩特效css*/ .ygHrMore { display: none; } .ygHrMore1 { display: table-row; } .ygHrMore1 p { text-indent: 0; } .ygHrMore1 { display: table-row; } .ygHrMore1 td { padding: 5px 180px 5px 5px; width: 645px; } .ygHrMup { width: 30px; height: 30px; background: url('images/ygFoldBut.png') no-repeat 10px -0px; text-indent: 30px; line-height: 30px; overflow: hidden; display: block; } .ygHrMdown { width: 30px; height: 30px; background: url('images/ygFoldBut.png') no-repeat 10px -30px; text-indent: 30px; line-height: 30px; overflow: hidden; display: block; }
触发特效的js