页面样式学习笔记 - 重工电子论坛

[HTML] syntaxhighlighter_viewsource syntaxhighlighter_copycode

<div class="nav-main">

    <div class="layout">

        <nav class="naver">

            <ul id="naver-list">

                <li id="huawei1" class="" >

                    <a href="http://www.baidu.com"><span>联想专区</span></a>

                </li>

                <li id="huawei2" class="" >

                   <a href="http://www.baidu.com" ><span>华为专区111</span></a>

                </li>

                <li id="huawei3" class="" >

                    <a href="http://www.baidu.com"><span>小米专区</span></a>

                </li>

                <li id="huawei4" class="" >

                    <a href="http://www.baidu.com"><span>OPPO专区</span></a>

                </li>                

            </ul>

            <div class="list-category">

                @*这个里面填内容*@

            </div>

        </nav>



    </div>

</div>



<script type="text/javascript">

    $("#naver-list a").hover(function () {

        $(this).addClass("hover");

        var IdValue = $(this).parent().eq(0).attr("id");

        var listCatagWidth = $("div #" + IdValue).width();

        $("div .list-category").css("width", listCatagWidth);

        

        $("div .list-category").css("left", $(this).parent().eq(0).position().left);

        $("div .list-category").css("display", "block");

    }, function () {

        $(this).removeClass("hover");

        $("div .list-category").css("display", "none");

    });

</script>

[CSS] syntaxhighlighter_viewsource syntaxhighlighter_copycode

body {

    margin:0;

    font: 12px/1.5 Arial,Helvetica,sans-serif;

}

html {

        -webkit-text-size-adjust:100%;

        -ms-text-size-adjust:100%

}

html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {

        margin:0;

        padding:0

}

a{

    cursor: pointer;

}

.nav-main{

    background-color: #ca151e;

    min-width: 1200px;

    height: 40px;

    font-family: 微软雅黑;

    padding:0;

    margin: 0;

    width:100%;



}

.layout{

    position:relative;

    display: table;

    margin: 0 auto;

    width: 1200px;

    padding:0;



}

.layout::before, .layout::after {

    content: "";

    display: table;

}

.naver{

    position: absolute;

    top: 0;

    left: 240px;

    width: 960px;

    font-family: 微软雅黑;

}



.naver ul{

    list-style: none;

    margin: 0;

    padding: 0;

}

.naver li{

    float:left;

}

.naver a{

    display: inline-block;

    *display: inline;

    *zoom: 1;

    height: 40px;

    line-height: 39px;

    font-size: 14px;

    color: #FFF;

    padding: 0 30px;

    white-space: nowrap;

    text-align: center;

    text-decoration: none;

}

.naver a span {

    cursor: pointer;

    display: inline-block;

    *display: inline;

    *zoom: 1;

    position: relative;

    z-index: 410;

}

.naver li  .hover{

    background-color: #a21118;

} 



.layout .list-category{

    position: absolute;

    top:40px;

    left:240px;

    /*width:110px;  先要设置 才在没有hover的时候看得到效果*/

    height:250px;

    background-color:rgb(215, 197, 197);

    display:none;

}

[HTML] syntaxhighlighter_viewsource syntaxhighlighter_copycode

html {

        -ms-text-size-adjust:100%;

        -webkit-text-size-adjust:100%;

        line-height:1.6

}

body {

        -webkit-touch-callout:none;

        font-family:-apple-system-font,"Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;

        background-color:#f3f3f3;

        line-height:inherit

}

body.rich_media_empty_extra {

        background-color:#fff

}

body.rich_media_empty_extra .rich_media_area_primary:before {

        display:none

}

h1,h2,h3,h4,h5,h6 {

        font-weight:400;

        font-size:16px

}

* {

        margin:0;

        padding:0

}

a {

        color:#607fa6;

        text-decoration:none

}

.rich_media_inner {

        font-size:16px;

        word-wrap:break-word;

        -webkit-hyphens:auto;

        -ms-hyphens:auto;

        hyphens:auto

}

.rich_media_area_primary {

        position:relative;

        padding:20px 15px 15px;

        background-color:#fff

}

