仿京東電商網站通用導航_ZenDei技術網路在線

效果圖 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <link rel="stylesheet" href="css/ui.css"> <link rel ...

效果圖

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <link rel="stylesheet" href="css/ui.css">
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
<!-- 導航nav -->
<div class="container clearfix mt-40">
    <div class="wp navbar">
        <div class="macth_xv_navlist">
            <div class="macth_xv_menu">
                <!-- 側導航 -->
                <div class="macth_xv_categorys">
                    <div class="macth_xv_cat_title">
                        <h2 class="macth_cat_name"><a href="###">全部商品分類<b class="macth_xv_icon_bai"></b></a></h2>
                    </div>
                    <div class="macth_xv_cat_catlist ">
                        <ul class="macth-dropdown-menu" data-bind="foreach:navData">
                            <li class="macth_xvitem" data-bind="attr:{'data-submenu-id':$data.id}">
                                <h3>
                                    <span><i><img src="images/homeicon.png"></i></span><span class="macth_xvh3_a"><a href="javascript:void(0)" data-bind="text:$data.title"></a></span><s></s>
                                </h3>
                                <div data-bind="attr:{'id':$data.id}" class="macth_popover">
                                    <div class="macth_popover-content">
                                        <ul class="macth_content_ul" data-bind="foreach:$data.content">
                                            <li class="macth_nav_li">
                                                <a class="macth_xvnav_li_alist" href="###" data-bind="text:$data.title"></a>
                                                <ul class="macth_xvnav_li_ul" data-bind="foreach:$data.content">
                                                    <li><a href="###" data-bind="text:$data"></a></li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="macth_cat-right">
                                        <a href="###" target="_blank"><img src="images/rightbanner.jpg" style="margin-top: 6px"></a>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>

                <!-- 主導航 -->
                <ul class="macth_xv_nav">
                    <li class="macth_liactive"><a href="###">首頁</a></li>
                    <li><a href="###">職場測算</a></li>
                    <li><a href="###">工資評估</a></li>
                    <li><a href="###">薪資穿越</a></li>
                    <li><a href="###">職場生活</a></li>
                    <li><i class="macth_nav_new"></i><a href="###">我要招人</a></li>
                    <li><a href="###">誠招加盟</a></li>
                </ul>

                <!-- 收益相關 -->
                <div class="macth_xv_login">
                    <div class="macth_xvlogin_list scroll-top">
                        <div class="scroll_title">今日收益榜</div>
                            <ul class="infoList">
                                <li>
                                    <span>張**</span>
                                    <span>簡歷被購買<strong>27次</strong></span>
                                    <span>收入<strong>108元</strong></span>
                                </li>
                                <li>
                                    <span>王**</span>
                                    <span>簡歷被購買<strong>19次</strong></span>
                                    <span>收入<strong>76元</strong></span>
                                 </li>
                                <li>
                                    <span>李**</span>
                                    <span>簡歷被購買<strong>43次</strong></span>
                                    <span>收入<strong>172元</strong></span>
                                </li>
                                <li>
                                    <span>趙**</span>
                                    <span>簡歷被購買<strong>31次</strong></span>
                                    <span>收入<strong>124元</strong></span>
                                </li>
                                <li>
                                    <span>何**</span>
                                    <span>簡歷被購買<strong>29次</strong></span>
                                    <span>收入<strong>116元</strong></span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
        </div>
    </div>
</div>

    <script src='https://libs.baidu.com/jquery/1.7.1/jquery.min.js'></script>
    <script src="js/jquery.aimmenu.js"></script>
    <script src="js/knockout.js"></script>
    <script src="js/data.js"></script>
    <script src="js/script.js"></script>
</body>
</html>

ui.css

@charset "utf-8";
    /*reset*/
