css布局实现自适应响应式知识问答平台首页效果代码

代码语言:html

所属分类:布局界面

代码描述:css布局实现自适应响应式知识问答平台首页效果代码

代码标签: 适应 响应 知识问答 平台 首页 效果

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

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>问答</title>
    <meta name="keywords" content="关键词" />
    <meta name="description" content="描述" />

    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
    <style>
@charset "utf-8";
        /* CSS Document */
        * {
            margin: 0;
            padding: 0;
            -webkit-tap-highlight-color: transparent;
        }
        body {
            font-family: 'microsoft yahei';
        }
        a {
            text-decoration: none;
            color: #333;
            -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
            -webkit-user-select: none;
            -moz-user-focus: none;
            -moz-user-select: none;
        }
        .l {
            float: left;
        }
        .r {
            float: right;
        }
        .textcenter {
            text-align: center;
        }
        li {
            list-style-type: none;
        }
        em {
            font-style: normal
        }
        .block {
            display: block;
        }
        .none {
            display: none;
        }
        .border3 {
            border-radius: 3px;
        }
        .border5 {
            border-radius: 3px;
        }
        .mrw10 {
            margin-right: 10px;
        }
        .miw10 {
            margin-left: 10px;
        }
        .mrw15 {
            margin-right: 15px;
        }
        .miw15 {
            margin-left: 15px;
        }
        .mrw20 {
            margin-right: 20px;
        }
        .mlw20 {
            margin-left: 20px;
        }

        #UpdateHint {
            width: 100%;
            height: auto;
            overflow: hidden;
            display: none;
            margin: 0 auto -100px auto;
            position: fixed;
            left: 0;
            top: 50%;
            z-index: 99999999;
            text-align: center;
        }
        #UpdateHint span {
            display: inline-block;
            vertical-align: middle;
            padding: 20px 30px;
            background: rgba(0,0,0, 0.8);
            font: 20px/30px 'microsoft yahei';
            text-align: center;
            color: #fff;

        }
        #UpdateHint .ok {
            font: 20px/30px 'microsoft yahei';
            color: #fff;
            background: rgba(18,166,10, 0.8);
        }

        /*大于1024像素*/