.rich_media_area_primary:before {

        content:" ";

        position:absolute;

        left:0;

        top:0;

        width:100%;

        height:1px;

        border-top:1px solid #e5e5e5;

        -webkit-transform-origin:0 0;

        transform-origin:0 0;

        -webkit-transform:scaleY(0.5);

        transform:scaleY(0.5);

        top:auto;

        bottom:-2px

}

.rich_media_area_primary .original_img_wrp {

        display:inline-block;

        font-size:0

}

.rich_media_area_primary .original_img_wrp .tips_global {

        display:block;

        margin-top:.5em;

        font-size:14px;

        text-align:right;

        width:auto;

        overflow:hidden;

        text-overflow:ellipsis;

        white-space:nowrap;

        word-wrap:normal

}

.rich_media_area_extra {

        padding:0 15px 0

}

.rich_media_title {

        margin-bottom:10px;

        line-height:1.4;

        font-weight:400;

        font-size:24px

}

._list {

        margin-bottom:18px;

        line-height:20px;

        font-size:0

}

.rich_media_meta_list em {

        font-style:normal

}

.rich_media_meta {

        display:inline-block;

        vertical-align:middle;

        margin-right:8px;

        margin-bottom:10px;

        font-size:16px

}

.meta_original_tag {

        display:inline-block;

        vertical-align:middle;

        padding:1px .5em;

        border:1px solid #9e9e9e;

        color:#8c8c8c;

        border-top-left-radius:20% 50%;

        -moz-border-radius-topleft:20% 50%;

        -webkit-border-top-left-radius:20% 50%;

        border-top-right-radius:20% 50%;

        -moz-border-radius-topright:20% 50%;

        -webkit-border-top-right-radius:20% 50%;

        border-bottom-left-radius:20% 50%;

        -moz-border-radius-bottomleft:20% 50%;

        -webkit-border-bottom-left-radius:20% 50%;

        border-bottom-right-radius:20% 50%;

        -moz-border-radius-bottomright:20% 50%;

        -webkit-border-bottom-right-radius:20% 50%;

        font-size:15px;

        line-height:1.1

}

.meta_enterprise_tag img {

        width:30px;

        height:30px!important;

        display:block;

        position:relative;

        margin-top:-3px;

        border:0

}

.rich_media_meta_text {

        color:#8c8c8c

}

span.rich_media_meta_nickname {

        display:none

}

.rich_media_thumb_wrp {

        margin-bottom:6px

}

.rich_media_thumb_wrp .original_img_wrp {

        display:block

}

.rich_media_thumb {

        display:block;

        width:100%

}

.rich_media_content {

        overflow:hidden;

        color:#3e3e3e

}

.rich_media_content * {

        max-width:100%!important;

        box-sizing:border-box!important;

        -webkit-box-sizing:border-box!important;

        word-wrap:break-word!important

}

.rich_media_content p {

        clear:both;

        min-height:1em

}

.rich_media_content em {

        font-style:italic

}

.rich_media_content fieldset {

        min-width:0

}

.rich_media_content .list-paddingleft-2 {

        padding-left:30px

}

.rich_media_content blockquote {

        margin:0;

        padding-left:10px;

        border-left:3px solid #dbdbdb

}

img {

        height:auto!important

}

@media screen and (device-aspect-ratio:2/3),screen and (device-aspect-ratio:40/71) {

        .meta_original_tag {

                padding-top:0

        }

}

@media(min-device-width:375px) and (max-device-width:667px) and (-webkit-min-device-pixel-ratio:2) {

        .mm_appmsg .rich_media_inner,.mm_appmsg .rich_media_meta,.mm_appmsg .discuss_list,.mm_appmsg .rich_media_extra,.mm_appmsg .title_tips .tips {

                font-size:17px

        }

        .mm_appmsg .meta_original_tag {

                font-size:15px

        }

}

@media(min-device-width:414px) and (max-device-width:736px) and (-webkit-min-device-pixel-ratio:3) {

        .mm_appmsg .rich_media_title {

                font-size:25px

        }

}

@media screen and (min-width:1024px) {

        .rich_media {

                width:740px;

                margin-left:auto;

                margin-right:auto

        }

        .rich_media_inner {

                padding:20px

        }

        body {

                background-color:#fff

        }

}

@media screen and (min-width:1025px) {

        body {

                font-family:"Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif

        }

        .rich_media {

                position:relative

        }

        .rich_media_inner {

                background-color:#fff;

                padding-bottom:100px

        }

}