* {
    word-wrap:break-word
}
html,body,h1,h2,h3,h4,h5,h6,hr,p,iframe,dl,dt,dd,ul,ol,li,pre,form,button,input,textarea,th,td,fieldset {
    margin:0;
    padding:0
}
ul,ol,dl {
    list-style-type:none
}
html,body {
    *position:static
}
html {
    font-family:sans-serif;
    -webkit-text-size-adjust:100%;
    -ms-text-size-adjust:100%
}
address,caption,cite,code,dfn,em,th,var {
    font-style:normal;
    font-weight:normal
}
input,button,textarea,select,optgroup,option {
    font-family:inherit;
    font-size:inherit;
    font-style:inherit;
    font-weight:inherit
}
input,button {
    overflow:visible;
    vertical-align:middle;
    outline:none
}
body,th,td,button,input,select,textarea {
    font-family:"Microsoft Yahei","Hiragino Sans GB","Helvetica Neue",Helvetica,tahoma,arial,Verdana,sans-serif,"WenQuanYi Micro Hei","\5B8B\4F53";
    font-size:12px;
    color:#333;
    -webkit-font-smoothing:antialiased;
    -moz-font-smoothing:antialiased
}
body {
    line-height:1.6;
    background:#fff
}
h1,h2,h3,h4,h5,h6 {
    font-size:100%
}
a,area {
    outline:none;
    blr:expression(this.onFocus=this.blur())
}
a {
    text-decoration:none;
    cursor:pointer
}
a:hover {
    text-decoration:underline;
    outline:none
}
a.ie6:hover {
    zoom:1
}
a:focus {
    outline:none
}
a:hover,a:active {
    outline:none
}
:focus {
    outline:none
}
sub,sup {
    vertical-align:baseline
}
/*img*/
img {
    border:0;
    vertical-align:middle
}
a img,img {
    -ms-interpolation-mode:bicubic
}
.img-responsive {
    max-width:100%;
    height:auto
}
/*IE下a:hover 背景閃爍*/
*html {
    overflow:-moz-scrollbars-vertical;
    zoom:expression(function(ele) {
    ele.style.zoom = "1";
    document.execCommand("BackgroundImageCache",false,true)
}
(this))}/*HTML5 reset*/
header,footer,section,aside,details,menu,article,section,nav,address,hgroup,figure,figcaption,legend {
    display:block;
    margin:0;
    padding:0
}
time {
    display:inline
}
audio,canvas,video {
    display:inline-block;
    *display:inline;
    *zoom:1
}
audio:not([controls]) {
    display:none
}
legend {
    width:100%;
    margin-bottom:20px;
    font-size:21px;
    line-height:40px;
    border:0;
    border-bottom:1px solid #e5e5e5
}
legend small {
    font-size:15px;
    color:#999
}
svg:not(:root) {
    overflow:hidden
}
fieldset {
    border-width:0;
    padding:0.35em 0.625em 0.75em;
    margin:0 2px;
    border:1px solid #c0c0c0
}
input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button {
    height:auto
}
input[type="search"] {
    -webkit-appearance:textfield;
    /* 1 */-moz-box-sizing:content-box;
    -webkit-box-sizing:content-box;
    /* 2 */box-sizing:content-box
}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration {
    -webkit-appearance:none
}
/*清楚浮動
    Name:style_clearfix
    Example:class="clearfix|cl"
    Explain:clearfix（簡寫cl）避免因數元素浮動而導致的父元素高度缺失能問題
*/
.cl:after,.clearfix:after {
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden
}
.cl,.clearfix {
    zoom:1
}
/*2.3 佈局(固定)
    Name:style_Layout
    Explain:左右兩欄|左中右三欄|上中下
    Last Modify:guojunhui
*/
.container,.wp {
    margin-left:auto;
    margin-right:auto;
    text-align:left
}
.wp {
    width:1200px
}
/*3.1 排版*/
/*3.1.1 標題
    Example：
    <h1>h1. 大標題<small>小標題</small></h1>
    <h2>h2. 大標題<small>小標題</small></h2>
    <h3>h3. 大標題<small>小標題</small></h3>
    <h4>h4. 大標題<small>小標題</small></h4>
    <h5>h5. 大標題<small>小標題</small></h5>
    <h6>h6. 大標題<small>小標題</small></h6>
*/
h1,h2,h3,h4,h5,h6 {
    font-weight:500;
    line-height:1.1;
    color:inherit
}
h1 small,h2 small,h3 small,h4 small,h5 small,h6 small,h1 .small,h2 .small,h3 .small,h4 .small,h5 .small,h6 .small {
    font-weight:normal;
    line-height:1;
    color:#999
}
h1,h2,h3 {
    margin-top:20px;
    margin-bottom:10px
}
h1 small,h2 small,h3 small,h1 .small,h2 .small,h3 .small {
    font-size:65%
}
h4,h5,h6 {
    margin-top:10px;
    margin-bottom:10px
}
h4 small,h5 small,h6 small,h4 .small,h5 .small,h6 .small {
    font-size:75%
}
h1 {
    font-size:36px
}
h2 {
    font-size:30px
}
h3 {
    font-size:24px
}
h4 {
    font-size:18px
}
h5 {
    font-size:14px
}
h6 {
    font-size:12px
}
/*3.1.2 強調
    Example:<p>這是段落，向下10像素間距</p>
    <smail>小型文本，是父容器字體大小的85%</smail>
    <strong>重要文本，加粗顯示</strong>
    <em>被強調的文本，斜體顯示</em>
    <u>帶下劃線的文本</u>
    <cite>引用</cite>
    <mark>突出顯示文本</mark>
    <del>帶刪除線的文本</del>
    <pre>預格式化的文本</pre>
*/
p {
    margin-bottom:10px
}
/*段落*/
small {
    font-size:85%
}
/*小型文本*/
b,strong {
    font-weight:bold
}
/*重要的文本，加粗*/
em {
    font-style:italic
}
/*被強調的文本*/
i {
    }/*斜體*/
