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