@media all and (min-width:1020px) {
            .maxw {
                max-width: 1020px;
            }
            /*显示与隐藏*/
            .pc {
                display: block;
            }
            .move {
                display: none;
            }
            .headerTOPH {
                height: 48px;
            }
            .headerTOPH2 {
                height: 0px;
            }
            .topFloat {
                width: 100%;
                height: 48px;
                position: fixed;
                top: 0;
                left: 0;
                z-index: 9999;
            }
            header {
                width: 100%;
                height: 48px;
                background-color: #2D2E2F;
            }
            header .maxw {
                width: 100%;
                height: 48px;
                margin: 0 auto;
            }
            header .maxw .logo {
                display: block;
                height: 48px;
                float: left;
                margin-right: 18px;
            }
            header .maxw .logo img {
                display: block;
                height: 48px;
            }
            header .maxw nav {
                float: left;
                height: 48px;
            }

            header .maxw section {
                float: right;
                height: 48px;
            }
            header .maxw section .txtbur {
                display: block;
                float: left;
                height: 48px;
                padding: 0 8px;
                line-height: 48px;
                font-size: 15px;
                color: #fff;
            }
            header .maxw section .txtbur:hover {
                color: #F8B600;
            }

            .PCNenuMain {
                display: block;
                height: 48px;
                float: left;
                position: relative;
            }
            .PCNenuMain .mn {
                display: block;
                height: 48px;
                float: left;
                padding: 0 15px;
                transition-duration: 0.2s;
            }
            .PCNenuMain .mn:hover {
                background-color: #151616;
            }
            .PCNenuMain .mn a {
                display: block;
                height: 48px;
                line-height: 48px;
                font-size: 15px;
                color: #fff;
                float: left;
            }
            .PCNenuMain .mn i {
                display: block;
                height: 48px;
                line-height: 52px;
                font-size: 1px;
                margin-left: 5px;
                color: #999;
                float: left;
                transition-duration: 0.2s;
            }
            .PCNenuMain .mn:hover i {
                line-height: 46px;
                -webkit-transform: rotate(180deg);
                /*Safari 4+,Google Chrome 1+ */
                -moz-transform: rotate(180deg);
                /*Firefox 3.5+*/
                filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=1);
                /*ie*/
            }
            .PCNenuMain .mn .sonClass {
                width: 522px;
                height: 0;
                overflow: hidden;
                background-color: #FC0;
                position: absolute;
                top: 48px;
                left: 0px;
                transition-duration: 0.2s;
                z-index: 999;
                padding: 0 15px;
                background: rgba(0,0,0, 0.8);
            }
            .PCNenuMain .mn:hover .sonClass {
                height: auto;
                padding: 10px 15px 16px 15px;
            }
            .PCNenuMain .mn:hover .sonClass li {
                display: block;
                height: 32px;
                float: left;
            }
            .PCNenuMain .mn:hover .sonClass li a {
                display: block;
                height: 32px;
                text-align: center;
                line-height: 31px;
                padding: 0 15px;
                font-size: 14px;
                color: #ccc;
                transition-duration: 0.2s;
                border-radius: 3px;
            }
            .PCNenuMain .mn:hover .sonClass li a:hover {
                color: #fff;
                background-color: #151616;
            }
            header .maxw .PCsearch {
                display: block;
                width: 260px;
                height: 34px;
                margin: 7px 0 0 30px;
                background-color: #505050;
                float: left;
            }
            header .maxw .PCsearch .serachKey {
                border: 0;
                outline: none;
                background-color: transparent;
                width: 198px;
                padding: 0 10px;
                height: 34px;
                float: left;
                font: 14px/30px 'microsoft yahei';
                color: #f30;
                margin: 0 auto;
            }
            header .maxw .PCsearch .sobut {
                width: 34px;
                height: 34px;
                border: 0;
                outline: none;
            }



            header .maxw .menu {
                height: 52px;
                float: right;
                display: none;
            }
            .MNenuMain {
                display: none;
            }
            .MNenuMain .mnName {
                width: 100%;
                height: 52px;
                background-color: #2D2E2F;
            }
            .MNenuMain .mnName h1 {
                display: block;
                height: 52px;
                float: left;
                margin-left: 10px;
                line-height: 52px;
                font-size: 16px;
                color: #E4E4E4;
                font-weight: normal;
            }
            .MNenuMain .mnName .menuClose {
                display: block;
                float: right;
                margin-right: 10px;
                height: 52px;
                cursor: pointer;
            }
            .MNenuMain .mnName .menuClose i {
                display: block;
                height: 52px;
                line-height: 52px;
                width: 25px;
                font-size: 22px;
                color: #F8B600;
            }
            .MNenuMain .navmain {
                display: block;
                width: 100%;
                height: auto;
                overflow: hidden;
                background: rgba(0,0,0, 0.7);
            }
            .MNenuMain .navmain .son {
                width: 100%;
                height: auto;
                overflow: auto;
            }
            .MNenuMain .navmain li.son .mbut {
                display: block;
                width: 92%;
                height: 46px;
                padding: 0 4%;
                line-height: 46px;
                font-size: 14px;
                color: #fff;
                background: rgba(40,40,40, 0.3);
                border-bottom: 1px solid #2D2E2F;
                cursor: pointer;
            }
            .MNenuMain .navmain li.son .mbut em {
                color: #888;
                margin-left: 15px;
            }
            /*二级菜单样式*/
            .MNenuMain .navmain li.son ul.SonContent {
                width: 96%;
                height: auto;
                padding: 8px 0;
                margin: 0 auto;
                overflow: hidden;
                z-index: 999999;
                text-align: center;
            }
            .MNenuMain .navmain li.son ul.SonContent li {
                display: inline-block;
                vertical-align: middle;
                height: 38px;
            }
            .MNenuMain .navmain li.son ul.SonContent li a {
                display: block;
                float: left;
                height: 32px;
                line-height: 31px;
                margin: 0 3px;
                font-size: 14px;
                color: #ccc;
                background: rgba(40,40,40, 0.5);
                padding: 0 15px;
                border-radius: 3px;
            }
            .MNenuMain .navmain .login {
                width: 100%;
                height: auto;
                overflow: hidden;
                padding-bottom: 18px;
                margin: 0 auto;
                background: rgba(40,40,40, 0.8);
            }
            .MNenuMain .navmain .login .search {
                min-width: 280px;
                width: 96%;
                height: 42px;
                background-color: #ddd;
                margin: 15px auto 0 auto;
                border-radius: 4px;
                position: relative;
            }
            .MNenuMain .navmain .login .search .serachKey {
                border: 0;
                outline: none;
                background-color: transparent;
                width: 90%;
                height: 30px;
                float: left;
                margin-left: 10px;
                margin-top: 4px;
                margin-right: 10px;
                font: 14px/30px 'microsoft yahei';
                color: #f30;
            }
            .MNenuMain .navmain .login .search .button {
                display: block;
                border: 0;
                outline: none;
                background-color: #7FBD0D;
                color: #fff;
                height: 32px;
                padding: 0 15px;
                border-radius: 3px;
                line-height: 32px;
                font-size: 14px;
                position: absolute;
                right: 5px;
                top: 5px;
            }

            .MNenuMain .navmain .login h2 {
                width: 100%;
                height: 42px;
                padding-top: 10px;
                text-align: center;
            }
            .MNenuMain .navmain .login h2 a {
                display: inline-block;
                vertical-align: middle;
                height: 42px;
                padding: 0 15px;
                margin: 0 8px;
                border-radius: 21px;
            }
            .MNenuMain .navmain .login h2 a.b1 {
                background-color: #7FBD0D;
            }
            .MNenuMain .navmain .login h2 a.b2 {
                background-color: #F8B600;
            }
            .MNenuMain .navmain .login h2 a i {
                display: block;
                width: 26px;
                height: 26px;
                text-align: center;
                line-height: 26px;
                font-size: 16px;
                float: left;
                margin-top: 7px;
                border: 1px solid #ddd;
                color: #fff;
                margin-right: 6px;
                border-radius: 15px;
            }
            .MNenuMain .navmain .login h2 a span {
                display: block;
                height: 30px;
                float: left;
                line-height: 30px;
                font-size: 16px;
                color: #fff;
                margin-top: 6px;
                font-weight: normal;
            }

            footer {
                width: 100%;
                height: auto;
                overflow: hidden;
                padding: 10px 0;
                background-color: #3C3C3C;
            }
            footer section {
                height: auto;
                overflow: hidden;
                margin: 0 auto;
            }
            footer section p {
                width: 100%;
                line-height: 30px;
                font-size: 14px;
                color: #ccc;
                text-align: center;
            }

        }












        /*小于1024像素*/
