쇼핑몰 왼쪽의 대형 카테고리...LOGIN

쇼핑몰 왼쪽의 대형 카테고리 탐색 메뉴에 대한 CSS 스타일 튜토리얼

이 장에서는 숨겨진 효과를 만들기 위해 CSS 스타일을 추가합니다

<style>
    *{
        margin:0;
        padding:0;
        list-style-type:none;
    }
    body{
        line-height:2em;
        font-size:12px
    }
    a{
        color:#666666;
        text-decoration:none;
    }
    /*a:hover{*/
    /*color:#cd0606;*/
    /*text-decoration:underline*/
    /*}*/
    .hc_lnav{       /*全部商品导航栏样式*/
        width:190px;
        margin-top: 70px;
        /*margin-left: 120px;*/
    }
    .hc_lnav .allbtn{
        position:relative         /*全部商品下面菜单的定位*/
    }
    .hc_lnav .allbtn h2 a{
        line-height:36px;
        background-color:#358000;
        padding-left:10px;
        width:180px;
        display:block;
        height:36px;
        color:#ffffff;
        font-size:14px;
    }
    .hc_lnav .allbtn h2 a:hover {
        background-color:#358000;      /*鼠标停留在全部商品导航栏上面的样式*/
    }
    .hc_lnav .allbtn ul {
        position:absolute;
        background-color:#60a411;        /*鼠标停留在全部商品导航栏上面下面菜单的样式*/
        width:190px;
        display:none;
        height:486px;
        top:36px;
    }
    .hc_lnav .allbtn ul li{          /*ul下面li的样式*/
        padding-bottom:7px;
        clear:both;
        cursor:default
    }
    .hc_lnav .allbtn ul li .tx{          /*每个商品大分类的样式,*/
        line-height:35px;
        background-color:#559b0d;
        padding-left:10px;
        background-repeat:no-repeat;
        height:35px;
    }
    .hc_lnav .allbtn ul li .tx a{
        font-family:微软雅黑, 黑体;
        color: #e6f8e9;font-size:14px;
    }
    .hc_lnav .allbtn ul li .tx a i{
        line-height:25px;                 /*选项旁边的图片*/
        margin-top:5px;
        width:25px;
        float:left;
        height:25px;
        margin-right:10px;
    }
    /*div里面的小图片,像各地名优茶旁边的图*/
    .hc_lnav .allbtn ul li.a1 .tx a i{background-image:url(images/header_ico1.png)}
    .hc_lnav .allbtn ul li.a2 .tx a i{background-image:url(images/header_ico2.png)}
    .hc_lnav .allbtn ul li.a3 .tx a i{background-image:url(images/header_ico3.png)}
    .hc_lnav .allbtn ul li.a4 .tx a i{background-image:url(images/header_ico4.png)}
    .hc_lnav .allbtn ul li dl{       /*菜单下面最右侧的样式*/
        zoom:1;
        color:#ffffff;
        clear:both;
        overflow:auto;
        padding-top:4px
    }
    .hc_lnav .allbtn ul li dl a{           /*菜单下面最左侧的样式*/
        line-height:22px;
        float:left;
        color:#d9e7ce;
        margin-left:6px;
        margin-right:6px;
    }
    .hc_lnav .allbtn ul li dt{        /*最右侧的分类dt样式*/
        padding-left:10px;
        width:30px;
        float:left;
        padding-top:1px
    }
    .hc_lnav .allbtn ul li dd{       /*最左侧的分类dt样式*/
        line-height:22px;
        width:150px;
        float:left;
        padding-top:2px
    }
    /*二级导航隐藏*/
    .hc_lnav .allbtn ul li .pop{            /*二级导航隐藏的样式*/
        border-bottom:#599900 2px solid;
        position:absolute;
        border-left:medium none;
        background-color:#fcfcfc;
        min-height:466px;
        padding-left:30px;
        width:640px;
        padding-right:30px;
        display:none;
        height:464px;
        border-top:medium none;
        border-right:#599900 2px solid;
        padding-top:10px;
        left:190px;
    }
    .hc_lnav .allbtn ul li .pop dl:hover{
        background-color:#f3f3f3                /*鼠标浏览二级隐藏域商品时的背景色*/
    }
    .hc_lnav .allbtn ul li .pop dl a{
        color:#666666;
        margin-left:12px;      /*二级隐藏域商品链接a标签的样式*/
        margin-right:12px
    }
    .hc_lnav .allbtn ul li .pop dt{    /*二级隐藏域最右侧的标签样式*/
        padding-left:5px;
        width:72px;
    }
    .hc_lnav .allbtn ul li .pop dd{       /*二级隐藏域左侧的商品样式标签*/
        width:565px;
        margin-left:-12px;
    }
    .hc_lnav .allbtn ul li .pop .act{         /*二级隐藏域下端的图片*/
        width:640px;
        height:80px;
        overflow:hidden;
        padding-top:10px
    }
    .hc_lnav .allbtn:hover ul{       /*控制一级菜单显示隐藏*/
        display:block
    }
    .hc_lnav .allbtn ul li:hover{
        background-color:#fcfcfc          /*鼠标停留一级隐藏域的背景色*/
    }
    .hc_lnav .allbtn ul li:hover .tx{    /*鼠标停留一级隐藏域商品分类的的背景色*/
        background-color:#f5f5f5
    }
    .hc_lnav .allbtn ul li:hover .tx a{     /*当鼠标停留在另一个a标签上面的时候,上一个a标签的颜色*/
        color:#333333
    }
    /*.hc_lnav .allbtn ul li:hover .tx a i{*/
    /*background-position:0px -25px*/
    /*}*/
    .hc_lnav .allbtn ul li:hover .pop{              /*控制二级菜单显示隐藏*/
        display:block;
        top:0px;
        left:190px
    }
    .hc_lnav .allbtn ul li:hover dl{              /*一级隐藏域和二级隐藏域最右侧的字体样式颜色*/
        color:#6e6e6e
    }
    .hc_lnav .allbtn ul li:hover a{
        color:#666666
    }
    .hc_lnav .allbtn ul li:hover a:hover{          /*鼠标停留在商品上面的字体颜色*/
        color:#cd0606
    }