u {
    }/*加下劃線*/
cite {
    font-style:normal
}
/*引用*/
mark {
    color:#000;
    background:#ff0
}
/*突出顯示文本*/
var {
    }/*變數*/
kbd {
    }/*鍵盤文本*/
code {
    }/*電腦代碼文本*/
dfn {
    font-style:italic
}
/*一個定義項目*/
del {
    font-family:Simsun
}
/*刪除線*/
code,kbd,pre,samp {
    font-family:monospace,serif;
    font-size:1em
}
pre {
    white-space:pre-wrap
}
/*預格式化的文本*/
.uppercase {
    text-transform:uppercase
}
/*文字大寫*/
.lowercase {
    text-transform:lowercase
}
/*文字小寫*/
.capitalize {
    text-transform:capitalize
}
/*首字母大寫*/
.en {
    font-family:Arial!important
}
/*3.1.3 對齊
    Name:style_text-align
    Example:class="ftext-l/text-r/text-c"
    Explain:.text-水平對齊 （.text-l左對齊/.text-r右對齊/.text-c居中對齊）
                    .va-上下對齊 （.va-t 居上對齊 .va-m 居中對齊 .va-b 居下對齊）
*/
.text-l {
    text-align:left
}
.text-r {
    text-align:right
}
.text-c {
    text-align:center
}
.va-t {
    vertical-align:top!important
}
.va-m {
    vertical-align:middle!important
}
.va-b {
    vertical-align:bottom!important
}
/*3.1.4 定位
    Name:style_position
    Example:class="pos-r/pos-a/pos-f"
    Explain:.pos-r 相對定位/.pos-a 絕對定位/.pos-f 固定
*/
.pos-r {
    position:relative
}
.pos-a {
    position:absolute
}
.pos-f {
    position:fixed
}
/*3.1.5 浮動
    Name:style_float
    Example:class="l/r"
    Explain:.l 左浮動/.r 右浮動
*/
.l {
    float:left!important;
    _display:inline
}
.r {
    float:right!important;
    _display:inline
}
[class*="span"].r,.row-fluid [class*="span"].r {
    float:right
}
/*3.1.6 文字單行溢出省略號
    Name:style_text-overflow
    Example:class="text-overflow"
*/
.text-overflow {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}
/*3.1.7 線條
    Name:style_line
    Example:class="line"
*/
.line {
    font-size:0px;
    line-height:0px;
    border-top:solid 1px #ddd;
    float:none;
}
/*3.1.8 外邊距
    Name:style_margin
    Example:class="mt-5/mt-10/..."
    Explain:.mt表示上邊距/.mb表示下邊距/.ml表示左邊距/.mr表示右邊距
*/
.mt-5 {
    margin-top:5px
}
.mt-10 {
    margin-top:10px
}
.mt-15 {
    margin-top:15px
}
.mt-20 {
    margin-top:20px
}
.mt-30 {
    margin-top:30px
}
.mt-40 {
    margin-top:40px
}
.mb-5 {
    margin-bottom:5px
}
.mb-10 {
    margin-bottom:10px
}
.mb-15 {
    margin-bottom:15px
}
.mb-20 {
    margin-bottom:20px
}
.mb-30 {
    margin-bottom:30px
}
.mb-40 {
    margin-bottom:40px
}
.ml-5 {
    margin-left:5px
}
.ml-10 {
    margin-left:10px
}
.ml-15 {
    margin-left:15px
}
.ml-20 {
    margin-left:20px
}
.mr-30mr-30 {
    margin-left:30px
}
.ml-40 {
    margin-left:40px
}
.mr-5 {
    margin-right:5px
}
.mr-10 {
    margin-right:10px
}
.mr-15 {
    margin-right:15px
}
.mr-20 {
    margin-right:20px
}
.mr-30 {
    margin-right:30px
}
.mr-40 {
    margin-right:40px
}
/*3.1.9 內填充
    Name:style_padding
    Example:class="pt-5/pt-10/……"
    Explain:.pt表示上填充/.pb表示下填充/.pl表示左填充/.pr表示右填充
*/
.pt-5 {
    padding-top:5px
}
.pt-10 {
    padding-top:10px
}
.pt-20 {
    padding-top:20px
}
.pb-5 {
    padding-bottom:5px
}
.pb-10 {
    padding-bottom:10px
}
.pb-20 {
    padding-bottom:20px
}
.pl-5 {
    padding-left:5px
}
.pl-10 {
    padding-left:10px
}
.pl-20 {
    padding-left:20px
}
.pr-5 {
    padding-right:5px
}
.pr-10 {
    padding-right:10px
}
.pr-20 {
    padding-right:20px
}
.pd-5 {
    padding:5px
}
.pd-10 {
    padding:10px
}
.pd-15 {
    padding:15px
}
.pd-20 {
    padding:20px
}
.pd-30 {
    padding:30px
}
.pd-40 {
    padding:40px
}
/*3.1.10 邊框，css3圓角
    Name:style-border
    Example:class="bk_gray radius"
    Explain:.bk_gray 邊框/bk_gray radius圓角邊框
*/
.bk-gray {
    border:solid 1px #ddd
}
.radius {
    border-radius:4px
}
/*3.1.11 css3陰影
    Name:style_shadow
    Example:class="box_shadow"
    Explain:css3陰影，IE下顯示1像素邊框
*/
.box-shadow {
    background-color:#fff;
    border:solid 1px #ddd\9;
    box-shadow:1px 1px 2px 2px #ddd;
    behavior:url(ie-css3.htc)
}
.text-shadow {
    text-shadow:1px 1px 2px 2px #ddd;
    -webkit-text-shadow:1px 1px 2px 2px #ddd;
    -moz-text-shadow:1px 1px 2px 2px #ddd;
    behavior:url(ie-css3.htc)
}
/*3.1.12 行內分割豎線
    Name:style_pipe
    Example:<span class="pipe">|</span>
*/
.pipe {
    margin:0 5px;
    color:#CCC;
    font-size:10px!important
}
/*3.1.13 文字尺寸
    Name:style_font-size
    Example:class="f12/f14/f16/f18/f20"
    Explain:12px字體/14px字體/16px字體/18px字體/20px字體
*/
.f-12 {
    font-size:12px
}
.f-14 {
    font-size:14px
}
.f-16 {
    font-size:16px
}
.f-18 {
    font-size:18px
}
.f-20 {
    font-size:20px
}
.f-24 {
    font-size:24px
}
.f-30 {
    font-size:30px
}
/*3.1.14 文字行距
    Name:mod_line-height
    Example:class="l16/l18/l20/l22/l24/l26/l28/l30"
    Explain:16px行高、18px行高、20px行高、22px行高、24px行高、26px行高、30px行高
*/
.l16 {
    line-height:16px
}
.l18 {
    line-height:18px
}
.l20 {
    line-height:20px
}
.l22 {
    line-height:22px
}
.l24 {
    line-height:24px
}
.l26 {
    line-height:26px
}
.l28 {
    line-height:28px
}
.l30 {
    line-height:30px
}
/*3.1.15 文字顏色
    Name:style_color
    Example:class="c-red|