.radius_avatar {

        display:inline-block;

        background-color:#fff;

        padding:3px;

        border-radius:50%;

        -moz-border-radius:50%;

        -webkit-border-radius:50%;

        overflow:hidden;

        vertical-align:middle

}

.radius_avatar img {

        display:block;

        width:100%;

        height:100%;

        border-radius:50%;

        -moz-border-radius:50%;

        -webkit-border-radius:50%;

        background-color:#eee

}

.cell {

        padding:.8em 0;

        display:block;

        position:relative

}

.cell_hd,.cell_bd,.cell_ft {

        display:table-cell;

        vertical-align:middle;

        word-wrap:break-word;

        word-break:break-all;

        white-space:nowrap

}

.cell_primary {

        width:2000px;

        white-space:normal

}

.flex_cell {

        padding:10px 0;

        display:-webkit-box;

        display:-webkit-flex;

        display:-ms-flexbox;

        display:flex;

        -webkit-box-align:center;

        -webkit-align-items:center;

        -ms-flex-align:center;

        align-items:center

}

.flex_cell_primary {

        width:100%;

        -webkit-box-flex:1;

        -webkit-flex:1;

        -ms-flex:1;

        box-flex:1;

        flex:1

}

.original_tool_area {

        display:block;

        padding:.75em 1em 0;

        -webkit-tap-highlight-color:rgba(0,0,0,0);

        color:#3e3e3e;

        border:1px solid #eaeaea;

        margin:20px 0

}

.original_tool_area .tips_global {

        position:relative;

        padding-bottom:.5em;

        font-size:15px

}

.original_tool_area .tips_global:after {

        content:" ";

        position:absolute;

        left:0;

        bottom:0;

        right:0;

        height:1px;

        border-bottom:1px solid #dbdbdb;

        -webkit-transform-origin:0 100%;

        transform-origin:0 100%;

        -webkit-transform:scaleY(0.5);

        transform:scaleY(0.5)

}

.original_tool_area .radius_avatar {

        width:27px;

        height:27px;

        padding:0;

        margin-right:.5em

}

.original_tool_area .radius_avatar img {

        height:100%!important

}

.original_tool_area .flex_cell_bd {

        width:auto;

        overflow:hidden;

        text-overflow:ellipsis;

        white-space:nowrap;

        word-wrap:normal

}

.original_tool_area .flex_cell_ft {

        font-size:14px;

        color:#8c8c8c;

        padding-left:1em;

        white-space:nowrap

}

.original_tool_area .icon_access:after {

        content:" ";

        display:inline-block;

        height:8px;

        width:8px;

        border-width:1px 1px 0 0;

        border-color:#cbcad0;

        border-style:solid;

        transform:matrix(0.71,0.71,-0.71,0.71,0,0);

        -ms-transform:matrix(0.71,0.71,-0.71,0.71,0,0);

        -webkit-transform:matrix(0.71,0.71,-0.71,0.71,0,0);

        position:relative;

        top:-2px;

        top:-1px

}

.rich_media_global_msg {

        position:fixed;

        top:0;

        left:0;

        right:0;

        padding:1em 35px 1em 15px;

        z-index:1;

        background-color:#c6e0f8;

        color:#8c8c8c;

        font-size:13px

}

.rich_media_global_msg .icon_closed {

        position:absolute;

        right:15px;

        top:50%;

        margin-top:-5px;

        line-height:300px;

        overflow:hidden;

        -webkit-tap-highlight-color:rgba(0,0,0,0);

        background:transparent url(/mmbizwap/zh_CN/htmledition/images/icon/appmsg/icon_appmsg_msg_closed_sprite.2x.png) no-repeat 0 0;

        width:11px;

        height:11px;

        vertical-align:middle;

        display:inline-block;

        -webkit-background-size:100% auto;

        background-size:100% auto

}

.rich_media_global_msg .icon_closed:active {

        background-position:0 -17px

}

.preview_appmsg .rich_media_title {

        margin-top:1.9em

}

@media screen and (min-width:1024px) {

        .rich_media_global_msg {

                position:relative;

                margin:0 20px

        }

        .preview_appmsg .rich_media_title {

                margin-top:0

        }

}