Difference between revisions of "Template:DLUT China B/css/nav.css"
(修正最后一个导航项溢出页面的问题。) |
m (修改配色。) |
||
| (One intermediate revision by the same user not shown) | |||
| Line 2: | Line 2: | ||
0% { | 0% { | ||
opacity: 0; | opacity: 0; | ||
| + | -moz-opacity: 0; | ||
transform: translate3d(0, -30px, 0); | transform: translate3d(0, -30px, 0); | ||
| + | -moz-transform: translate3d(0,-30px,0); | ||
} | } | ||
100% { | 100% { | ||
opacity: 1; | opacity: 1; | ||
| + | -moz-opacity: 1; | ||
transform: none; | transform: none; | ||
| + | -moz-transform: none; | ||
} | } | ||
} | } | ||
| − | + | #dlutb #nav{ | |
| − | height: | + | width:100%; |
| − | + | height: 60px; | |
| + | margin:0; | ||
| + | background-color:#ee9147; | ||
| + | } | ||
| + | #dlutb #nav ul.menu { | ||
| + | height: 60px; | ||
padding: 0; | padding: 0; | ||
| + | color:rgb(255,230,153); | ||
| + | display: table; | ||
| + | margin:0 auto; | ||
} | } | ||
| Line 19: | Line 31: | ||
list-style: none; | list-style: none; | ||
float: left; | float: left; | ||
| − | padding-left: | + | padding-left: 20px; |
| − | padding-right: | + | padding-right: 20px; |
| − | line-height: | + | line-height: 60px; |
| + | height: 60px; | ||
text-align: center; | text-align: center; | ||
| − | font-size: | + | font-size: 18px; |
} | } | ||
| Line 39: | Line 52: | ||
ul.menu > li:hover > ul.subMenu { | ul.menu > li:hover > ul.subMenu { | ||
| − | + | -webkit-animation: fadeInDown forwards .4s cubic-bezier(.19, 1, .22, 1); | |
| − | + | -o-animation: fadeInDown forwards .4s cubic-bezier(.19, 1, .22, 1); | |
| − | + | -moz-animation: fadeInDown forwards .4s cubic-bezier(.19,1,.22,1); | |
| − | animation | + | animation: fadeInDown forwards .4s cubic-bezier(.19, 1, .22, 1); |
| + | -webkit-animation-delay: 0s; | ||
| + | -moz-animation-delay: 0s; | ||
| + | -o-animation-delay: 0s; | ||
animation-delay: 0s; | animation-delay: 0s; | ||
| − | display: -ms- | + | display:flex; |
| − | display: flex; | + | display:-moz-flex; |
| + | display:-ms-flex; | ||
| + | display:-o-flex; | ||
| + | display:-webkit-flex; | ||
| + | -webkit-flex-flow: column; | ||
flex-flow: column; | flex-flow: column; | ||
margin: 0; | margin: 0; | ||
| − | |||
| − | |||
| − | |||
| − | |||
} | } | ||
| Line 57: | Line 73: | ||
display: block; | display: block; | ||
position: relative; | position: relative; | ||
| − | background-color: # | + | background-color: #ed7d31d0; |
padding: 5px 20px; | padding: 5px 20px; | ||
margin: 0; | margin: 0; | ||
| + | line-height: 40px; | ||
} | } | ||
| Line 70: | Line 87: | ||
width: 100%; | width: 100%; | ||
height: 100%; | height: 100%; | ||
| − | |||
z-index: -1; | z-index: -1; | ||
| + | } | ||
| + | ul.menu > li > ul.subMenu{ | ||
| + | box-shadow: 0 4px 10px 0 rgba(9, 16, 43, .15); | ||
} | } | ||
ul.menu > li:after { | ul.menu > li:after { | ||
| + | -webkit-transition: all .8s cubic-bezier(.19, 1, .22, 1); | ||
| + | -moz-transition: all .8s cubic-bezier(.19, 1, .22, 1); | ||
| + | -ms-transition: all .8s cubic-bezier(.19, 1, .22, 1); | ||
| + | -o-transition: all .8s cubic-bezier(.19, 1, .22, 1); | ||
transition: all .8s cubic-bezier(.19, 1, .22, 1); | transition: all .8s cubic-bezier(.19, 1, .22, 1); | ||
content: ""; | content: ""; | ||
| Line 82: | Line 105: | ||
position: relative; | position: relative; | ||
bottom: 3px; | bottom: 3px; | ||
| − | background: | + | background: rgb(230,95,23); |
z-index: 1; | z-index: 1; | ||
} | } | ||
Latest revision as of 11:36, 10 October 2018
@keyframes fadeInDown {
0% {
opacity: 0;
-moz-opacity: 0;
transform: translate3d(0, -30px, 0);
-moz-transform: translate3d(0,-30px,0);
}
100% {
opacity: 1;
-moz-opacity: 1;
transform: none;
-moz-transform: none;
}
}
- dlutb #nav{
width:100%; height: 60px; margin:0; background-color:#ee9147;
}
- dlutb #nav ul.menu {
height: 60px; padding: 0; color:rgb(255,230,153); display: table; margin:0 auto;
}
ul.menu > li {
list-style: none; float: left; padding-left: 20px; padding-right: 20px; line-height: 60px; height: 60px; text-align: center; font-size: 18px;
}
ul.menu > li:hover {
color: inherit;
}
ul.menu > li > ul.subMenu {
padding: 0; display: none; position: absolute; z-index: 1; text-align: left;
}
ul.menu > li:hover > ul.subMenu {
-webkit-animation: fadeInDown forwards .4s cubic-bezier(.19, 1, .22, 1); -o-animation: fadeInDown forwards .4s cubic-bezier(.19, 1, .22, 1); -moz-animation: fadeInDown forwards .4s cubic-bezier(.19,1,.22,1); animation: fadeInDown forwards .4s cubic-bezier(.19, 1, .22, 1); -webkit-animation-delay: 0s; -moz-animation-delay: 0s; -o-animation-delay: 0s; animation-delay: 0s; display:flex; display:-moz-flex; display:-ms-flex; display:-o-flex; display:-webkit-flex; -webkit-flex-flow: column; flex-flow: column; margin: 0;
}
ul.menu > li > ul.subMenu > li {
display: block; position: relative; background-color: #ed7d31d0; padding: 5px 20px; margin: 0; line-height: 40px;
}
ul.menu > li > ul.subMenu > li:before {
position: absolute; display: block; content: ""; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;
} ul.menu > li > ul.subMenu{
box-shadow: 0 4px 10px 0 rgba(9, 16, 43, .15);
}
ul.menu > li:after {
-webkit-transition: all .8s cubic-bezier(.19, 1, .22, 1); -moz-transition: all .8s cubic-bezier(.19, 1, .22, 1); -ms-transition: all .8s cubic-bezier(.19, 1, .22, 1); -o-transition: all .8s cubic-bezier(.19, 1, .22, 1); transition: all .8s cubic-bezier(.19, 1, .22, 1); content: ""; display: block; width: 0; height: 3px; position: relative; bottom: 3px; background: rgb(230,95,23); z-index: 1;
}
ul.menu > li:hover:after {
width: 100%;
}