Difference between revisions of "Team:Jilin China"

Line 214: Line 214:
 
  */
 
  */
  
#bg_menu {
 
margin-top: 18px;
 
display: block;
 
background-color: rgba(65,4,1,1.00);
 
position: fixed;
 
text-align: center;
 
bottom: 85px;
 
right: 10%;
 
z-index: 999;
 
line-height: 57px;
 
width: 60px;
 
height: 60px;
 
}
 
#bg_menu #menu_0 {
 
margin-top: 18px;
 
display: none;
 
/* [disabled]background-color: gold; */
 
position: absolute;
 
text-align: center;
 
line-height: 50px;
 
z-index: 999;
 
height: 500px;
 
width: 700px;
 
bottom: 0px;
 
right: 0px;
 
transform-origin: 100% 100% 0;
 
transform: scale(0,0);
 
transition: .3s ease;
 
}
 
#bg_menu  #menu_1  {
 
width: 200px;
 
position: absolute;
 
left: 0px;
 
bottom: 0px;
 
background-color: rgba(65,4,3,1.00);
 
height: 100%;
 
display: block;
 
transform: translate(200px,0px);
 
transition: .5s ease;
 
}
 
#bg_menu  #menu_2  {
 
width: 500px;
 
position: absolute;
 
bottom: 0px;
 
background-color: rgba(205,205,205,1.00);
 
height: 100%;
 
right: 0px;
 
}
 
#menu_0 #menu_2 #menu_2_title_0 {
 
width: 500px;
 
position: relative;
 
background-color: rgba(107,47,255,1.00);
 
height: 50px;
 
}
 
#menu_2 #menu_2_title_0 #m_2_t_0_0 {
 
width: 50%;
 
position: absolute;
 
left: 0px;
 
height: 100%;
 
background-color: rgba(255,255,255,1.00);
 
top: 0px;
 
}
 
.menu_inner_block {
 
cursor: pointer;
 
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
 
color: rgba(255,134,0,1.00);
 
}
 
 
#menu_2 #menu_2_title_0 #m_2_t_0_1 {
 
width: 50%;
 
position: absolute;
 
height: 100%;
 
background-color: rgba(65,4,3,1.00);
 
right: 0px;
 
top: 0px;
 
}
 
 
#menu_0 #menu_2 #menu_2_block_0 {
 
background-color: hsla(44,100%,80%,1.00);
 
width: 500px;
 
position: relative;
 
height: 210px;
 
}
 
.menulink {
 
color: hsla(1,94%,13%,1.00);
 
font-size: 21px;
 
border-width: thin;
 
border-style: solid none none;
 
}
 
 
 
#menu_0 #menu_2 #menu_2_title_1 {
 
width: 500px;
 
position: relative;
 
background-color: rgba(255,255,255,1.00);
 
height: 50px;
 
font-size: 18px;
 
}
 
 
#menu_0 #menu_2 #menu_2_block_1 {
 
background-color: rgba(255,228,153,1.00);
 
width: 500px;
 
position: relative;
 
height: 130px;
 
}
 
#menu_0 #menu_2 #menu_2_title_2 {
 
width: 500px;
 
position: relative;
 
background-color: rgba(65,187,147,1.00);
 
height: 60px;
 
}
 
#menu_2 #menu_2_title_2 #m_2_t_2_0 {
 
width: 440px;
 
height: 60px;
 
background-color: rgba(255,255,255,1.00);
 
position: absolute;
 
bottom: 0px;
 
font-size: 30px;
 
line-height: 60px;
 
left: 0px;
 
}
 
#menu_2 #menu_2_title_2 #m_2_t_2_1 {
 
width: 60px;
 
height: 60px;
 
background-color: rgba(0,0,0,1.00);
 
position: absolute;
 
right: 0px;
 
bottom: 0px;
 
font-size: 30px;
 
line-height: 60px;
 
}
 
 
#m_2_t_2_1 span  {
 
width: 60px;
 
height: 60px;
 
display: block;
 
}
 
 
 
 
 
 
 
 
 
 
/**
 
*第一部分
 
*/
 
#first_s{
 
padding-left: 0;
 
padding-right: 0;
 
background-color: #fff;
 
margin: 0;
 
height: 0px;
 
z-index: 999;
 
position: relative;
 
color: rgba(255,255,255,1.00);
 
width: 100%;
 
}
 
 
 
#first_s #nav_bg{
 
height: 80px;
 
color: rgba(255,255,255,1.00);
 
transition: 0.5s;
 
}
 
#first_s .container {
 
height: 80px;
 
color: rgba(255,255,255,1.00);
 
}
 
#first_s .container .navbar-header {
 
  height: 80px;
 
  float: left;
 
}
 
#first_s .container .navbar-brand {
 
font-size: 24px;
 
line-height: 72px;
 
color: rgba(65,4,3,1.00);
 
}
 
#first_s .container ul {
 
padding: 0 0;
 
margin: 0 0;
 
height: 80px;
 
float: right;
 
font-size: 18px;
 
color: #FFFFFF;
 
}
 
#first_s .container a {
 
padding: 0 0;
 
margin: 0 0;
 
height: 80px;
 
font-size: 18px;
 
color: #410403;
 
font-weight: bold;
 
}
 
 
 