@media all and (max-width:1020px) {
            .maxw {
                max-width: 900px;
            }
            /*显示与隐藏*/
            .pc {
                display: none;
            }
            .move {
                display: block;
            }
            .headerTOPH {
                height: 52px;
            }
            .headerTOPH2 {
                height: 58px;
            }
            header {
                width: 100%;
                min-width: 280px;
                height: 52px;
                background-color: #2D2E2F;
                position: fixed;
                top: 0;
                z-index: 999;
            }
            header .maxw {
                width: 96%;
                height: 52px;
                margin: 0 auto;
            }
            header .maxw .logo {
                display: block;
                height: 52px;
                float: left;
                margin-right: 18px;
            }
            header .maxw .logo img {
                display: block;
                height: 40px;
                margin-top: 6px;
            }

            header .maxw .menu {
                height: 52px;
                float: right;
            }
            header .maxw .menu i {
                display: block;
                width: 36px;
                font-size: 26px;
                color: #F8B600;
                text-align: center;
                line-height: 52px;
            }
            header .maxw section {
                display: none;
            }
            header .maxw .PCsearch {
                display: none;
            }

            .PCNenuMain {
                display: none;
            }
            .MNenuMain {
                min-width: 280px;
                display: none;
                width: 100%;
                height: auto;
                overflow: hidden;
                position: fixed;
                top: 0;
                left: 0;
                z-index: 998;
            }
            .MNenuMain .mnName {
                width: 100%;
                height: 52px;
                background-color: #2D2E2F;
            }
            .MNenuMain .mnName h1 {
                display: block;
                height: 52px;
                float: left;
                margin-left: 10px;
                line-height: 52px;
                font-size: 16px;
                color: #E4E4E4;
                font-weight: normal;
            }
            .MNenuMain .mnName .menuClose {
                display: block;
                float: right;
                margin-right: 10px;
                height: 52px;
                cursor: pointer;
            }
            .MNenuMain .mnName .menuClose i {
                display: block;
                height: 52px;
                line-height: 52px;
                width: 25px;
                font-size: 22px;
                color: #F8B600;
            }
            .MNenuMain .navmain {
                display: block;
                width: 100%;
                height: auto;
                overflow: hidden;
                background: rgba(0,0,0, 0.7);
            }
            .MNenuMain .navmain .son {
                width: 100%;
                height: auto;
                overflow: auto;
            }
            .MNenuMain .navmain li.son .mbut {
                display: block;
                width: 92%;
                height: 46px;
                padding: 0 4%;
                line-height: 46px;
                font-size: 14px;
                color: #fff;
                background: rgba(40,40,40, 0.3);
                border-bottom: 1px solid #2D2E2F;
                cursor: pointer;
            }
            .MNenuMain .navmain li.son .mbut em {
                color: #888;
                margin-left: 15px;
            }
            /*二级菜单样式*/
            .MNenuMain .navmain li.son ul.SonContent {
                width: 96%;
                height: auto;
                padding: 8px 0;
                margin: 0 auto;
                overflow: hidden;
                z-index: 999999;
                text-align: center;
            }
            .MNenuMain .navmain li.son ul.SonContent li {
                display: inline-block;
                vertical-align: middle;
                height: 38px;
            }
            .MNenuMain .navmain li.son ul.SonContent li a {
                display: block;
                float: left;
                height: 32px;
                line-height: 31px;
                margin: 0 3px;
                font-size: 14px;
                color: #ccc;
                background: rgba(40,40,40, 0.5);
                padding: 0 15px;
                border-radius: 3px;
            }
            .MNenuMain .navmain .login {
                width: 100%;
                height: auto;
                overflow: hidden;
                padding-bottom: 18px;
                margin: 0 auto;
                background: rgba(40,40,40, 0.8);
            }
            .MNenuMain .navmain .login .search {
                min-width: 280px;
                width: 96%;
                height: 42px;
                background-color: #ddd;
                margin: 15px auto 0 auto;
                border-radius: 4px;
                position: relative;
            }
            .MNenuMain .navmain .login .search .serachKey {
                border: 0;
                outline: none;
                background-color: transparent;
                width: 90%;
                height: 30px;
                float: left;
                margin-left: 10px;
                margin-top: 4px;
                margin-right: 10px;
                font: 14px/30px 'microsoft yahei';
                color: #f30;
            }
            .MNenuMain .navmain .login .search .button {
                display: block;
                border: 0;
                outline: none;
                background-color: #7FBD0D;
                color: #fff;
                height: 32px;
                padding: 0 15px;
                border-radius: 3px;
                line-height: 32px;
                font-size: 14px;
                position: absolute;
                right: 5px;
                top: 5px;
            }

            .MNenuMain .navmain .login h2 {
                width: 100%;
                height: 42px;
                padding-top: 10px;
                text-align: center;
            }
            .MNenuMain .navmain .login h2 a {
                display: inline-block;
                vertical-align: middle;
                height: 42px;
                padding: 0 15px;
                margin: 0 8px;
                border-radius: 21px;
            }
            .MNenuMain .navmain .login h2 a.b1 {
                background-color: #7FBD0D;
            }
            .MNenuMain .navmain .login h2 a.b2 {
                background-color: #F8B600;
            }
            .MNenuMain .navmain .login h2 a i {
                display: block;
                width: 26px;
                height: 26px;
                text-align: center;
                line-height: 26px;
                font-size: 16px;
                float: left;
                margin-top: 7px;
                border: 1px solid #ddd;
                color: #fff;
                margin-right: 6px;
                border-radius: 15px;
            }
            .MNenuMain .navmain .login h2 a span {
                display: block;
                height: 30px;
                float: left;
                line-height: 30px;
                font-size: 16px;
                color: #fff;
                margin-top: 6px;
                font-weight: normal;
            }

            footer {
                width: 100%;
                height: auto;
                overflow: hidden;
                padding: 10px 0;
                background-color: #3C3C3C;
            }
            footer section {
                width: 100%;
                height: auto;
                overflow: hidden;
                margin: 0 auto;
            }
            footer section p {
                width: 100%;
                line-height: 30px;
                font-size: 12px;
                color: #ccc;
                text-align: center;
            }
        }