</style>

위 설명에 따라 CSS 스타일을 수정하거나 위 코드를 참조하여 CSS 스타일을 다시 적용할 수 있습니다


다음 섹션
<style> *{ margin:0; padding:0; list-style-type:none; } body{ line-height:2em; font-size:12px } a{ color:#666666; text-decoration:none; } /*a:hover{*/ /*color:#cd0606;*/ /*text-decoration:underline*/ /*}*/ .hc_lnav{ /*全部商品导航栏样式*/ width:190px; margin-top: 70px; /*margin-left: 120px;*/ } .hc_lnav .allbtn{ position:relative /*全部商品下面菜单的定位*/ } .hc_lnav .allbtn h2 a{ line-height:36px; background-color:#358000; padding-left:10px; width:180px; display:block; height:36px; color:#ffffff; font-size:14px; } .hc_lnav .allbtn h2 a:hover { background-color:#358000; /*鼠标停留在全部商品导航栏上面的样式*/ } .hc_lnav .allbtn ul { position:absolute; background-color:#60a411; /*鼠标停留在全部商品导航栏上面下面菜单的样式*/ width:190px; display:none; height:486px; top:36px; } .hc_lnav .allbtn ul li{ /*ul下面li的样式*/ padding-bottom:7px; clear:both; cursor:default } .hc_lnav .allbtn ul li .tx{ /*每个商品大分类的样式,*/ line-height:35px; background-color:#559b0d; padding-left:10px; background-repeat:no-repeat; height:35px; } .hc_lnav .allbtn ul li .tx a{ font-family:微软雅黑, 黑体; color: #e6f8e9;font-size:14px; } .hc_lnav .allbtn ul li .tx a i{ line-height:25px; /*选项旁边的图片*/ margin-top:5px; width:25px; float:left; height:25px; margin-right:10px; } /*div里面的小图片,像各地名优茶旁边的图*/ .hc_lnav .allbtn ul li.a1 .tx a i{background-image:url(images/header_ico1.png)} .hc_lnav .allbtn ul li.a2 .tx a i{background-image:url(images/header_ico2.png)} .hc_lnav .allbtn ul li.a3 .tx a i{background-image:url(images/header_ico3.png)} .hc_lnav .allbtn ul li.a4 .tx a i{background-image:url(images/header_ico4.png)} .hc_lnav .allbtn ul li dl{ /*菜单下面最右侧的样式*/ zoom:1; color:#ffffff; clear:both; overflow:auto; padding-top:4px } .hc_lnav .allbtn ul li dl a{ /*菜单下面最左侧的样式*/ line-height:22px; float:left; color:#d9e7ce; margin-left:6px; margin-right:6px; } .hc_lnav .allbtn ul li dt{ /*最右侧的分类dt样式*/ padding-left:10px; width:30px; float:left; padding-top:1px } .hc_lnav .allbtn ul li dd{ /*最左侧的分类dt样式*/ line-height:22px; width:150px; float:left; padding-top:2px } /*二级导航隐藏*/ .hc_lnav .allbtn ul li .pop{ /*二级导航隐藏的样式*/ border-bottom:#599900 2px solid; position:absolute; border-left:medium none; background-color:#fcfcfc; min-height:466px; padding-left:30px; width:640px; padding-right:30px; display:none; height:464px; border-top:medium none; border-right:#599900 2px solid; padding-top:10px; left:190px; } .hc_lnav .allbtn ul li .pop dl:hover{ background-color:#f3f3f3 /*鼠标浏览二级隐藏域商品时的背景色*/ } .hc_lnav .allbtn ul li .pop dl a{ color:#666666; margin-left:12px; /*二级隐藏域商品链接a标签的样式*/ margin-right:12px } .hc_lnav .allbtn ul li .pop dt{ /*二级隐藏域最右侧的标签样式*/ padding-left:5px; width:72px; } .hc_lnav .allbtn ul li .pop dd{ /*二级隐藏域左侧的商品样式标签*/ width:565px; margin-left:-12px; } .hc_lnav .allbtn ul li .pop .act{ /*二级隐藏域下端的图片*/ width:640px; height:80px; overflow:hidden; padding-top:10px } .hc_lnav .allbtn:hover ul{ /*控制一级菜单显示隐藏*/ display:block } .hc_lnav .allbtn ul li:hover{ background-color:#fcfcfc /*鼠标停留一级隐藏域的背景色*/ } .hc_lnav .allbtn ul li:hover .tx{ /*鼠标停留一级隐藏域商品分类的的背景色*/ background-color:#f5f5f5 } .hc_lnav .allbtn ul li:hover .tx a{ /*当鼠标停留在另一个a标签上面的时候,上一个a标签的颜色*/ color:#333333 } /*.hc_lnav .allbtn ul li:hover .tx a i{*/ /*background-position:0px -25px*/ /*}*/ .hc_lnav .allbtn ul li:hover .pop{ /*控制二级菜单显示隐藏*/ display:block; top:0px; left:190px } .hc_lnav .allbtn ul li:hover dl{ /*一级隐藏域和二级隐藏域最右侧的字体样式颜色*/ color:#6e6e6e } .hc_lnav .allbtn ul li:hover a{ color:#666666 } .hc_lnav .allbtn ul li:hover a:hover{ /*鼠标停留在商品上面的字体颜色*/ color:#cd0606 } </style>
코스웨어