Difference between revisions of "Team:DUT China B/Team"

Line 1: Line 1:
 
{{DUT_China_B/test_style.css}}
 
{{DUT_China_B/test_style.css}}
−
<html lang="en" >
+
{{DUT_China_B/nav}}
−
 
+
<html lang="en">
−
<body>
+
 
<head>
 
<head>
−
<style>
+
<meta charset="UTF-8">
−
.block-grid {
+
<title>Document</title>
−
  margin-top: 3em;
+
−
  -webkit-column-count: 3;
+
−
          column-count: 3;
+
−
  -webkit-column-gap: 1em;
+
−
          column-gap: 1em;
+
−
  position: relative;
+
−
}
+
  
−
.block-panel {
+
<style>
−
  -webkit-column-break-inside: avoid;
+
−
          break-inside: avoid;
+
*{
−
  border-radius: 2px;
+
margin: 0;
−
  margin: 0 0 1em;
+
padding: 0;
−
  background-color: #69d7f8;
+
}
−
  overflow: hidden;
+
body{
−
  position: relative;
+
background-color: #eee;
−
  cursor: pointer;
+
}
−
  -webkit-transform: translateX(0);
+
.firstimg{
−
          transform: translateX(0);
+
width: 100%;
−
  display: inline-block;
+
}
−
}
+
.firstimg img{
−
.block-panel:hover p {
+
width: 100%
−
  -webkit-transform: translateY(0);
+
}
−
          transform: translateY(0);
+
#maintest{
−
  opacity: 1;
+
position: relative;
−
}
+
float: right;
−
.block-panel:hover h1 {
+
margin: 0px;
−
  bottom: calc(100% - 4em);
+
width: 76%;
−
}
+
padding: 3%;
 +
                font-family: 'Roboto' !important;
 +
/*border-left: 2px solid #ccc;*/
 +
/*clear: both;*/
 +
}
 +
      #maintest p{
 +
      font-size: 16px;
 +
      line-height:25.6px;
 +
      }
 +
/*侧边栏样式*/
 +
#sides{
 +
width: 22%;
 +
padding: 20% 0 10%;
 +
height:1580px;
 +
                background-color:#1C2B42;
 +
float: left;
 +
           
 +
 +
               
 +
}
 +
#sides a{
 +
text-decoration: none;
 +
        color:#FFFFFF !important;
 +
font-size: 60px !important；
 +
                positon:fixed;  
 +
                top:20px;
 +
}
 +
  
−
h1 {
+
</style>
−
  padding-left: 2rem;
+
−
  font-size: 2em;
+
−
  font-weight: 800;
+
−
  padding-bottom: 2em;
+
−
  color: white;
+
−
  width: 50%;
+
−
  position: absolute;
+
−
  text-transform: uppercase;
+
−
  bottom: -2em;
+
−
  transition: all .3s ease;
+
−
  z-index: 3;
+
−
}
+
−
 
+
−
p {
+
−
  padding: 8em 2em 2em 2em;
+
−
  position: relative;
+
−
  color: white;
+
−
  z-index: 2;
+
−
  -webkit-transform: translateY(100%);
+
−
          transform: translateY(100%);
+
−
  margin: 0;
+
−
  opacity: .5;
+
−
  transition: all .35s ease;
+
−
}
+
−
p::after {
+
−
  background: #13c1f0;
+
−
  bottom: 0;
+
−
  content: '';
+
−
  display: block;
+
−
  height: 100%;
+
−
  left: 0;
+
−
  position: absolute;
+
−
  right: 0;
+
−
  -webkit-transform: skewY(-7deg);
+
−
          transform: skewY(-7deg);
+
−
  -webkit-transform-origin: 100%;
+
−
          transform-origin: 100%;
+
−
  z-index: -1;
+
−
  top: 10em;
+
−
}
+
−
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
+
−
</style>
+
 
</head>
 
</head>
−
  <div class="container">
+
<body>
−
    <div class="block-grid">
+
<div class="firstimg">
−
       <div class="block-panel">
+
<img src="https://static.igem.org/mediawiki/2019/7/71/T--DUT_China_B--PART2.jpg" alt="parts">
−
         <div class="block-content">
+
</div>
−
          <h1>title 1</h1>
+
<div id="sides">
−
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci fuga ducimus nobis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci fuga ducimus nobis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci fuga
+
<ul id="menu">
−
            ducimus nobis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci fuga ducimus nobis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci fuga ducimus nobis.Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+
        <li>
−
            Adipisci fuga ducimus nobis.</p>