@media all and (min-width:1020px) {
            /* flexslider */
            .flexslider {
                margin: 0 auto 25px auto;
                position: relative;
                width: 680px;
                height: auto;
                overflow: hidden;
                zoom: 1;
            }
            .flex-viewport {
                max-height: 2000px;
                -webkit-transition: all 1s ease;
                -moz-transition: all 1s ease;
                transition: all 1s ease;
            }
            .flexslider .slides {
                zoom: 1;
            }
            .flexslider .slides img {
                width: 100%;
                height: auto;
            }
            .flex-direction-nav a {
                width: 60px;
                height: 90px;
                line-height: 99em;
                overflow: hidden;
                margin: -60px 0 0;
                display: block;
                background: url(../images/ad_ctr.png) no-repeat;
                position: absolute;
                top: 50%;
                z-index: 10;
                cursor: pointer;
                opacity: 0;
                filter: alpha(opacity=0);
                -webkit-transition: all .3s ease;
            }
            .flex-direction-nav .flex-next {
                background-position: 0 -90px;
                right: 0;
            }
            .flex-direction-nav .flex-prev {
                left: 0;
            }
            .flexslider:hover .flex-next {
                opacity: 0.8;
                filter: alpha(opacity=25);
            }
            .flexslider:hover .flex-prev {
                opacity: 0.8;
                filter: alpha(opacity=25);
            }
            .flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover {
                opacity: 1;
                filter: alpha(opacity=50);
            }
            .flex-control-nav {
                width: 100%;
                position: absolute;
                bottom: 10px;
                text-align: center;
            }
            .flex-control-nav li {
                margin: 0 5px;
                display: inline-block;
                zoom: 1;
                *display: inline;
            }
            .flex-control-paging li a {
                background: url(../images/dot.png) no-repeat 0 -16px;
                display: block;
                height: 16px;
                overflow: hidden;
                text-indent: -99em;
                width: 16px;
                cursor: pointer;
            }
            .flex-control-paging li a.flex-active {
                background-position: 0 0;
            }


            .noData {
                width: 300px;
                height: auto;
                overflow: hidden;
                margin: 0 auto;
            }
            .noData img {
                display: block;
                width: 100%;
            }
            .noData span {
                display: block;
                width: 100%;
                height: auto;
                overflow: hidden;
                text-align: center;
                font: 18px/46px 'microsoft yahei';
                color: #666;
            }

        }

