Difference between revisions of "Team:XMU-China/css/part1listawards"

Revision as of 05:04, 21 December 2020 (view source) Coldplayer (Talk | contribs) ← Older edit		Latest revision as of 05:08, 21 December 2020 (view source) Coldplayer (Talk | contribs)
Line 26:		Line 26:
	background: url(https://static.igem.org/mediawiki/2020/1/1e/T--XMU-China--awardpage.jpeg) no-repeat;		background: url(https://static.igem.org/mediawiki/2020/1/1e/T--XMU-China--awardpage.jpeg) no-repeat;
	position: relative;		position: relative;
−	/* top: -1.0rem; */	+	top: -1.0rem;
	background-attachment: fixed;		background-attachment: fixed;
	background-position: center;		background-position: center;

---

Latest revision as of 05:08, 21 December 2020

.containor{

   width: 100%;
   height: 100vh;

}

@-webkit-keyframes bounce-up {

   25% {-webkit-transform: translateY(1.25rem);}
   50%, 100% {-webkit-transform: translateY(0);}
   75% {-webkit-transform: translateY(-1.25rem);}

} @keyframes bounce-up {

   25% {transform: translateY(1.25rem);}
   50%, 100% {transform: translateY(0);}
   75% {transform: translateY(-1.25rem);}

}

.containor .part1 .part1-img img{

   width: 100%;
   height: 73rem;

}

.containor .part1{

   width: 100%;
   height: 100vh;
   background: url() no-repeat;
   position: relative;
   top: -1.0rem;
   background-attachment: fixed;
   background-position: center;
   background-size:100% 100%;

}

/* 光标样式 */

1. plane{

   width: 4.375rem;
   height: 4.375rem;
   z-index: 999;

}

1. target{

   top: 31.25rem !important;

} /* 顶部导航栏二级菜单样式 */ .containor .part1 .wrap .team img{

   display: inline-block;
   width: 6.5rem;
   padding:0.5rem 0 0 1.25rem;

} .containor .part1 .wrap{

   z-index: 4;
   width: 100%;
   height: 3.4375rem;
   margin: 0 auto;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   position: fixed;
   background-color: #17731c;

} .containor .part1 .wrap .aaa a{

   text-decoration-line: none;
   color: #ffffff;

} /* 去掉默认a标签的下划线 */ .containor .part1 .wrap .aaa{

   width: 90rem;
   height: 3.4375rem;
   padding-top: 0.4375rem;

}

.menu {

   z-index:3;
   font-size: 12px;
   position: absolute;
   right: 0;
   width: 100%;
   height: 0;
   overflow: hidden;
   background-color: #17731c;
   transition: 1s;

}

.menu .menu-list {

   padding: 0;
   margin: 10px auto;
   list-style-type: none;
   width: 100px;
   position: relative;

}

.menu li {

   height: 26px;
   position: relative;

}

.menu li {

   float: left;
   margin: 10px 0 5px 0px;
   position: relative;

} .menu li a{

   color: #ffffff;
   text-align: center;

} .menu a, .menu a:visited {

   display: block;
   text-decoration: none;
   height: 25px;
   line-height: 25px;
   width: 130px;
   text-indent: 5px;
   border-bottom: 1px solid #17731c;

} .menu a:hover {

   background: #ffffff;
   border-radius: 0.9375rem;
   color: #17731c;

} .menu .menu-list ul {

   visibility: hidden;
   position: absolute;
   top: -1px;
   left: 140px;

} /* 次级菜单样式 一 */ .menu .menu-list .list-one{

   top: -5px;
   left: 140px;

} /* 次级菜单样式 二 */ .menu .menu-list .list-two{

   top: -80px;
   left: 140px;

} .menu .menu-list .list-two li:nth-child(4) {

   height: 50px;
   line-height: 15px;

} /* 次级菜单样式 三 */ .menu .menu-list .list-third{

   top: -100px;
   left: 140px;

} /* 次级菜单样式 四 */ .menu .menu-list .list-four{

   top: -120px;
   left: 140px;

} .menu ul ul li{

   width: 85px;
   height: 10px;
   line-height: 2px;
   padding: 0.7125rem 0;
   cursor: pointer;
   color: #ffffff;
   text-align: center;

} .menu ul ul li:hover{

   background: #ffffff;
   border-radius: 0.9375rem;
   color: #17731c;

} .menu ul li:hover ul, .menu ul a:hover ul {

   visibility: visible;

} .menu ul :hover ul ul {

   visibility: hidden;

} .menu ul :hover ul {

   visibility: visible;

}

/* 导航栏小于770px隐藏 */ @media screen and (min-width: 771px) {

   .aaa-list {
       display: none;
   }

} @media screen and (max-width: 770px) {

   .level{
       display: none;
   }
   .aaa-list {
       display: block;
   }

}

/* 响应式导航栏内容 */ .containor .part1 .wrap .aaa-list .list-nav{

   width: 80rem;

} .containor .part1 .wrap .aaa-list .list-nav .ball{

   width: 15px;
   height: 15px;
   display: inline-block;
   margin-right: 5px;
   border-radius: 50%;
   background-color: #ffffff;

} .containor .part1 .wrap .aaa-list .list-nav .ball:hover{

   background-color: #ffd205;

} .containor .part1 .wrap .aaa-list ul,li{

   list-style: none;

} .containor .part1 .wrap .aaa-list .list-nav>li{

   width: 12.86%;
   height: 2.5rem;
   text-align: center;
   background: rgba(255, 255, 225, 0);
   padding: 0.625rem 0;
   font-size: 1rem;
   transition: .4s;

} .containor .part1 .wrap .aaa-list .list-nav>li a{

   color: #ffffff;
   padding-top: 0;

} .containor .part1 .wrap .aaa-list .list-nav>li:hover{

   background: #17731c;
   border-radius: 0.9375rem;

} /* 设置鼠标滑过后的样式 */ .containor .part1 h .wrap .aaa-list .list-nav .two li{

   background-color: rgba(255, 255, 225, 0);

} .containor .part1 .wrap .aaa-list .list-nav .two{

   display: none;
   margin-top: 0.625rem;
   height: 0;
   margin-left: 1.5625rem;

} /* 先使二级菜单的内容隐藏 */

.containor .part1 .wrap .aaa-list .list-nav>li:hover .two{

   display: block;

} /* 鼠标滑过一级菜单后的显示二级菜单 */ .containor .part1 .wrap .aaa-list .list-nav .two li{

   padding: 0.7125rem 0;
   transition: .4s;
   cursor: pointer;
   color: #17731c;

} .containor .part1 .wrap .aaa-list .list-nav .two li:hover{

   background: #17731c;
   border-radius: 0.9375rem;
   color: #ffffff;

}

.containor .part1 .wrap .aaa .list-nav{

   width: 80rem;

} .containor .part1 .wrap .aaa .level .ball{

   width: 15px;
   height: 15px;
   display: inline-block;
   margin-right: 5px;
   border-radius: 50%;
   background-color: #ffffff;

} .containor .part1 .wrap .aaa .level .ball:hover{

   background-color: #ffd205;

} .containor .part1 .wrap .aaa ul,li{

   list-style: none;

} .containor .part1 .wrap .aaa .level>li{

   float: left;
   width: 15.86%;
   height: 2.5rem;
   text-align: center;
   background: rgba(255, 255, 225, 0);
   padding: 0.625rem 0;
   font-size: 1rem;
   transition: .4s;

} .containor .part1 .wrap .aaa .level>li a{

   color: #ffffff;
   padding-top: 0;

} .containor .part1 .wrap .aaa .level>li:hover{

   background: #17731c;
   border-radius: 0.9375rem;

} /* 设置鼠标滑过后的样式 */ .containor .part1 h .wrap .aaa .level .two li{

   background-color: rgba(255, 255, 225, 0);

} .containor .part1 .wrap .aaa .level .two{

   display: none;
   margin-top: 0.625rem;
   height: 0;
   margin-left: 1.5625rem;

} /* 先使二级菜单的内容隐藏 */

.containor .part1 .wrap .aaa .level>li:hover .two{

   display: block;

} /* 鼠标滑过一级菜单后的显示二级菜单 */ .containor .part1 .wrap .aaa .level .two li{

   padding: 0.7125rem 0;
   transition: .4s;
   cursor: pointer;
   color: #17731c;
   background-color:#eff8f1;
   border-radius: 5px;
   opacity:0.8;

} .containor .part1 .wrap .aaa .level .two li:hover{

   background: #17731c;
   border-radius: 0.9375rem;
   color: #ffffff;

}