Luanhaixin (Talk | contribs) |
Luanhaixin (Talk | contribs) |
||
Line 4: | Line 4: | ||
#top_title{ | #top_title{ | ||
display: none; | display: none; | ||
+ | } | ||
+ | body{ | ||
+ | margin: 0 auto; | ||
+ | } | ||
+ | |||
+ | |||
+ | /** | ||
+ | *第一部分 | ||
+ | */ | ||
+ | #first_s{ | ||
+ | padding-left: 0; | ||
+ | padding-right: 0; | ||
+ | background-color: #fff; | ||
+ | margin: 0; | ||
+ | height:0px; | ||
+ | z-index: 999; | ||
+ | position: relative; | ||
+ | } | ||
+ | #first_s #nav_bg{ | ||
+ | height: 80px; | ||
+ | } | ||
+ | #first_s .container { | ||
+ | height: 80px; | ||
+ | } | ||
+ | #first_s .container .navbar-header { | ||
+ | height: 80px; | ||
+ | float: left; | ||
+ | } | ||
+ | #first_s .container .navbar-brand { | ||
+ | font-size: 24px; | ||
+ | line-height: 72px; | ||
+ | } | ||
+ | #first_s .container ul { | ||
+ | text-align: center; | ||
+ | padding: 0 0; | ||
+ | margin:0 0; | ||
+ | height: 80px; | ||
+ | float: right; | ||
+ | font-size: 18px; | ||
+ | color: #c0c0c0; | ||
+ | } | ||
+ | |||
+ | |||
+ | #first_s .container li | ||
+ | { | ||
+ | width: 80px; | ||
+ | list-style: none; | ||
+ | height: 80px; | ||
+ | line-height: 80px; | ||
+ | float: left; | ||
+ | color: #c0c0c0; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | #first_s .container li ul | ||
+ | { | ||
+ | list-style: none; | ||
+ | padding-left: 0; | ||
+ | text-align: center; | ||
+ | position: relative; | ||
+ | display: none; | ||
+ | |||
+ | } | ||
+ | |||
+ | #first_s .container li:hover > ul | ||
+ | { | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | |||
+ | #first_s .container li ul li | ||
+ | { | ||
+ | height: 30px; | ||
+ | padding-top: 0px; | ||
+ | padding-bottom: 0px; | ||
+ | line-height: 30px; | ||
+ | position: relative; | ||
+ | |||
+ | } | ||
+ | |||
+ | #first_s .container li ul li ul | ||
+ | { width: 100%; | ||
+ | position: absolute; | ||
+ | left:100%; | ||
+ | top:0; | ||
+ | display: none; | ||
+ | } | ||
+ | #first_s .container li ul li li | ||
+ | { | ||
+ | height: 30px; | ||
+ | line-height: 30px; | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | /* | ||
+ | 菜单按钮部分 | ||
+ | */ | ||
+ | #menu_btn{ | ||
+ | margin-top: 18px; | ||
+ | display: none; | ||
+ | width:10%; | ||
+ | height:0px; | ||
+ | background-color: gold; | ||
+ | position: fixed; | ||
+ | max-width: 60px; | ||
+ | max-height: 60px; | ||
+ | min-width: 30px; | ||
+ | min-height: 30px; | ||
+ | text-align: center; | ||
+ | line-height: 50px; | ||
+ | } | ||
+ | .cebian{ | ||
+ | position: fixed; | ||
+ | bottom: 0; | ||
+ | margin-bottom: 0; | ||
+ | z-index: 999; | ||
+ | width: 100%; | ||
+ | height: 50%; | ||
+ | top:auto; | ||
+ | font-size: 100%; | ||
+ | background-color: #000; | ||
+ | } | ||
+ | .cebian > .menu_title{ | ||
+ | position: relative; | ||
+ | width: 100%; | ||
+ | height: 20%; | ||
+ | top:auto; | ||
+ | bottom: 0px; | ||
+ | background-color: green; | ||
+ | /*border: 1px solid #c0c0c0;*/ | ||
+ | |||
+ | } | ||
+ | |||
+ | .cebian > .menu_title> .menu_logo{ | ||
+ | position: relative; | ||
+ | width: 50%; | ||
+ | height: 100%; | ||
+ | background-color: green; | ||
+ | |||
+ | float: left; | ||
+ | |||
+ | } | ||
+ | .cebian > .menu_title> .menu_button{ | ||
+ | position: relative; | ||
+ | width: 50%; | ||
+ | height: 100%; | ||
+ | background-color: green; | ||
+ | |||
+ | float: right; | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | } | ||
+ | .cebian > .menu_box{ | ||
+ | position: relative; | ||
+ | width: 100%; | ||
+ | height: 80%; | ||
+ | |||
+ | |||
+ | } | ||
+ | .cebian > .menu_box>.menu{ | ||
+ | position: relative; | ||
+ | width: 22.5%; | ||
+ | height: 30%; | ||
+ | background-color: green; | ||
+ | /*border: 1px solid #c0c0c0;*/ | ||
+ | float: left; | ||
+ | margin-left: 2%; | ||
+ | |||
+ | } | ||
+ | /* | ||
+ | 菜单按钮部分 | ||
+ | */ | ||
+ | #second_s{ | ||
+ | height: 700px; | ||
+ | background-position: center center; | ||
+ | position: relative; | ||
+ | background-color: rgba(236,132,255,1.00); | ||
+ | } | ||
+ | #third_s { | ||
+ | height: 824px; | ||
+ | position: relative; | ||
+ | background-color: rgba(255,255,255,1.00); | ||
+ | } | ||
+ | #third_s #third_1 { | ||
+ | height: 810px; | ||
+ | background-color: rgba(255,255,255,1.00); | ||
+ | position: relative; | ||
+ | } | ||
+ | #third_s #third_1 #third_1_1 { | ||
+ | background-color: rgba(195,128,129,1.00); | ||
+ | height: 810px; | ||
+ | position: absolute; | ||
+ | margin: 0 0; | ||
+ | width: 75%; | ||
+ | left: 19px; | ||
+ | top: -37px; | ||
+ | } | ||
+ | #zhuan { | ||
+ | margin-top: 18px; | ||
+ | display: block; | ||
+ | width: 10%; | ||
+ | height: 60px; | ||
+ | background-color: gold; | ||
+ | position: fixed; | ||
+ | max-width: 60px; | ||
+ | max-height: 60px; | ||
+ | min-width: 30px; | ||
+ | min-height: 30px; | ||
+ | text-align: center; | ||
+ | line-height: 50px; | ||
+ | bottom: 45px; | ||
+ | right: 134px; | ||
+ | } | ||
+ | |||
+ | a{ | ||
+ | text-decoration: none; | ||
+ | color: #4ba8ff; | ||
+ | } | ||
+ | |||
+ | |||
+ | .container { | ||
+ | padding-right: 15px; | ||
+ | padding-left: 15px; | ||
+ | margin-right: auto; | ||
+ | margin-left: auto; | ||
+ | } | ||
+ | |||
+ | @media (min-width: 768px) { | ||
+ | .container { | ||
+ | width: 750px; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @media (min-width: 992px) { | ||
+ | .container { | ||
+ | width: 970px; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @media (min-width: 1200px) { | ||
+ | .container { | ||
+ | width: 1170px; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | .container-fluid { | ||
+ | padding-right: 15px; | ||
+ | padding-left: 15px; | ||
+ | margin-right: auto; | ||
+ | margin-left: auto; | ||
+ | |||
+ | } | ||
+ | .row { | ||
+ | margin-right: -15px; | ||
+ | margin-left: -15px; | ||
+ | } | ||
+ | |||
+ | .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { | ||
+ | position: relative; | ||
+ | min-height: 1px; | ||
+ | } | ||
+ | .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 { | ||
+ | float: left; | ||
+ | } | ||
+ | .col-xs-12 { | ||
+ | width: 100%; | ||
+ | } | ||
+ | .col-xs-11 { | ||
+ | width: 91.66666667%; | ||
+ | } | ||
+ | .col-xs-10 { | ||
+ | width: 83.33333333%; | ||
+ | } | ||
+ | .col-xs-9 { | ||
+ | width: 75%; | ||
+ | } | ||
+ | .col-xs-8 { | ||
+ | width: 66.66666667%; | ||
+ | } | ||
+ | .col-xs-7 { | ||
+ | width: 58.33333333%; | ||
+ | } | ||
+ | .col-xs-6 { | ||
+ | width: 50%; | ||
+ | } | ||
+ | .col-xs-5 { | ||
+ | width: 41.66666667%; | ||
+ | } | ||
+ | .col-xs-4 { | ||
+ | width: 33.33333333%; | ||
+ | } | ||
+ | .col-xs-3 { | ||
+ | width: 25%; | ||
+ | } | ||
+ | .col-xs-2 { | ||
+ | width: 16.66666667%; | ||
+ | } | ||
+ | .col-xs-1 { | ||
+ | width: 8.33333333%; | ||
+ | } | ||
+ | .col-xs-pull-12 { | ||
+ | right: 100%; | ||
+ | } | ||
+ | .col-xs-pull-11 { | ||
+ | right: 91.66666667%; | ||
+ | } | ||
+ | .col-xs-pull-10 { | ||
+ | right: 83.33333333%; | ||
+ | } | ||
+ | .col-xs-pull-9 { | ||
+ | right: 75%; | ||
+ | } | ||
+ | .col-xs-pull-8 { | ||
+ | right: 66.66666667%; | ||
+ | } | ||
+ | .col-xs-pull-7 { | ||
+ | right: 58.33333333%; | ||
+ | } | ||
+ | .col-xs-pull-6 { | ||
+ | right: 50%; | ||
+ | } | ||
+ | .col-xs-pull-5 { | ||
+ | right: 41.66666667%; | ||
+ | } | ||
+ | .col-xs-pull-4 { | ||
+ | right: 33.33333333%; | ||
+ | } | ||
+ | .col-xs-pull-3 { | ||
+ | right: 25%; | ||
+ | } | ||
+ | .col-xs-pull-2 { | ||
+ | right: 16.66666667%; | ||
+ | } | ||
+ | .col-xs-pull-1 { | ||
+ | right: 8.33333333%; | ||
+ | } | ||
+ | .col-xs-pull-0 { | ||
+ | right: auto; | ||
+ | } | ||
+ | .col-xs-push-12 { | ||
+ | left: 100%; | ||
+ | } | ||
+ | .col-xs-push-11 { | ||
+ | left: 91.66666667%; | ||
+ | } | ||
+ | .col-xs-push-10 { | ||
+ | left: 83.33333333%; | ||
+ | } | ||
+ | .col-xs-push-9 { | ||
+ | left: 75%; | ||
+ | } | ||
+ | .col-xs-push-8 { | ||
+ | left: 66.66666667%; | ||
+ | } | ||
+ | .col-xs-push-7 { | ||
+ | left: 58.33333333%; | ||
+ | } | ||
+ | .col-xs-push-6 { | ||
+ | left: 50%; | ||
+ | } | ||
+ | .col-xs-push-5 { | ||
+ | left: 41.66666667%; | ||
+ | } | ||
+ | .col-xs-push-4 { | ||
+ | left: 33.33333333%; | ||
+ | } | ||
+ | .col-xs-push-3 { | ||
+ | left: 25%; | ||
+ | } | ||
+ | .col-xs-push-2 { | ||
+ | left: 16.66666667%; | ||
+ | } | ||
+ | .col-xs-push-1 { | ||
+ | left: 8.33333333%; | ||
+ | } | ||
+ | .col-xs-push-0 { | ||
+ | left: auto; | ||
+ | } | ||
+ | .col-xs-offset-12 { | ||
+ | margin-left: 100%; | ||
+ | } | ||
+ | .col-xs-offset-11 { | ||
+ | margin-left: 91.66666667%; | ||
+ | } | ||
+ | .col-xs-offset-10 { | ||
+ | margin-left: 83.33333333%; | ||
+ | } | ||
+ | .col-xs-offset-9 { | ||
+ | margin-left: 75%; | ||
+ | } | ||
+ | .col-xs-offset-8 { | ||
+ | margin-left: 66.66666667%; | ||
+ | } | ||
+ | .col-xs-offset-7 { | ||
+ | margin-left: 58.33333333%; | ||
+ | } | ||
+ | .col-xs-offset-6 { | ||
+ | margin-left: 50%; | ||
+ | } | ||
+ | .col-xs-offset-5 { | ||
+ | margin-left: 41.66666667%; | ||
+ | } | ||
+ | .col-xs-offset-4 { | ||
+ | margin-left: 33.33333333%; | ||
+ | } | ||
+ | .col-xs-offset-3 { | ||
+ | margin-left: 25%; | ||
+ | } | ||
+ | .col-xs-offset-2 { | ||
+ | margin-left: 16.66666667%; | ||
+ | } | ||
+ | .col-xs-offset-1 { | ||
+ | margin-left: 8.33333333%; | ||
+ | } | ||
+ | .col-xs-offset-0 { | ||
+ | margin-left: 0; | ||
+ | } | ||
+ | |||
+ | @media (min-width: 768px) { | ||
+ | .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 { | ||
+ | float: left; | ||
+ | } | ||
+ | .col-sm-12 { | ||
+ | width: 100%; | ||
+ | } | ||
+ | .col-sm-11 { | ||
+ | width: 91.66666667%; | ||
+ | } | ||
+ | .col-sm-10 { | ||
+ | width: 83.33333333%; | ||
+ | } | ||
+ | .col-sm-9 { | ||
+ | width: 75%; | ||
+ | } | ||
+ | .col-sm-8 { | ||
+ | width: 66.66666667%; | ||
+ | } | ||
+ | .col-sm-7 { | ||
+ | width: 58.33333333%; | ||
+ | } | ||
+ | .col-sm-6 { | ||
+ | width: 50%; | ||
+ | } | ||
+ | .col-sm-5 { | ||
+ | width: 41.66666667%; | ||
+ | } | ||
+ | .col-sm-4 { | ||
+ | width: 33.33333333%; | ||
+ | } | ||
+ | .col-sm-3 { | ||
+ | width: 25%; | ||
+ | } | ||
+ | .col-sm-2 { | ||
+ | width: 16.66666667%; | ||
+ | } | ||
+ | .col-sm-1 { | ||
+ | width: 8.33333333%; | ||
+ | } | ||
+ | .col-sm-pull-12 { | ||
+ | right: 100%; | ||
+ | } | ||
+ | .col-sm-pull-11 { | ||
+ | right: 91.66666667%; | ||
+ | } | ||
+ | .col-sm-pull-10 { | ||
+ | right: 83.33333333%; | ||
+ | } | ||
+ | .col-sm-pull-9 { | ||
+ | right: 75%; | ||
+ | } | ||
+ | .col-sm-pull-8 { | ||
+ | right: 66.66666667%; | ||
+ | } | ||
+ | .col-sm-pull-7 { | ||
+ | right: 58.33333333%; | ||
+ | } | ||
+ | .col-sm-pull-6 { | ||
+ | right: 50%; | ||
+ | } | ||
+ | .col-sm-pull-5 { | ||
+ | right: 41.66666667%; | ||
+ | } | ||
+ | .col-sm-pull-4 { | ||
+ | right: 33.33333333%; | ||
+ | } | ||
+ | .col-sm-pull-3 { | ||
+ | right: 25%; | ||
+ | } | ||
+ | .col-sm-pull-2 { | ||
+ | right: 16.66666667%; | ||
+ | } | ||
+ | .col-sm-pull-1 { | ||
+ | right: 8.33333333%; | ||
+ | } | ||
+ | .col-sm-pull-0 { | ||
+ | right: auto; | ||
+ | } | ||
+ | .col-sm-push-12 { | ||
+ | left: 100%; | ||
+ | } | ||
+ | .col-sm-push-11 { | ||
+ | left: 91.66666667%; | ||
+ | } | ||
+ | .col-sm-push-10 { | ||
+ | left: 83.33333333%; | ||
+ | } | ||
+ | .col-sm-push-9 { | ||
+ | left: 75%; | ||
+ | } | ||
+ | .col-sm-push-8 { | ||
+ | left: 66.66666667%; | ||
+ | } | ||
+ | .col-sm-push-7 { | ||
+ | left: 58.33333333%; | ||
+ | } | ||
+ | .col-sm-push-6 { | ||
+ | left: 50%; | ||
+ | } | ||
+ | .col-sm-push-5 { | ||
+ | left: 41.66666667%; | ||
+ | } | ||
+ | .col-sm-push-4 { | ||
+ | left: 33.33333333%; | ||
+ | } | ||
+ | .col-sm-push-3 { | ||
+ | left: 25%; | ||
+ | } | ||
+ | .col-sm-push-2 { | ||
+ | left: 16.66666667%; | ||
+ | } | ||
+ | .col-sm-push-1 { | ||
+ | left: 8.33333333%; | ||
+ | } | ||
+ | .col-sm-push-0 { | ||
+ | left: auto; | ||
+ | } | ||
+ | .col-sm-offset-12 { | ||
+ | margin-left: 100%; | ||
+ | } | ||
+ | .col-sm-offset-11 { | ||
+ | margin-left: 91.66666667%; | ||
+ | } | ||
+ | .col-sm-offset-10 { | ||
+ | margin-left: 83.33333333%; | ||
+ | } | ||
+ | .col-sm-offset-9 { | ||
+ | margin-left: 75%; | ||
+ | } | ||
+ | .col-sm-offset-8 { | ||
+ | margin-left: 66.66666667%; | ||
+ | } | ||
+ | .col-sm-offset-7 { | ||
+ | margin-left: 58.33333333%; | ||
+ | } | ||
+ | .col-sm-offset-6 { | ||
+ | margin-left: 50%; | ||
+ | } | ||
+ | .col-sm-offset-5 { | ||
+ | margin-left: 41.66666667%; | ||
+ | } | ||
+ | .col-sm-offset-4 { | ||
+ | margin-left: 33.33333333%; | ||
+ | } | ||
+ | .col-sm-offset-3 { | ||
+ | margin-left: 25%; | ||
+ | } | ||
+ | .col-sm-offset-2 { | ||
+ | margin-left: 16.66666667%; | ||
+ | } | ||
+ | .col-sm-offset-1 { | ||
+ | margin-left: 8.33333333%; | ||
+ | } | ||
+ | .col-sm-offset-0 { | ||
+ | margin-left: 0; | ||
+ | } | ||
+ | } | ||
+ | @media (min-width: 992px) { | ||
+ | .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 { | ||
+ | float: left; | ||
+ | } | ||
+ | .col-md-12 { | ||
+ | width: 100%; | ||
+ | } | ||
+ | .col-md-11 { | ||
+ | width: 91.66666667%; | ||
+ | } | ||
+ | .col-md-10 { | ||
+ | width: 83.33333333%; | ||
+ | } | ||
+ | .col-md-9 { | ||
+ | width: 75%; | ||
+ | } | ||
+ | .col-md-8 { | ||
+ | width: 66.66666667%; | ||
+ | } | ||
+ | .col-md-7 { | ||
+ | width: 58.33333333%; | ||
+ | } | ||
+ | .col-md-6 { | ||
+ | width: 50%; | ||
+ | } | ||
+ | .col-md-5 { | ||
+ | width: 41.66666667%; | ||
+ | } | ||
+ | .col-md-4 { | ||
+ | width: 33.33333333%; | ||
+ | } | ||
+ | .col-md-3 { | ||
+ | width: 25%; | ||
+ | } | ||
+ | .col-md-2 { | ||
+ | width: 16.66666667%; | ||
+ | } | ||
+ | .col-md-1 { | ||
+ | width: 8.33333333%; | ||
+ | } | ||
+ | .col-md-pull-12 { | ||
+ | right: 100%; | ||
+ | } | ||
+ | .col-md-pull-11 { | ||
+ | right: 91.66666667%; | ||
+ | } | ||
+ | .col-md-pull-10 { | ||
+ | right: 83.33333333%; | ||
+ | } | ||
+ | .col-md-pull-9 { | ||
+ | right: 75%; | ||
+ | } | ||
+ | .col-md-pull-8 { | ||
+ | right: 66.66666667%; | ||
+ | } | ||
+ | .col-md-pull-7 { | ||
+ | right: 58.33333333%; | ||
+ | } | ||
+ | .col-md-pull-6 { | ||
+ | right: 50%; | ||
+ | } | ||
+ | .col-md-pull-5 { | ||
+ | right: 41.66666667%; | ||
+ | } | ||
+ | .col-md-pull-4 { | ||
+ | right: 33.33333333%; | ||
+ | } | ||
+ | .col-md-pull-3 { | ||
+ | right: 25%; | ||
+ | } | ||
+ | .col-md-pull-2 { | ||
+ | right: 16.66666667%; | ||
+ | } | ||
+ | .col-md-pull-1 { | ||
+ | right: 8.33333333%; | ||
+ | } | ||
+ | .col-md-pull-0 { | ||
+ | right: auto; | ||
+ | } | ||
+ | .col-md-push-12 { | ||
+ | left: 100%; | ||
+ | } | ||
+ | .col-md-push-11 { | ||
+ | left: 91.66666667%; | ||
+ | } | ||
+ | .col-md-push-10 { | ||
+ | left: 83.33333333%; | ||
+ | } | ||
+ | .col-md-push-9 { | ||
+ | left: 75%; | ||
+ | } | ||
+ | .col-md-push-8 { | ||
+ | left: 66.66666667%; | ||
+ | } | ||
+ | .col-md-push-7 { | ||
+ | left: 58.33333333%; | ||
+ | } | ||
+ | .col-md-push-6 { | ||
+ | left: 50%; | ||
+ | } | ||
+ | .col-md-push-5 { | ||
+ | left: 41.66666667%; | ||
+ | } | ||
+ | .col-md-push-4 { | ||
+ | left: 33.33333333%; | ||
+ | } | ||
+ | .col-md-push-3 { | ||
+ | left: 25%; | ||
+ | } | ||
+ | .col-md-push-2 { | ||
+ | left: 16.66666667%; | ||
+ | } | ||
+ | .col-md-push-1 { | ||
+ | left: 8.33333333%; | ||
+ | } | ||
+ | .col-md-push-0 { | ||
+ | left: auto; | ||
+ | } | ||
+ | .col-md-offset-12 { | ||
+ | margin-left: 100%; | ||
+ | } | ||
+ | .col-md-offset-11 { | ||
+ | margin-left: 91.66666667%; | ||
+ | } | ||
+ | .col-md-offset-10 { | ||
+ | margin-left: 83.33333333%; | ||
+ | } | ||
+ | .col-md-offset-9 { | ||
+ | margin-left: 75%; | ||
+ | } | ||
+ | .col-md-offset-8 { | ||
+ | margin-left: 66.66666667%; | ||
+ | } | ||
+ | .col-md-offset-7 { | ||
+ | margin-left: 58.33333333%; | ||
+ | } | ||
+ | .col-md-offset-6 { | ||
+ | margin-left: 50%; | ||
+ | } | ||
+ | .col-md-offset-5 { | ||
+ | margin-left: 41.66666667%; | ||
+ | } | ||
+ | .col-md-offset-4 { | ||
+ | margin-left: 33.33333333%; | ||
+ | } | ||
+ | .col-md-offset-3 { | ||
+ | margin-left: 25%; | ||
+ | } | ||
+ | .col-md-offset-2 { | ||
+ | margin-left: 16.66666667%; | ||
+ | } | ||
+ | .col-md-offset-1 { | ||
+ | margin-left: 8.33333333%; | ||
+ | } | ||
+ | .col-md-offset-0 { | ||
+ | margin-left: 0; | ||
+ | } | ||
+ | } | ||
+ | @media (min-width: 1200px) { | ||
+ | .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 { | ||
+ | float: left; | ||
+ | } | ||
+ | .col-lg-12 { | ||
+ | width: 100%; | ||
+ | } | ||
+ | .col-lg-11 { | ||
+ | width: 91.66666667%; | ||
+ | } | ||
+ | .col-lg-10 { | ||
+ | width: 83.33333333%; | ||
+ | } | ||
+ | .col-lg-9 { | ||
+ | width: 75%; | ||
+ | } | ||
+ | .col-lg-8 { | ||
+ | width: 66.66666667%; | ||
+ | } | ||
+ | .col-lg-7 { | ||
+ | width: 58.33333333%; | ||
+ | } | ||
+ | .col-lg-6 { | ||
+ | width: 50%; | ||
+ | } | ||
+ | .col-lg-5 { | ||
+ | width: 41.66666667%; | ||
+ | } | ||
+ | .col-lg-4 { | ||
+ | width: 33.33333333%; | ||
+ | } | ||
+ | .col-lg-3 { | ||
+ | width: 25%; | ||
+ | } | ||
+ | .col-lg-2 { | ||
+ | width: 16.66666667%; | ||
+ | } | ||
+ | .col-lg-1 { | ||
+ | width: 8.33333333%; | ||
+ | } | ||
+ | .col-lg-pull-12 { | ||
+ | right: 100%; | ||
+ | } | ||
+ | .col-lg-pull-11 { | ||
+ | right: 91.66666667%; | ||
+ | } | ||
+ | .col-lg-pull-10 { | ||
+ | right: 83.33333333%; | ||
+ | } | ||
+ | .col-lg-pull-9 { | ||
+ | right: 75%; | ||
+ | } | ||
+ | .col-lg-pull-8 { | ||
+ | right: 66.66666667%; | ||
+ | } | ||
+ | .col-lg-pull-7 { | ||
+ | right: 58.33333333%; | ||
+ | } | ||
+ | .col-lg-pull-6 { | ||
+ | right: 50%; | ||
+ | } | ||
+ | .col-lg-pull-5 { | ||
+ | right: 41.66666667%; | ||
+ | } | ||
+ | .col-lg-pull-4 { | ||
+ | right: 33.33333333%; | ||
+ | } | ||
+ | .col-lg-pull-3 { | ||
+ | right: 25%; | ||
+ | } | ||
+ | .col-lg-pull-2 { | ||
+ | right: 16.66666667%; | ||
+ | } | ||
+ | .col-lg-pull-1 { | ||
+ | right: 8.33333333%; | ||
+ | } | ||
+ | .col-lg-pull-0 { | ||
+ | right: auto; | ||
+ | } | ||
+ | .col-lg-push-12 { | ||
+ | left: 100%; | ||
+ | } | ||
+ | .col-lg-push-11 { | ||
+ | left: 91.66666667%; | ||
+ | } | ||
+ | .col-lg-push-10 { | ||
+ | left: 83.33333333%; | ||
+ | } | ||
+ | .col-lg-push-9 { | ||
+ | left: 75%; | ||
+ | } | ||
+ | .col-lg-push-8 { | ||
+ | left: 66.66666667%; | ||
+ | } | ||
+ | .col-lg-push-7 { | ||
+ | left: 58.33333333%; | ||
+ | } | ||
+ | .col-lg-push-6 { | ||
+ | left: 50%; | ||
+ | } | ||
+ | .col-lg-push-5 { | ||
+ | left: 41.66666667%; | ||
+ | } | ||
+ | .col-lg-push-4 { | ||
+ | left: 33.33333333%; | ||
+ | } | ||
+ | .col-lg-push-3 { | ||
+ | left: 25%; | ||
+ | } | ||
+ | .col-lg-push-2 { | ||
+ | left: 16.66666667%; | ||
+ | } | ||
+ | .col-lg-push-1 { | ||
+ | left: 8.33333333%; | ||
+ | } | ||
+ | .col-lg-push-0 { | ||
+ | left: auto; | ||
+ | } | ||
+ | .col-lg-offset-12 { | ||
+ | margin-left: 100%; | ||
+ | } | ||
+ | .col-lg-offset-11 { | ||
+ | margin-left: 91.66666667%; | ||
+ | } | ||
+ | .col-lg-offset-10 { | ||
+ | margin-left: 83.33333333%; | ||
+ | } | ||
+ | .col-lg-offset-9 { | ||
+ | margin-left: 75%; | ||
+ | } | ||
+ | .col-lg-offset-8 { | ||
+ | margin-left: 66.66666667%; | ||
+ | } | ||
+ | .col-lg-offset-7 { | ||
+ | margin-left: 58.33333333%; | ||
+ | } | ||
+ | .col-lg-offset-6 { | ||
+ | margin-left: 50%; | ||
+ | } | ||
+ | .col-lg-offset-5 { | ||
+ | margin-left: 41.66666667%; | ||
+ | } | ||
+ | .col-lg-offset-4 { | ||
+ | margin-left: 33.33333333%; | ||
+ | } | ||
+ | .col-lg-offset-3 { | ||
+ | margin-left: 25%; | ||
+ | } | ||
+ | .col-lg-offset-2 { | ||
+ | margin-left: 16.66666667%; | ||
+ | } | ||
+ | .col-lg-offset-1 { | ||
+ | margin-left: 8.33333333%; | ||
+ | } | ||
+ | .col-lg-offset-0 { | ||
+ | margin-left: 0; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | |||
+ | .show { | ||
+ | display: block !important; | ||
+ | } | ||
+ | .invisible { | ||
+ | visibility: hidden; | ||
+ | } | ||
+ | .text-hide { | ||
+ | font: 0/0 a; | ||
+ | color: transparent; | ||
+ | text-shadow: none; | ||
+ | background-color: transparent; | ||
+ | border: 0; | ||
+ | } | ||
+ | .hidden { | ||
+ | display: none !important; | ||
+ | } | ||
+ | .affix { | ||
+ | position: fixed; | ||
+ | } | ||
+ | @-ms-viewport { | ||
+ | width: device-width; | ||
+ | } | ||
+ | .visible-xs, | ||
+ | .visible-sm, | ||
+ | .visible-md, | ||
+ | .visible-lg { | ||
+ | display: none !important; | ||
+ | } | ||
+ | .visible-xs-block, | ||
+ | .visible-xs-inline, | ||
+ | .visible-xs-inline-block, | ||
+ | .visible-sm-block, | ||
+ | .visible-sm-inline, | ||
+ | .visible-sm-inline-block, | ||
+ | .visible-md-block, | ||
+ | .visible-md-inline, | ||
+ | .visible-md-inline-block, | ||
+ | .visible-lg-block, | ||
+ | .visible-lg-inline, | ||
+ | .visible-lg-inline-block { | ||
+ | display: none !important; | ||
+ | } | ||
+ | @media (max-width: 768px) { | ||
+ | .visible-xs { | ||
+ | display: block !important; | ||
+ | } | ||
+ | table.visible-xs { | ||
+ | display: table !important; | ||
+ | } | ||
+ | tr.visible-xs { | ||
+ | display: table-row !important; | ||
+ | } | ||
+ | th.visible-xs, | ||
+ | td.visible-xs { | ||
+ | display: table-cell !important; | ||
+ | } | ||
+ | } | ||
+ | @media (max-width: 768px) { | ||
+ | .visible-xs-block { | ||
+ | display: block !important; | ||
+ | } | ||
+ | } | ||
+ | @media (max-width: 768px) { | ||
+ | .visible-xs-inline { | ||
+ | display: inline !important; | ||
+ | } | ||
+ | } | ||
+ | @media (max-width: 768px) { | ||
+ | .visible-xs-inline-block { | ||
+ | display: inline-block !important; | ||
+ | } | ||
+ | } | ||
+ | @media (min-width: 768px) and (max-width: 991px) { | ||
+ | .visible-sm { | ||
+ | display: block !important; | ||
+ | } | ||
+ | table.visible-sm { | ||
+ | display: table !important; | ||
+ | } | ||
+ | tr.visible-sm { | ||
+ | display: table-row !important; | ||
+ | } | ||
+ | th.visible-sm, | ||
+ | td.visible-sm { | ||
+ | display: table-cell !important; | ||
+ | } | ||
+ | } | ||
+ | @media (min-width: 768px) and (max-width: 991px) { | ||
+ | .visible-sm-block { | ||
+ | display: block !important; | ||
+ | } | ||
+ | } | ||
+ | @media (min-width: 768px) and (max-width: 991px) { | ||
+ | .visible-sm-inline { | ||
+ | display: inline !important; | ||
+ | } | ||
+ | } | ||
+ | @media (min-width: 768px) and (max-width: 991px) { | ||
+ | .visible-sm-inline-block { | ||
+ | display: inline-block !important; | ||
+ | } | ||
+ | } | ||
+ | @media (min-width: 992px) and (max-width: 1199px) { | ||
+ | .visible-md { | ||
+ | display: block !important; | ||
+ | } | ||
+ | table.visible-md { | ||
+ | display: table !important; | ||
+ | } | ||
+ | tr.visible-md { | ||
+ | display: table-row !important; | ||
+ | } | ||
+ | th.visible-md, | ||
+ | td.visible-md { | ||
+ | display: table-cell !important; | ||
+ | } | ||
+ | } | ||
+ | @media (min-width: 992px) and (max-width: 1199px) { | ||
+ | .visible-md-block { | ||
+ | display: block !important; | ||
+ | } | ||
+ | } | ||
+ | @media (min-width: 992px) and (max-width: 1199px) { | ||
+ | .visible-md-inline { | ||
+ | display: inline !important; | ||
+ | } | ||
+ | } | ||
+ | @media (min-width: 992px) and (max-width: 1199px) { | ||
+ | .visible-md-inline-block { | ||
+ | display: inline-block !important; | ||
+ | } | ||
+ | } | ||
+ | @media (min-width: 1200px) { | ||
+ | .visible-lg { | ||
+ | display: block !important; | ||
+ | } | ||
+ | table.visible-lg { | ||
+ | display: table !important; | ||
+ | } | ||
+ | tr.visible-lg { | ||
+ | display: table-row !important; | ||
+ | } | ||
+ | th.visible-lg, | ||
+ | td.visible-lg { | ||
+ | display: table-cell !important; | ||
+ | } | ||
+ | } | ||
+ | @media (min-width: 1200px) { | ||
+ | .visible-lg-block { | ||
+ | display: block !important; | ||
+ | } | ||
+ | } | ||
+ | @media (min-width: 1200px) { | ||
+ | .visible-lg-inline { | ||
+ | display: inline !important; | ||
+ | } | ||
+ | } | ||
+ | @media (min-width: 1200px) { | ||
+ | .visible-lg-inline-block { | ||
+ | display: inline-block !important; | ||
+ | } | ||
+ | } | ||
+ | @media (max-width: 768px) { | ||
+ | .hidden-xs { | ||
+ | display: none !important; | ||
+ | } | ||
+ | } | ||
+ | @media (min-width: 768px) and (max-width: 991px) { | ||
+ | .hidden-sm { | ||
+ | display: none !important; | ||
+ | } | ||
+ | } | ||
+ | @media (min-width: 992px) and (max-width: 1199px) { | ||
+ | .hidden-md { | ||
+ | display: none !important; | ||
+ | } | ||
+ | } | ||
+ | @media (min-width: 1200px) { | ||
+ | .hidden-lg { | ||
+ | display: none !important; | ||
+ | } | ||
+ | } | ||
+ | .center-block { | ||
+ | display: block; | ||
+ | margin-right: auto; | ||
+ | margin-left: auto; | ||
} | } | ||
</style> | </style> | ||
− | < | + | <script> |
− | + | function $$(id){ | |
− | + | var el=document.getElementById(id); | |
− | + | return el; | |
− | < | + | } |
− | + | //获取全局元素部分 | |
− | + | var menudiv=document.getElementsByClassName("menu"); | |
− | + | var menu_box=document.getElementById("menu_box"); | |
+ | var menu_btn=document.getElementById("menu_btn"); | ||
+ | var bg_menu=document.getElementById("bg_menu"); | ||
+ | //菜单部分函数 | ||
+ | function menuStart(){ | ||
+ | var menu_w=document.documentElement.clientWidth; | ||
+ | var menu_h=document.documentElement.clientHeight; | ||
+ | document.getElementById("lizi").innerHTML="宽度:"+menu_w+",高度:"+menu_h; | ||
+ | for(var i=0;i<menudiv.length;i++){ | ||
+ | menudiv[i].style.marginTop=menu_box.offsetHeight*0.025+"px"; | ||
+ | } | ||
+ | //菜单按钮的改变 | ||
+ | menu_btn.style.height=menu_btn.offsetWidth+"px"; | ||
+ | menu_btn.style.bottom=menu_btn.offsetWidth+"px"; | ||
+ | menu_btn.style.right=menu_btn.offsetWidth+"px" | ||
+ | |||
+ | |||
+ | |||
+ | if(menu_w>=430){ | ||
+ | //整个菜单的改变 | ||
+ | bg_menu.style.width=35+"%"; | ||
+ | bg_menu.style.height=bg_menu.offsetWidth*0.8+"px"; | ||
+ | bg_menu.style.minWidth=150+"px"; | ||
+ | bg_menu.style.minHeight=150+"px"; | ||
+ | bg_menu.style.maxWidth=430+"px"; | ||
+ | bg_menu.style.maxHeight=430+"px"; | ||
+ | |||
+ | bg_menu.style.right=menu_btn.offsetWidth*1.7+"px"; | ||
+ | bg_menu.style.bottom=menu_btn.offsetWidth*2.2+"px"; | ||
+ | bg_menu.style.left="auto"; | ||
+ | console.log(bg_menu.offsetHeight); | ||
+ | |||
+ | |||
+ | |||
+ | } | ||
+ | else{ | ||
+ | bg_menu.style.width=100+"%"; | ||
+ | bg_menu.style.height=50+"%"; | ||
+ | bg_menu.style.right=0; | ||
+ | bg_menu.style.left=0; | ||
+ | bg_menu.style.bottom=0; | ||
+ | |||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | } | ||
+ | |||
+ | //窗口加载 | ||
+ | window.onload=function(){ | ||
+ | menu_btn.style.display="block"; | ||
+ | menuStart(); | ||
+ | document.getElementById('bg_menu').classList.add("hidden"); | ||
+ | |||
+ | } | ||
+ | //窗口改变 | ||
+ | window.onresize = function(){ | ||
+ | menuStart(); | ||
+ | } | ||
+ | |||
+ | //自定义菜单开关 | ||
+ | menu_btn.onclick=function(){ | ||
+ | |||
+ | if(hasClass(bg_menu, 'hidden')){ | ||
+ | removeClass(bg_menu,'hidden'); | ||
+ | } | ||
+ | else{ | ||
+ | addClass(bg_menu,'hidden'); | ||
+ | } | ||
+ | menuStart(); | ||
+ | } | ||
+ | //特效部分 | ||
+ | //导航鼠标hover | ||
+ | var nav_bg=document.getElementById("nav_bg"); | ||
+ | var list_1=document.getElementsByClassName("list_1");//获取导航外层项目 | ||
+ | |||
+ | function nav_anti(){ | ||
+ | for(var i=0;i<list_1.length;i++){ | ||
+ | list_1[i].onmouseenter=function(){ | ||
+ | nav_bg.style.backgroundColor="#fff"; | ||
+ | nav_bg.style.transition =0.5+"s"; | ||
+ | } | ||
+ | list_1[i].onmouseleave=function(){ | ||
+ | nav_bg.style.backgroundColor="transparent"; | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | nav_anti(); | ||
+ | |||
+ | |||
+ | $$("zhuan").onclick=function(){ | ||
+ | $$("third_1_1").style.transition=1+"s linear"; | ||
+ | $$("third_1_1").style.transform="rotateY("+180+"deg)"; | ||
+ | } | ||
+ | function $$(id){ | ||
+ | var el=document.getElementById(id); | ||
+ | return el; | ||
+ | } | ||
+ | function $C$(Class){ | ||
+ | var el=document.getElementsByClassName(Class); | ||
+ | return el; | ||
+ | } | ||
+ | |||
+ | //有关类名字的方法 | ||
+ | function addClass(el, className) { | ||
+ | if (hasClass(el, className)) { | ||
+ | return; | ||
+ | } | ||
+ | let newClass = el.className.split(' '); | ||
+ | newClass.push(className); | ||
+ | el.className = newClass.join(' '); | ||
+ | } | ||
+ | |||
+ | function hasClass(el, className) { | ||
+ | // \s匹配任何空白字符,包括空格、制表符、换页符等等 | ||
+ | let reg = new RegExp('(^|\\s)' + className + '(\\s|$)'); | ||
+ | return reg.test(el.className); | ||
+ | } | ||
+ | function removeClass(el, className){ | ||
+ | if (!hasClass(el, className)) { | ||
+ | return; | ||
+ | } | ||
+ | let newClass = el.className.split(' '); | ||
+ | newClass.forEach(function(val, index, newClass){ | ||
+ | if(val === className){ | ||
+ | newClass.splice(index,1); | ||
+ | } | ||
+ | }) ; | ||
+ | el.className = newClass.join(' '); | ||
+ | } | ||
+ | |||
+ | //获取屏幕上滚高度 | ||
+ | function getScrollTop(){ | ||
+ | var scrollTop=0; | ||
+ | if(document.documentElement&&document.documentElement.scrollTop){ | ||
+ | scrollTop=document.documentElement.scrollTop; | ||
+ | }else if(document.body){ | ||
+ | scrollTop=document.body.scrollTop; | ||
+ | } | ||
+ | return scrollTop; | ||
+ | } | ||
+ | var content={ | ||
+ | detail : [ | ||
+ | |||
+ | {title : "ertyu", | ||
+ | para : [ | ||
+ | |||
+ | |||
+ | { | ||
+ | word : "我是第一段", | ||
+ | pic : "1.png", | ||
+ | strong : ["strong","asd"], | ||
+ | div : { | ||
+ | id : "chart1", | ||
+ | class : ["strong","asd"] | ||
+ | } | ||
+ | }, | ||
+ | |||
+ | { | ||
+ | word : "你知道吗", | ||
+ | pic : "none", | ||
+ | strong : [] | ||
+ | } | ||
+ | |||
+ | |||
+ | ]}, | ||
+ | |||
+ | |||
+ | |||
+ | {title : "ert2121221", | ||
+ | para : [ | ||
+ | |||
+ | |||
+ | { | ||
+ | word : "我爱你我爱你我爱你我爱你我爱你我爱你我爱你我爱你我爱你我爱你", | ||
+ | pic : "1.png", | ||
+ | strong : ["strong","asd"], | ||
+ | div : { | ||
+ | id : "chart1", | ||
+ | class : ["strong","asd"] | ||
+ | } | ||
+ | }, | ||
+ | |||
+ | { | ||
+ | word : "你知道吗", | ||
+ | pic : "none", | ||
+ | strong : [] | ||
+ | }, | ||
+ | |||
+ | { | ||
+ | word : "你知道吗", | ||
+ | pic : "none", | ||
+ | strong : [] | ||
+ | }, | ||
+ | |||
+ | ]} | ||
+ | |||
+ | ] | ||
+ | } | ||
+ | var contElement=[]; | ||
+ | function renderWord(){ | ||
+ | for(var i=0;i<content.detail.length;i++){ | ||
+ | var tT=document.createElement("h1"); | ||
+ | tT.innerHTML=content.detail[i].title; | ||
+ | console.log(tT); | ||
+ | contElement.push(tT); | ||
+ | for(var j=0;j<content.detail[i].para.length;j++){ | ||
+ | var tP=document.createElement("p"); | ||
+ | tP.innerHTML=content.detail[i].para[j].word; | ||
+ | console.log(tP); | ||
+ | contElement.push(tP); | ||
+ | if(content.detail[i].para[j].pic!="none"){ | ||
+ | var tImg=document.createElement("div"); | ||
+ | tImg.innerHTML="<img src=\'"+content.detail[i].para[j].pic+"\'>"; | ||
+ | console.log(tImg); | ||
+ | contElement.push(tImg); | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | for(var i=0;i<contElement.length;i++){ | ||
+ | $$("third_1_1").appendChild(contElement[i]); | ||
+ | } | ||
+ | |||
+ | |||
+ | } | ||
+ | renderWord(); | ||
+ | |||
+ | </script> | ||
+ | <div id="bg_menu" class="cebian hidden"> | ||
+ | <div class="menu_title"> | ||
+ | <div class="menu_logo">jilinchina!</div> | ||
+ | <div class="menu_button" id="menu_button">取消按钮</div> | ||
</div> | </div> | ||
− | </ | + | <div id="menu_box" class="menu_box"> |
+ | <div id="lizi" class="menu">第一块</div> | ||
+ | <div class="menu">第一块</div> | ||
+ | <div class="menu">第一块</div> | ||
+ | <div class="menu">第一块</div> | ||
+ | <div class="menu">第一块</div> | ||
+ | <div class="menu">第一块</div> | ||
+ | <div class="menu">第一块</div> | ||
+ | <div class="menu">第一块</div> | ||
+ | |||
+ | </div> | ||
+ | </div> | ||
+ | <!--屏幕内容第一条 导航栏 --> | ||
+ | <nav id="first_s"> | ||
+ | <div id="nav_bg" class="container-fluid"> | ||
+ | <div class="container"> | ||
+ | <div class="navbar-header"> | ||
+ | <a class="navbar-brand" href="#">Jilin_China</a> | ||
+ | </div> | ||
+ | <ul class="hidden-xs"> | ||
+ | <li class="active list_1"><a href="#">Home</a></li> | ||
+ | <li class="list_1"><a href="#">第一块</a> | ||
+ | <ul> | ||
+ | <li>内一块</li> | ||
+ | <li>内一块 | ||
+ | <ul> | ||
+ | <li>内二块</li> | ||
+ | <li>内二块</li> | ||
+ | <li>内二块</li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li>内一块</li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li class="list_1"><a href="#">第二块</a></li> | ||
+ | <li class="list_1"><a href="#">第三块</a></li> | ||
+ | <li class="list_1"><a href="#">第四块</a></li> | ||
+ | <li class="list_1"><a href="#">第五块</a></li> | ||
+ | <li class="list_1"><a href="#">第四块</a></li> | ||
+ | <li class="list_1"><a href="#">第五块</a></li> | ||
+ | </ul> | ||
+ | |||
+ | </div> | ||
+ | </div> | ||
+ | </nav> | ||
+ | <div id="second_s" class="banner container-fluid"> | ||
+ | |||
+ | |||
+ | </div> | ||
+ | <div id="third_s" class="container-fluid"> | ||
+ | <div id="third_1" class="container"> | ||
+ | <div id="third_1_1"> | ||
+ | backface-visibility:hidden; | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | </div> | ||
+ | <div id="zhuan">翻转</div> | ||
+ | <div id="menu_btn">菜单</div> | ||
</html> | </html> |
Revision as of 14:35, 24 May 2019
backface-visibility:hidden;
翻转