@media all and (max-width:1020px) {
            /* flexslider */
            .flexslider {
                margin: 42px auto 8px auto;
                position: relative;
                width: 100%;
                height: auto;
                overflow: hidden;
                zoom: 1;
            }
            .flex-viewport {
                max-height: 2000px;
                -webkit-transition: all 1s ease;
                -moz-transition: all 1s ease;
                transition: all 1s ease;
            }
            .flexslider .slides {
                zoom: 1;
            }
            .flexslider .slides img {
                width: 100%;
                height: auto;

            }
            .flex-direction-nav a {
                width: 60px;
                height: 90px;
                line-height: 99em;
                overflow: hidden;
                margin: -60px 0 0 0;
                display: block;
                background: url(../images/ad_ctr.png) no-repeat;
                position: absolute;
                top: 50%;
                z-index: 10;
                cursor: pointer;
                opacity: 0;
                filter: alpha(opacity=0);
                -webkit-transition: all .3s ease;
            }
            .flex-direction-nav .flex-next {
                background-position: 0 -90px;
                right: 0;
            }
            .flex-direction-nav .flex-prev {
                left: 0;
            }
            .flexslider:hover .flex-next {
                opacity: 0.8;
                filter: alpha(opacity=25);
            }
            .flexslider:hover .flex-prev {
                opacity: 0.8;
                filter: alpha(opacity=25);
            }
            .flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover {
                opacity: 1;
                filter: alpha(opacity=50);
            }
            .flex-control-nav {
                width: 100%;
                position: absolute;
                bottom: 10px;
                text-align: center;
            }
            .flex-control-nav li {
                margin: 0 2px;
                display: inline-block;
                zoom: 1;
                *display: inline;
            }
            .flex-control-paging li a {
                background: url(../images/dot.png) no-repeat 0 -16px;
                display: block;
                height: 16px;
                overflow: hidden;
                text-indent: -99em;
                width: 16px;
                cursor: pointer;
            }
            .flex-control-paging li a.flex-active {
                background-position: 0 0;
            }
            .noData {
                width: 80%;
                height: auto;
                overflow: hidden;
                margin: 0 auto 190px auto;
            }
            .noData img {
                display: block;
                width: 100%;
            }
            .noData span {
                display: block;
                width: 100%;
                height: auto;
                overflow: hidden;
                text-align: center;
                font: 18px/46px 'microsoft yahei';
                color: #666;
            }
        }

        .FabulousLike {
            width: 100%;
            height: auto;
            overflow: hidden;
            margin: 15px auto 10px auto;
            cursor: pointer;
            text-align: center;
        }
        .FabulousLike i {
            display: block;
            width: 60px;
            height: 60px;
            font-size: 45px;
            line-height: 60px;
            text-align: center;
            margin: 0 auto;
            color: #999;
            transition-duration: 0.2s;
        }
        .FabulousLike i:hover {
            font-size: 50px;
        }
        .FabulousLike i.cur {
            color: #F30;
        }
        .FabulousLike img {
            display: block;
            width: 40px;
            height: 40px;
            margin: 0 auto;
        }
        .FabulousLike span {
            display: block;
            width: 120px;
            height: 26px;
            margin: 0 auto;
            padding: 0 15px;
            font-size: 16px;
            line-height: 20px;
            color: #666;
            text-align: center;
        }
        .FabulousLike span.cur {
            color: #f30;
        }


        .FabulousCur {
            width: 60px;
            height: 60px;
            margin: 0 auto 10px auto;
            cursor: pointer;
        }
        .FabulousCur i {
            display: block;
            width: 60px;
            height: 60px;
            font-size: 50px;
            line-height: 60px;
            text-align: center;
            color: #F30;
            transition-duration: 0.2s;
        }




        .pageType {
            width: 100%;
            height: auto;
            overflow: hidden;
            margin: 30px auto 10px auto;
        }
        .pageType .pagination {
            width: 100%;
            height: auto;
            overflow: hidden;
            text-align: center;
        }
        .pageType .pagination li {
            display: inline-block;
            height: 40px;
            margin: 0 0 8px 0;

        }

        .pageType .pagination li a {
            display: block;
            height: 40px;
            margin: 0 3px;
            padding: 0 15px;
            border-radius: 4px;
            background-color: #EAEAEA;
            font-size: 15px;
            line-height: 40px;
            height: 40px;
            color: #151515;
            transition-duration: 0.2s;
        }
        .pageType .pagination li a:hover {
            background-color: #1B4361;
            color: #FFF;
        }

        .pageType .pagination li dl {
            display: block;
            height: 40px;
            margin: 0 3px;
            padding: 0 15px;
            border-radius: 4px;
            background-color: #EAEAEA;
            font-size: 15px;
            line-height: 40px;
            height: 40px;
            color: #6c6b6b;
        }

        .pageType .pagination li span {
            display: block;
            height: 40px;
            margin: 0 3px;
            padding: 0 15px;
            border-radius: 4px;
            background-color: #1B4361;
            font-size: 15px;
            line-height: 40px;
            height: 40px;
            color: #fff;
        }
        .pageType .pagination li.pageRemark {
            width: 100%;
            font-size: 15px;
            color: #666;
        }
        .pageType .pagination li.pageRemark b {
            font-size: 15px;
            color: #1B4361;
            font-weight: bold;
        }
