From 50ffa64f877246c13e8abd824719b4a047e9fe0c Mon Sep 17 00:00:00 2001 From: whycq <whycq> Date: 星期一, 23 五月 2022 16:36:07 +0800 Subject: [PATCH] # ycq --- src/main/webapp/static/css/index.css | 70 +++++++++------- src/main/webapp/views/render/asda.css | 121 ++++++++++++++++++++++++++++++ 2 files changed, 160 insertions(+), 31 deletions(-) diff --git a/src/main/webapp/static/css/index.css b/src/main/webapp/static/css/index.css index 2b5ee44..c895384 100644 --- a/src/main/webapp/static/css/index.css +++ b/src/main/webapp/static/css/index.css @@ -37,40 +37,49 @@ 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 { @@ -95,9 +104,8 @@ } .nav-select { font-weight: 900; - color: rgb(255, 148, 111); + color: #fff; } - diff --git a/src/main/webapp/views/render/asda.css b/src/main/webapp/views/render/asda.css new file mode 100644 index 0000000..ff4b37e --- /dev/null +++ b/src/main/webapp/views/render/asda.css @@ -0,0 +1,121 @@ +* { + 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; +} + + + -- Gitblit v1.9.1