+
            <a ><font size="6" >Inspiration</font></a>
 +
        <div style="text-align: center; width: 100%; height:40px"></div>
 +
        </li>
 +
      <br>
 +
        <li>
 +
            <a><font size="6" >Difficulties</font></a>
 +
       <div style="text-align: center; width: 100%; height:40px"></div>
 +
      </li>
 +
      <br>
 +
         <li>
 +
            <a><font size="6">Solution</font></a>
 +
           
 +
        </li>
 +
      <br>
 +
     
 +
    </ul>
 +
</div>
 +
<div id="maintest">
 +
<div >
 +
              <h1 style="font-family: 'JosefinSans-Light' !important; ">Inspiration</h1>
 +
<p style="font-family: 'Roboto' !important;  ">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam sint magni ratione delectus, id laborum ex aut non eius, reiciendis quae beatae at fuga cum dolores dicta nihil! Culpa, totam!</p>
 +
</div>
 +
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam sint magni ratione delectus, id laborum ex aut non eius, reiciendis quae beatae at fuga cum dolores dicta nihil! Culpa, totam!</p>
 +
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam sint magni ratione delectus, id laborum ex aut non eius, reiciendis quae beatae at fuga cum dolores dicta nihil! Culpa, totam!</p>
 +
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam sint magni ration<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam sint magni ratione delectus, id laborum ex aut non eius, reiciendis quae beatae at fuga cum dolores dicta nihil! Culpa, totam!</p>
 +
                <div style="text-align: center; width: 100%; ">
 +
                <img alt="" src="https://static.igem.org/mediawiki/2019/e/ed/T--DUT_China_B--mirco_robot.jpg" style="display: inline-block;" />
 +
                </div>
 +
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam sint magni ratione delectus, id laborum ex aut non eius, reiciendis quae beatae at fuga cum dolores dicta nihil! Culpa, totam!</p>
 +
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam sint magni ratione delectus, id laborum ex aut non eius, reiciendis quae beatae at fuga cum dolores dicta nihil! Culpa, totam!</p>
 +
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam sint magni ratione delectus, id laborum ex aut non eius, reiciendis quae beatae at fuga cum dolores dicta nihil! Culpa, totam!e delectus, id laborum ex aut non eius, reiciendis quae beatae at fuga cum dolores dicta nihil! Culpa, totam!</p>
 +
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam sint magni ratione delectus, id laborum ex aut non eius, reiciendis quae beatae at fuga cum dolores dicta nihil! Culpa, totam!</p>
 +
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam sint magni ratione delectus, id laborum ex aut non eius, reiciendis quae beatae at fuga cum dolores dicta nihil! Culpa, totam!</p>
 +
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam sint magni ratione delectus, id laborum ex aut non eius, reiciendis quae beatae at fuga cum dolores dicta nihil! Culpa, totam!</p>
 +
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam sint magni ratione delectus, id laborum ex aut non eius, reiciendis quae beatae at fuga cum dolores dicta nihil! Culpa, totam!</p>
 +
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam sint magni ratione delectus, id laborum ex aut non eius, reiciendis quae beatae at fuga cum dolores dicta nihil! Culpa, totam!</p>
 +
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam sint magni ratione delectus, id laborum ex aut non eius, reiciendis quae beatae at fuga cum dolores dicta nihil! Culpa, totam!</p>
 +
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam sint magni ratione delectus, id laborum ex aut non eius, reiciendis quae beatae at fuga cum dolores dicta nihil! Culpa, totam!</p>
 +
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam sint magni ratione delectus, id laborum ex aut non eius, reiciendis quae beatae at fuga cum dolores dicta nihil! Culpa, totam!</p>
 +
 +
  
−
        </div>
+
</div>
−
      </div>
+
<script type="text/javascript">
−
      <div class="block-panel">
+
−
        <div class="block-content">
+
−
          <h1>title 2</h1>
+
−
<img src="https://static.igem.org/mediawiki/2019/c/ca/T--DUT_China_B--1.8.svg" >
+
−
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci fuga ducimus nobis.</p>
+
−
        </div>
+
−
      </div>
+
−
      <div class="block-panel">
+
−
        <div class="block-content">
+
−
          <h1>title 3</h1>
+
−
<img src="https://static.igem.org/mediawiki/2019/c/ca/T--DUT_China_B--1.8.svg" >
+
−
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci fuga ducimus nobis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci fuga ducimus nobis</p>
+
−
        </div>
+
−
      </div>
+
−
      <div class="block-panel">
+
−
        <div class="block-content">
+
−
          <h1>Advantage</h1><img src="https://static.igem.org/mediawiki/2019/c/ca/T--DUT_China_B--1.8.svg" >
+
  
