css布局实现招聘求职类网站行业选择效果代码-html代码-BFW代码库

代码语言：html

所属分类：选择器

代码描述：css布局实现招聘求职类网站行业选择效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>招聘网站职位行业选择分类</title>


    <style>
        /*职位分类*/
        .msgbg {
            width: 100%;
            height: 100%;
            position: fixed;
            left: 0;
            top: 0;
            filter: alpha(opacity = 50);
            opacity: 0.5;
            border: 0;
            overflow: auto;
            z-index: 3;
            height: 100%;
            background-color: #000;
            display: none;
        }
        .msg {
            position: fixed;
            z-index: 10;
            display: none;
        }
        .msg a {
            text-decoration: none;
            color: #7a7879
        }
        .msg a:hover {
            text-decoration: none;
            color: #ffa900
        }
        .panelBox {
            border: #ff7400 1px solid;
            background-color: #FFF;
            border-width: 5px 1px 2px 1px;
            width: 790px;
            min-height: 570px;
            position: relative;
        }
        .panelBox h2 {
            background-color: #ff7400;
            color: #FFF;
            position: relative;
            font-size: 12px;
            font-weight: normal;
            z-index: 99;
        }
        .titleBottom {
            padding-left: 70px;
            position: relative;
            height: auto!important;
            _height: 26px;
            min-height: 26px;
            padding-right: 42px;
            border-bottom: 1px solid #E3E3E3;
        }
        .panel_closebtn {
            width: 42px;
            height: 26px;
            display: block;
            text-align: center;
            line-height: 26px;
            background-color: #ff9945;
            position: absolute;
            top: -5px;
            right: 0px;
            color: #fff;
        }
        .titlebot_th {
            position: absolute;
            left: 10px;
            top: 2px;
        }
        .titleBottom b {
            color: #ff7400;
            font-size: 12px;
            cursor: pointer;
        }
        .titleBottom span {
            display: inline-block;
            margin-right: 10px;
        }
        .specialtyTable {
            border-collapse: collapse;
            border-spacing: 0;
        }
        .specialtyTable td {
            /* width: 140px; */
            padding: 0px 2px 0px 6px;
            color: #6C6C6C;
        }
        .specialtyTable th, .specialtyTable td {
            padding: 4px;
            font-size: 12px;
            line-height: 21px;
        }
        .tableTitle {
            border-bottom: #e3e3e3 1px solid;
        }
        .tableTitle {
            background-color: #F9F9F9;
            vertical-align: top;
            font-weight: bold;
            text-align: right;
            padding: 0px 10px;
            border-right: 1px solid #E3E3E3;
        }
        .tableTitle {
            border-bottom: #e3e3e3 1px solid;
        }
        .tableTitle {
            background-color: #F9F9F9;
            vertical-align: top;
            font-weight: bold;
            text-align: right;
            padding: 0px 10px;
            border-right: 1px solid #E3E3E3;
        }
        .specialtyTable td p {
            line-height: 21px;
        }
        .borderbtm {
            border-bottom: 1px solid #dedede
        }
        .twop {
            position: relative;
        }
        .tinfo {
            position: absolute;
            display: none;
            border: 1px solid #ff7b00;
            background-color: #feffef;
            display: none;
        }
        .tinfo .title {
            font-weight: bold;
            color: #333333;
            font-size: 14px;
        }
        #data_checkbox span {
            margin-right: 3px;
            display: inline-block
        }
    </style>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.1.11.min.js"></script>

</head>
<body>

    <div id="content" style="width:100%;">
        <p style="margin:60px auto;width:600px;">
            <input style="height:40px;padding:3px;width:500px;margin:0 auto;cursor:pointer;border: 1px solid #C2E5FF;box-shadow: 1px 1px 3px #ccc;" type="text" id="category" placeholder="请选择职业分类" readonly="readonly" />
        </p>
    </div>
    <!--职位开始-->
    <div id="msgbg" class="msgbg"></div>

    <div id="msg" class="msg">
        <div class="panelBox panel_select_category_b">
            <h2>
                <span style="cursor:pointer;" class="panel_closebtn close_layer">
                    确定
                </span>
            </h2>
            <div class="titleBottom">
                <b class="titlebot_th">
                    已选职位：
                </b>
                <span id="data_checkbox">

                </span>
            </div>
            <table width="100%" cellspacing="0" cellpadding="0" border="0" class="specialtyTable">
                <tbody>
                    <tr class="">
                        <td class="tableTitle" rowspan="3">
                            计算机 | 互联网 | 通信 | 电子：
                        </td>
                        <td style="padding-left: 15px;">
                            <p class="twop">
                                <a href="javascript:void(0);">
                                    计算机软件
                                </a>
                            </p>
                            <table class="tinfo">
                                <tr class="title" href="javascript:void(0)"><td colspan="2"><a class="t23" href="javasccript:void(0)">计算机软件</a></td></tr>
                                <tr><td><a class="t24" href="javascript:void(0)">程序设计软件技术开发</a></td><td><a class="t25" href="javascript:void(0)">软件开发</a></td></tr>
                                <tr><td><a class="t26" href="javascript:void(0)">网站程序</a></td><td><a class="t28" href="javascript:void(0)">美工</a></td></tr>
                                <tr><td><a class="t27" href="javascript:void(0)">网站程序fsdf</a></td><td><a class="t29" href="javascript:void(0)">美工ghdgbdf</a></td></tr>
                            </table>
                        </td>
                        <td style="padding-left: 15px;">
                            <p class="twop">
                                <a href="javascript:void(0);">
                                    计算机硬件
                            .........完整代码请登录后点击上方下载按钮下载查看