@media all and (min-width:1020px) {
            .main {
                height: auto;
                overflow: hidden;
                margin: 10px auto 10px auto;
            }
            .main .left {
                width: 680px;
                height: auto;
                overflow: hidden;
                float: left;
            }
            .main .left .textnav2 {
                display: none;
            }
            .main .left .textnav {
                width: 100%;
                height: 40px;
            }
            .main .left .textnav .tbut {
                display: block;
                height: 40px;
                line-height: 40px;
                font-size: 14px;
                color: #666666;
                float: left;
            }
            .main .left .textnav .tbut:hover {
                color: #FFA800;
            }
            .main .left .textnav dl {
                display: block;
                height: 14px;
                width: 1px;
                background-color: #ccc;
                float: left;
                margin: 14px 14px;
            }
            .main .left .textnav .rbut {
                display: block;
                height: 40px;
                line-height: 40px;
                font-size: 14px;
                color: #666666;
                float: right;
                margin-left: 15px;
                position: relative;
                cursor: pointer;
            }
            .main .left .textnav .rbut span {
                display: block;
                height: 40px;
                line-height: 40px;
                font-size: 14px;
                color: #666666;
                float: left;
            }
            .main .left .textnav .rbut i {
                display: block;
                height: 40px;
                line-height: 42px;
                font-size: 14px;
                color: #FFA800;
                float: left;
                margin-right: 5px;
            }
            .main .left .textnav .rbut .ewm {
                width: 660px;
                height: 0px;
                position: absolute;
                top: 40px;
                right: 0px;
                background-color: #FC0;
                transition-duration: 0.2s;
                z-index: 999;
            }
            .main .left .textnav .rbut:hover .ewm {
                height: 400px;
            }
            .ItemList {
                width: 100%;
                height: auto;
                overflow: hidden;
                margin: 8px auto 0 auto;
            }
            .ItemList .item {
                width: 100%;
                height: auto;
                overflow: hidden;
                border-bottom: 1px solid #ddd;
                margin-bottom: 18px;
            }
            .ItemList .item .title {
                display: block;
                width: 100%;
                height: auto;
                overflow: hidden;
                line-height: 25px;
                font-size: 18px;
                color: #333;
                transition-duration: 0.2s;
            }
            .ItemList .item:hover .title {
                color: #FFA800;
            }
            .ItemList .item .tag {
                width: 100%;
                height: 30px;
                margin: 8px auto;
            }
            .ItemList .item .tag span {
                display: block;
                height: 30px;
                float: left;
                line-height: 30px;
                font-size: 14px;
                color: #999;
            }
            .ItemList .item .tag a {
                display: block;
                height: 30px;
                float: left;
                line-height: 30px;
                font-size: 14px;
                color: #2E97BE;
                margin: 0 5px;
            }
            .ItemList .item .tag a:hover {
                color: #0d769d;
            }
            .ItemList .item .decs {
                width: 100%;
                height: auto;
                overflow: hidden;
            }
            .ItemList .item .decs .pic {
                width: 160px;
                height: 100px;
                overflow: hidden;
                float: left;
                position: relative;
            }
            .ItemList .item .decs .pic img {
                width: 100%;
                min-height: 100px;
                position: absolute;
                top: 0;
                left: 0;
                transition-duration: 0.2s;
            }
            .ItemList .item:hover .decs .pic img {
                width: 110%;
                min-height: 100px;
                position: absolute;
                top: -5%;
                left: -5%;
            }
            .ItemList .item .decs .pp {
                width: 500px;
                height: auto;
                overflow: hidden;
                margin-left: 15px;
                line-height: 24px;
                font-size: 15px;
                color: #666;
                float: right;
            }
            .ItemList .item .decs .text {
                width: 100%;
                height: auto;
                overflow: hidden;
                margin-left: 15px;
                line-height: 24px;
                font-size: 15px;
                color: #666;
                float: right;
            }
            .ItemList .item .info {
                width: 100%;
                height: 30px;
                overflow: hidden;
                margin: 8px auto;

            }
            .ItemList .item .info .ibut {
                display: block;
                height: 30px;
                line-height: 30px;
                font-size: 14px;
                color: #666666;
                position: relative;
                cursor: pointer;
            }
            .ItemList .item .info .ibut span {
                display: block;
                height: 30px;
                line-height: 30px;
                font-size: 14px;
                color: #666666;
                float: left;
            }
            .ItemList .item .info .ibut:hover span {
                color: #FFA800;
            }
            .ItemList .item .info .ibut i {
                display: block;
                height: 30px;
                line-height: 32px;
                font-size: 20px;
                color: #FFA800;
                float: left;
                margin-right: 5px;
            }
            .ItemList .item .info .ibut i.s16 {
                font-size: 16px;
            }
            .ItemList .item .info .ibut i.s18 {
                font-size: 18px;
            }
            .ItemList .item .info em {
                display: block;
                height: 30px;
                line-height: 30px;
                font-size: 14px;
                color: #999;
            }
            .ItemList .item .info em.share {
                display: block;
            }
            .main .right {
                width: 300px;
                height: 1000px;
                float: right;
            }
            .main .right .addBut {
                display: block;
                width: 300px;
                height: 50px;
                background-color: #FFA800;
                margin: 10px auto 0 auto;
                border-radius: 4px;
                text-align: center;
                transition-duration: 0.2s;
            }
            .main .right .addBut:hover {
                background-color: #FF6300;
            }
            .main .right .addBut i {
                display: inline-block;
                vertical-align: middle;
                width: 40px;
                height: 40px;
                text-align: center;
                line-height: 40px;
                font-size: 30px;
                color: #fff;
                margin-top: 5px;
            }
            .main .right .addBut span {
                display: inline-block;
                vertical-align: middle;
                line-height: 40px;
                font-size: 16px;
                color: #fff;
                margin-top: 5px;
                margin-right: 5px;
            }
            .main .right .dataNum {
                width: 100%;
                height: 40px;
                text-align: center;
                line-height: 40px;
                font-size: 16px;
                color: #666;
                margin-top: 10px;
                margin-bottom: 10px;
            }
            .main .right .dataNum em {
                color: #7FBD0D;
                font-size: 24px;
                line-height: 40px;
                font-weight: bold;
                font-style: italic;
                margin: 0 5px;
            }
            .main .right .h-title {
                width: 100%;
                height: 40px;
                border-bottom: 1px solid #ddd;
            }
            .main .right .h-title i {
                display: block;
                height: 40px;
                text-align: center;
                line-height: 40px;
                font-size: 20px;
                margin-right: 10px;
                color: #F60;
                float: left;
            }
            .main .right .h-title span {
                display: inline-block;
                vertical-align: middle;
                line-height: 40px;
                font-size: 16px;
                color: #444;
                float: left;
            }
            .main .right .hosList {
                width: 100%;
                height: auto;
                overflow: hidden;
            }
            .main .right .hosList a {
                width: 100%;
                height: auto;
                overflow: hidden;
            }
            .main .right .hosList a h3 {
                display: block;
                width: 100%;
                height: auto;
                overflow: hidden;
                line-height: 22px;
                font-size: 15px;
                color: #666;
                font-weight: normal;
                border-bottom: 1px solid #e9e7e7;
                padding: 10px 0 6px 0;
                transition-duration: 0.2s;
            }
            .main .right .hosList a:hover h3 {
                color: #FFA800;
                border-bottom: 1px solid #FFA800;
            }
            .main .right .hosList a h4 {
                width: 100%;
                height: 24px;
                font-weight: normal;
            }
            .main .right .hosList a h4 dl {
                display: block;
                line-height: 22px;
                font-size: 14px;
                color: #999;
            }
            .main .right .hosList a h4 dl span {
                color: #888;
            }

            .vist {
                height: auto;
                overflow: hidden;
                margin: 0px auto 10px auto;
                padding-bottom: 20px;
                position: relative;
            }
            .vist .banner {
                width: 100%;
                height: auto;
                overflow: hidden;
                position: relative;
            }
            .vist .banner a {
                display: block;
                height: 28px;
                padding: 0 10px;
                background-color: #E4E4E4;
                line-height: 27px;
                font-size: 14px;
                color: #333;
                position: absolute;
                z-index: 99;
                bottom: 12px;
                left: 8px;
                border-radius: 14px;
            }
            .vist .banner img {
                width: 100%;
            }
            .vist .title {
                width: 100%;
                height: auto;
                padding: 18px 0 10px 0;
                overflow: hidden;
                margin-top: -5px;
                background-color: #2D2E2F;
            }
            .vist .title h1 {
                display: block;
                width: 100%;
                height: auto;
                overflow: hidden;
                text-align: center;
                line-height: 32px;
                padding: 8px 0;
                font-size: 20px;
                color: #fff;
                font-weight: normal;
            }
            .vist .title .info {
                width: 100%;
                height: 30px;
                text-align: center;
                color: #fff;
            }
            .vist .title .info span {
                height: 30px;
                line-height: 30px;
                font-size: 14px;
                color: #fff;
                margin: 0 8px;
            }
            .vist .title .info span.time {
                display: inline-block;
                vertical-align: middle;
            }
            .vist .title .info span.comment {
                display: inline-block;
                vertical-align: middle;
            }
            .vist .title .info span i {
                display: block;
                height: 30px;
                text-align: center;
                line-height: 30px;
                font-size: 16px;
                margin-right: 5px;
                color: #ccc;
                float: left;
            }
            .vist .title .info span em {
                line-height: 30px;
                font-size: 14px;
                color: #999;
                float: left;
            }
            .vist .title .info span .class {
                display: block;
            }
            .vist .title .info span a {
                display: block;
                line-height: 30px;
                font-size: 14px;
                color: #FCC007;
                float: left;
            }
            .vist .title .info span a:hover {
                color: #FF0;
            }
            .vist .ReturnBut {
                display: block;
                margin: 10px auto;
                width: 160px;
                height: 40px;
                text-align: center;
                border-radius: 20px;
                background-color: #CCC;
                font: 14px/40px 'microsoft yahei';
                color: #333;
                transition-duration: 0.2s;
            }
            .vist .ReturnBut:hover {
                background-color: #fff;
            }
            .vist .flashDIV {
                height: auto;
                position: fixed;
                top: 50px;
                right: 120px;
                z-index: 9999;
            }
            .vist .flashDIV .CloseBut {
                display: block;
                width: 80px;
                height: 38px;
                background-color: #CCC;
                margin: 0 auto;
                text-align: center;
                line-height: 38px;
                font-size: 14px;
                color: #333;
                border-radius: 4px;
                cursor: pointer;
            }
            .vist .content {
                width: 100%;
                height: auto;
                font: 16px/26px 'microsoft yahei';
                color: #222;
                margin-top: 16px;
                padding-bottom: 20px;

            }
            .vist .content p {
                font: 16px/26px 'microsoft yahei';
                color: #222;
                margin: 2px 0;
            }
            .vist .content img
            {
                max-width: 680px;
                height: auto;
                zoom: expression( function(elm)
                {     if (elm.width>680).........完整代码请登录后点击上方下载按钮下载查看

网友评论0