−
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci fuga ducimus nobis</p>
+
window.onload=function(){
−
        </div>
+
  map_height=document.documentElement.clientHeight;//获取页面可见高度
−
      </div>
+
  alert(map_height);
−
      <div class="block-panel">
+
−
        <div class="block-content">
+
−
          <h1>title 5</h1>
+
−
<img src="https://static.igem.org/mediawiki/2019/c/ca/T--DUT_China_B--1.8.svg" >
+
−
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci fuga ducimus nobisorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci fuga ducimus nobis.</p>
+
−
        </div>
+
−
      </div>
+
−
      <div class="block-panel">
+
−
        <div class="block-content">
+
−
          <h1>title 6</h1>
+
−
<img src="https://static.igem.org/mediawiki/2019/c/ca/T--DUT_China_B--1.8.svg" >
+
−
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci fuga ducimus nobis.</p>
+
−
        </div>
+
−
      </div>
+
−
      <div class="block-panel">
+
−
        <div class="block-content">
+
−
          <h1>title 7</h1>
+
  
−
<img src="https://static.igem.org/mediawiki/2019/c/ca/T--DUT_China_B--1.8.svg" >
+
  document.getElementById("sides").style.height=map_height*0.88+"px";
−
          <p>
+
  }
−
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci fuga ducimus nobis.orem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci fuga ducimus nobisorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci fuga
+
  function getScrollTop(){
−
            ducimus nobis</p>
+
var scrollTop=0;
−
        </div>
+
if(document.documentElement&&document.documentElement.scrollTop){
−
      </div>
+
scrollTop=document.documentElement.scrollTop;
−
      <div class="block-panel">
+
}else if(document.body){
−
        <div class="block-content">
+
scrollTop=document.body.scrollTop;
−
          <h1>title 8</h1>
+
}
−
<img src="https://static.igem.org/mediawiki/2019/c/ca/T--DUT_China_B--1.8.svg" >
+
return scrollTop;
−
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci fuga ducimus nobis.</p>
+
}
−
        </div>
+
document.onscroll = function(){
−
      </div>
+
console.log(getScrollTop())
−
    </div>
+
if(getScrollTop()>map_height) {
−
 
+
document.getElementById("sides").style.position="fixed";
−
 
+
document.getElementById("sides").style.top="0";
−
   </div>
+
document.getElementById("sides").style.left="0";
−
 
+
}else{
−
  </div>
+
document.getElementById("sides").style.position = 'static';
 +
}    
 +
}
 +
</script>
  
 
</body>
 
</body>
−
 
 
</html>
 
</html>

Revision as of 23:52, 14 October 2019

Document
parts

Inspiration

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam sint magni ratione delectus, id laborum ex aut non eius, reiciendis quae beatae at fuga cum dolores dicta nihil! Culpa, totam!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam sint magni ratione delectus, id laborum ex aut non eius, reiciendis quae beatae at fuga cum dolores dicta nihil! Culpa, totam!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam sint magni ratione delectus, id laborum ex aut non eius, reiciendis quae beatae at fuga cum dolores dicta nihil! Culpa, totam!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam sint magni ration

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam sint magni ratione delectus, id laborum ex aut non eius, reiciendis quae beatae at fuga cum dolores dicta nihil! Culpa, totam!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam sint magni ratione delectus, id laborum ex aut non eius, reiciendis quae beatae at fuga cum dolores dicta nihil! Culpa, totam!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam sint magni ratione delectus, id laborum ex aut non eius, reiciendis quae beatae at fuga cum dolores dicta nihil! Culpa, totam!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam sint magni ratione delectus, id laborum ex aut non eius, reiciendis quae beatae at fuga cum dolores dicta nihil! Culpa, totam!e delectus, id laborum ex aut non eius, reiciendis quae beatae at fuga cum dolores dicta nihil! Culpa, totam!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam sint magni ratione delectus, id laborum ex aut non eius, reiciendis quae beatae at fuga cum dolores dicta nihil! Culpa, totam!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam sint magni ratione delectus, id laborum ex aut non eius, reiciendis quae beatae at fuga cum dolores dicta nihil! Culpa, totam!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam sint magni ratione delectus, id laborum ex aut non eius, reiciendis quae beatae at fuga cum dolores dicta nihil! Culpa, totam!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam sint magni ratione delectus, id laborum ex aut non eius, reiciendis quae beatae at fuga cum dolores dicta nihil! Culpa, totam!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam sint magni ratione delectus, id laborum ex aut non eius, reiciendis quae beatae at fuga cum dolores dicta nihil! Culpa, totam!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam sint magni ratione delectus, id laborum ex aut non eius, reiciendis quae beatae at fuga cum dolores dicta nihil! Culpa, totam!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam sint magni ratione delectus, id laborum ex aut non eius, reiciendis quae beatae at fuga cum dolores dicta nihil! Culpa, totam!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam sint magni ratione delectus, id laborum ex aut non eius, reiciendis quae beatae at fuga cum dolores dicta nihil! Culpa, totam!