欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

模仿某网站招聘列表_html/css_WEB-ITnose

程序员文章站 2022-04-24 20:53:46
...

引言

关注到一朋友所在公司的网站,看到招聘信息部分,突然觉的这个效果简单并且可复用,然后自己就练习了一把。

缺点

点击标题展开内容后,文字有点抖动,还没排查出来问题所在。

页面

 1 
2

高级Java软件工程师

3 21
22
23

高级C#软件工程师

24 42

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代码

      

效果图