| | |
| | | top: 50%; |
| | | transform: translateY(-50%); |
| | | } |
| | | .nav ul { |
| | | font-size: 1.25em; |
| | | font-weight: 500; |
| | | padding-left: 5%; |
| | | } |
| | | .nav a { |
| | | position: relative; |
| | | text-decoration: none; |
| | | margin-left: 0.625em; |
| | | font-weight: 500; |
| | | } |
| | | .nav a:hover { |
| | | color: #fff; |
| | | } |
| | | /* Effect 1: Brackets */ |
| | | .cl-effect-1 a::before, |
| | | .cl-effect-1 a::after { |
| | | display: inline-block; |
| | | .cl-effect-4 a { |
| | | padding: 0 0 0.625em; |
| | | } |
| | | |
| | | .cl-effect-4 a::after { |
| | | position: absolute; |
| | | top: 100%; |
| | | left: 0; |
| | | width: 100%; |
| | | height: 0.0625em; |
| | | background: #fff; |
| | | content: ''; |
| | | opacity: 0; |
| | | -webkit-transition: -webkit-transform 0.3s, opacity 0.2s; |
| | | -moz-transition: -moz-transform 0.3s, opacity 0.2s; |
| | | transition: transform 0.3s, opacity 0.2s; |
| | | -webkit-transition: height 0.3s, opacity 0.3s, -webkit-transform 0.3s; |
| | | -moz-transition: height 0.3s, opacity 0.3s, -moz-transform 0.3s; |
| | | transition: height 0.3s, opacity 0.3s, transform 0.3s; |
| | | -webkit-transform: translateY(-0.625em); |
| | | -moz-transform: translateY(-0.625em); |
| | | transform: translateY(-0.625em); |
| | | } |
| | | |
| | | .cl-effect-1 a::before { |
| | | margin-right: 10px; |
| | | content: '['; |
| | | -webkit-transform: translateX(20px); |
| | | -moz-transform: translateX(20px); |
| | | transform: translateX(20px); |
| | | } |
| | | |
| | | .cl-effect-1 a::after { |
| | | margin-left: 10px; |
| | | content: ']'; |
| | | -webkit-transform: translateX(-20px); |
| | | -moz-transform: translateX(-20px); |
| | | transform: translateX(-20px); |
| | | } |
| | | |
| | | .cl-effect-1 a:hover::before, |
| | | .cl-effect-1 a:hover::after, |
| | | .cl-effect-1 a:focus::before, |
| | | .cl-effect-1 a:focus::after { |
| | | .cl-effect-4 a:hover::after, |
| | | .cl-effect-4 a:focus::after { |
| | | height: 0.3125em; |
| | | opacity: 1; |
| | | -webkit-transform: translateX(0px); |
| | | -moz-transform: translateX(0px); |
| | | transform: translateX(0px); |
| | | -webkit-transform: translateY(0px); |
| | | -moz-transform: translateY(0px); |
| | | transform: translateY(0px); |
| | | } |
| | | /* Effect 1: Brackets 👆*/ |
| | | .sidebar ul { |
| | |
| | | } |
| | | .nav-select { |
| | | font-weight: 900; |
| | | color: rgb(255, 148, 111); |
| | | color: #fff; |
| | | } |
| | | |
| | | |
| | | |
| | | |
New file |
| | |
| | | * { |
| | | margin: 0; |
| | | overflow: hidden; |
| | | } |
| | | html,body { |
| | | height: 100%; |
| | | } |
| | | |
| | | .sidebar { |
| | | width: 8%; |
| | | height: 40%; |
| | | line-height: 5.625em; |
| | | position: fixed; |
| | | top: 50%; |
| | | transform: translateY(-50%); |
| | | } |
| | | .nav ul { |
| | | font-size: 1.25em; |
| | | font-weight: 500; |
| | | padding-left: 5%; |
| | | } |
| | | .nav a { |
| | | position: relative; |
| | | text-decoration: none; |
| | | margin-left: 0.625em; |
| | | font-weight: 500; |
| | | } |
| | | .nav a:hover { |
| | | color: #fff; |
| | | } |
| | | /* Effect 4: bottom border enlarge */ |
| | | .cl-effect-4 a { |
| | | padding: 0 0 0.625em; |
| | | } |
| | | |
| | | .cl-effect-4 a::after { |
| | | position: absolute; |
| | | top: 100%; |
| | | left: 0; |
| | | width: 100%; |
| | | height: 0.0625em; |
| | | background: #fff; |
| | | content: ''; |
| | | opacity: 0; |
| | | -webkit-transition: height 0.3s, opacity 0.3s, -webkit-transform 0.3s; |
| | | -moz-transition: height 0.3s, opacity 0.3s, -moz-transform 0.3s; |
| | | transition: height 0.3s, opacity 0.3s, transform 0.3s; |
| | | -webkit-transform: translateY(-0.625em); |
| | | -moz-transform: translateY(-0.625em); |
| | | transform: translateY(-0.625em); |
| | | } |
| | | |
| | | .cl-effect-4 a:hover::after, |
| | | .cl-effect-4 a:focus::after { |
| | | height: 0.3125em; |
| | | opacity: 1; |
| | | -webkit-transform: translateY(0px); |
| | | -moz-transform: translateY(0px); |
| | | transform: translateY(0px); |
| | | } |
| | | /* Effect 4: bottom border enlarge */ |
| | | /* .sidebar ul { |
| | | font-size: 20px; |
| | | font-weight: 500; |
| | | padding-left: 5%; |
| | | |
| | | } |
| | | .sidebar a { |
| | | text-decoration: none; |
| | | } |
| | | |
| | | .sidebar a:hover { |
| | | color: rgb(255, 148, 111); |
| | | } */ |
| | | |
| | | |
| | | |
| | | .nav-unselect { |
| | | color: #FFFFFF; |
| | | } |
| | | .nav-select { |
| | | font-weight: 900; |
| | | color: #fff; |
| | | } |
| | | |
| | | |
| | | |
| | | |
| | | /* 涓讳綋 */ |
| | | iframe { |
| | | width: 100%; |
| | | height: 100%; |
| | | border-width: 0; |
| | | } |
| | | /* 搴曢儴 */ |
| | | footer { |
| | | /* border-top: 1px solid #e3e3e3; */ |
| | | position: fixed; |
| | | bottom: 0; |
| | | right: 0; |
| | | left: 0; |
| | | text-align: center; |
| | | font: 14px Helvetica Neue,Helvetica,PingFang SC,\5FAE\8F6F\96C5\9ED1,Tahoma,Arial,sans-serif; |
| | | box-shadow: 0 -1px 2px 0 rgba(0,0,0,.0); |
| | | box-sizing: border-box; |
| | | background-color: rgb(108,167,168); |
| | | z-index: 999; |
| | | height: 20px; |
| | | font-size: 13px; |
| | | line-height: 20px; |
| | | background-color: #f1f1f1; |
| | | } |
| | | footer a { |
| | | color: #3573ab; |
| | | font-weight: bold; |
| | | text-decoration: none; |
| | | cursor: pointer; |
| | | } |
| | | |
| | | |
| | | |