当前位置:Gxlcms > html代码 > 模仿某网站招聘列表_html/css_WEB-ITnose

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

时间:2021-07-01 10:21:17 帮助过:35人阅读

引言

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

缺点

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

页面

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

效果图

人气教程排行