* { 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; }