#first_s .container  li
 
{
 
width: 116px;
 
list-style: none;
 
height: 80px;
 
line-height: 80px;
 
float: left;
 
color: #CC992C;
 
text-align: center;
 
position: relative;
 
}
 
#first_s .container  li ul a
 
{
 
color: #CC992C;
 
        font-weight: normal;
 
 
}
 
 
 
 
#first_s .container  li ul
 
{
 
list-style: none;
 
padding-left: 0;
 
text-align: center;
 
position: absolute;
 
display: none;
 
height: auto;
 
        color: #CC992C;
 
}
 
 
/*#first_s .container  li:hover > ul
 
{
 
display: block;
 
}*/
 
 
 
#first_s .container  li ul li
 
{
 
height: 45px;
 
padding-top: 0px;
 
padding-bottom: 0px;
 
line-height: 53px;
 
position: absolute;
 
background-color: rgba(0,0,0,1.00);
 
top: 0px;
 
opacity: 0;
 
        color: #CC992C;
 
}
 
 
#first_s .container  li ul li ul
 
{ width: 100%;
 
  position: absolute;
 
  left:100%;
 
  top:0;
 
  display: none;
 
}
 
#first_s .container  li ul li li
 
{
 
height: 45px;
 
line-height: 53px;
 
padding-top: 0px;
 
padding-bottom: 0px;
 
position: absolute;
 
background-color: rgba(0,0,0,1.00);
 
opacity: 0;
 
 
}
 
/*
 
菜单按钮部分
 
*/
 
#second_s{
 
height: 700px;
 
background-position: center center;
 
position: relative;
 
background-image: url(https://static.igem.org/mediawiki/2019/c/c1/T--Jilin_China--Home--Banner--0.png);
 
background-size: cover;
 
background-repeat: no-repeat;
 
}
 
 
#third_s {
 
height: 824px;
 
position: relative;
 
padding: 00;
 
background-color: rgba(255,255,255,1.00);
 
}
 
#third_s #third_1 {
 
height: 810px;
 
background-color: rgba(255,255,255,1.00);
 
padding: 00;
 
position: relative;
 
}
 
#third_s #third_1 #third_1_1 {
 
background-color: rgba(253,234,201,1.00);
 
position: absolute;
 
margin: 0 0;
 
width: 75%;
 
top: -37px;
 
}
 
#zhuan {
 
margin-top: 18px;
 
display: none;
 
width: 10%;
 
height: 60px;
 
background-color: gold;
 
position: fixed;
 
max-width: 60px;
 
max-height: 60px;
 
min-width: 30px;
 
min-height: 30px;
 
text-align: center;
 
line-height: 50px;
 
bottom: 45px;
 
right: 215px;
 
}
 
 
 
</style>
 
 
 
<div id="bg_menu" class="menu_inner_block">menu
 
  <div class="menu_inner_block" id="menu_0">
 
  <div class="menu_inner_block" id="menu_1">
 
  This piece is for the wonderful moments.
 
  </div>
 
  <div class="menu_inner_block" id="menu_2">
 
  <div class="menu_inner_block" id="menu_2_title_0">
 
  <div class="menu_inner_block" id="m_2_t_0_0">Jilin_China</div> 
 
  <div class="menu_inner_block" id="m_2_t_0_1">Main menu</div> 
 
  </div>
 
  <div class="menu_inner_block" id="menu_2_block_0">
 
<div class="menulink"><a href="https://2019.igem.org/Team:Jilin_China/Description">Description</a></div> 
 
<div class="menulink">More are developing!</div>
 
<div class="menulink">More are developing!</div>
 
  </div>
 
  <div class="menu_inner_block" id="menu_2_title_1">Maybe you are srceahing for this!</div>
 
  <div class="menu_inner_block" id="menu_2_block_1"></div>
 
  <div class="menu_inner_block" id="menu_2_title_2">
 
  <div class="menu_inner_block" id="m_2_t_2_0"></div>
 
  <div class="menu_inner_block" id="m_2_t_2_1"><span id="menu_cha">×</span></div>
 
 
 
 
 
  </div>
 
 
 
  </div>
 
</div>
 
</div>
 
 
 
 
  
Line 614: Line 268:
 
<script src="https://2019.igem.org/wiki/index.php?title=Template:Jilin_China/tool.js&action=raw&ctype=text/javascript"></script>
 
<script src="https://2019.igem.org/wiki/index.php?title=Template:Jilin_China/tool.js&action=raw&ctype=text/javascript"></script>
 
<script src="https://2019.igem.org/wiki/index.php?title=Template:Jilin_China/renderTP.js&action=raw&ctype=text/javascript"></script>
 
<script src="https://2019.igem.org/wiki/index.php?title=Template:Jilin_China/renderTP.js&action=raw&ctype=text/javascript"></script>
<script>
 
if(document.body.clientWidth<=991){
 
$$("third_1_1").style.width=100+"%";
 
$$("third_1_1").style.left=0+"px";
 
}
 
if(document.body.clientWidth>991){
 
$$("third_1_1").style.width=75+"%";
 
$$("third_1_1").style.left=0+"px";
 
}
 
  
</script>
 
  
  
 
</html>
 
</html>

Revision as of 03:59, 5 October 2019