Difference between revisions of "Team:USTC-Software"

Line 3: Line 3:
 
     <meta charset="utf-8">
 
     <meta charset="utf-8">
 
     <title>wikiHome</title>
 
     <title>wikiHome</title>
     <script src="https://code.jquery.com/jquery-3.2.1.min.js"><script>
+
      
    <link rel="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+
    <script src="https://2017.igem.org/wiki/index.php?title=Team:USTC-Software/js/jquery-mouse-wheel&action=raw&ctype=text/javascript" type="text/javascript">
+
    <script src="https://2017.igem.org/wiki/index.php?title=Team:USTC-Software/js/slider&action=raw&ctype=text/javascript" type="text/javascript">
+
 
+
 
<script>
 
<script>
 
var pageColors = ["#3498db", "white", "white", "white", "white"]
 
var pageColors = ["#3498db", "white", "white", "white", "white"]
Line 19: Line 14:
 
   })
 
   })
 
</script>
 
</script>
<style>
+
<!DOCTYPE html>
.fssopen, .fssopen body { /* class added to HTML element when full screen slider is open to hide potential body scrollbars */
+
<html lang="zh-CN">
    width: 100%;
+
<head>
     height: 100%;
+
     <meta charset="utf-8">
    top: 0;
+
     <title>wikiHome</title>
    left: 0;
+
      
    margin: 0;
+
<script src="https://code.jquery.com/jquery-3.2.1.min.js"><script>
    overflow: hidden;
+
<script src="https://2017.igem.org/wiki/index.php?title=Team:USTC-Software/js/jquery-mouse-wheel&action=raw&ctype=text/javascript" type="text/javascript">
}
+
<script src="https://2017.igem.org/wiki/index.php?title=Team:USTC-Software/js/slider&action=raw&ctype=text/javascript" type="text/javascript">
 
+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
.fullscreenslider {
+
<link rel="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    position: fixed;
+
<link rel="stylesheet" href="https://2017.igem.org/wiki/index.php?title=Team:USTC-Software/css/slider&action=raw&ctype=text/stylesheet">
    left: 0;
+
<link rel="stylesheet" href="https://2017.igem.org/wiki/index.php?title=Team:USTC-Software/css/navbar&action=raw&ctype=text/stylesheet">
    top: 0;
+
<link rel="stylesheet" href="https://2017.igem.org/wiki/index.php?title=Team:USTC-Software/css/index&action=raw&ctype=text/stylesheet">
    width: 100%;
+
<link rel="stylesheet" href="https://2017.igem.org/wiki/index.php?title=Team:USTC-Software/css/style&action=raw&ctype=text/stylesheet">
    height: 100%;
+
      
    z-index: 2000;
+
     font-size: 16px; /* base font size */
+
     visibility: visible;
+
    overflow: hidden;
+
}
+
 
+
.slidewrapper { /* wrapper DIV that surrounds the ARTICLE elements inside .dd_fullscreenslider */
+
    width: 100%;
+
    height: 100%;
+
    position: absolute;
+
    top: 0;
+
    left: 0;
+
    -webkit-transform: translate3d(0, 0, 0); /* to prevent flickering in iOS */
+
    -moz-transition: -moz-transform 0.5s; /* actual duration controlled by script */
+
    -webkit-transition: -webkit-transform 0.5s;
+
    transition: transform 0.5s;
+
}
+
 
+
.fssnav { /* UL list dynamically added by script for Slider navigation */
+
    list-style: none;
+
    margin: 0;
+
    position: absolute;
+
    top: 50%; /* vertically center menu */
+
    right: 80px; /* distance from right edge of screen */
+
    transform: translateY(-50%); /* vertically center menu */
+
}
+
 
+
.fssnav li {
+
    margin-bottom: 15px;
+
}
+
 
+
.fssnav li a {
+
    text-decoration: none;
+
    border: 2.5px solid #225378; /* border color of nav links */
+
    opacity: 0.8;
+
    border-radius: 50%;
+
    width: 16px; /* dimensions of nav links */
+
    height: 16px;
+
    display: block;
+
    position: relative;
+
    text-indent: -500px;
+
    outline: none;
+
    overflow: hidden;
+
}
+
 
+
.fssnav li a::after { /* create "fill" element inside A */
+
    content: "";
+
    position: absolute;
+
    width: 100%;
+
    height: 100%;
+
    top: 100%;
+
    left: 0;
+
    background: #225378; /* color of "fill" element */
+
    opacity: 0.6;
+
    transition: top 0.5s; /* transition for "fill up" effect */
+
}
+
 
+
.fssnav .selected a::after {
+
    top: 0; /* fill up selected A element from bottom to top */
+
}
+
 
+
.fullscreenslider .slide { /* CSS for each slide */
+
    width: 100%;
+
    height: 100%;
+
    display: block;
+
    font-family: 'Droid Sans', sans-serif; /* Use google font */
+
    font-size: 60px;
+
    line-height: 2em;
+
    color: #225378;
+
    overflow: hidden;
+
    -webkit-box-sizing: border-box; /* include padding/ border as part of declared menu width */
+
    -moz-box-sizing: border-box;
+
    z-index: 1000;
+
    background: white;
+
    -webkit-transform: translate3d(0, 0, 0); /* to prevent flickering in iOS */
+
}
+
 
+
.fullscreenslider .slide h2 { /* H2 Header inside each slide */
+
    font-size: 3em;
+
    margin: 0;
+
    line-height: 1.1em;
+
    letter-spacing: 3px;
+
}
+
 
+
.fullscreenslider .slide .scrollable { /* Assign this class to elements within a slide that should be scrollable */
+
    overflow: auto;
+
}
+
 
+
.fullscreenslider .slide {
+
    background: white;
+
}
+
 
+
.fullscreenslider .closex { /* Large x close button inside Slider */
+
    width: 50px;
+
    height: 50px;
+
    overflow: hidden;
+
    display: block;
+
    position: fixed;
+
    cursor: pointer;
+
    text-indent: -1000px;
+
    opacity: 0.8;
+
    z-index: 1001;
+
    top: 5px;
+
    right: 3px;
+
}
+
 
+
.fullscreenslider .closex::after { /* render large x inside close button */
+
    content: "";
+
    display: block;
+
    position: absolute;
+
    width: 100%;
+
    height: 6px;
+
    background: white; /* color of x button */
+
    top: 50%;
+
    margin-top: -3px;
+
    -ms-transform: rotate(-45deg);
+
    -webkit-transform: rotate(-45deg);
+
    transform: rotate(-45deg);
+
}
+
 
+
.fullscreenslider .closex::after { /* render large cross inside close button */
+
    -ms-transform: rotate(-135deg);
+
    -webkit-transform: rotate(-135deg);
+
    transform: rotate(-135deg);
+
}
+
 
+
.bio-text {
+
    margin-top: 30%;
+
    font-size:30px;
+
    line-height: 40px;
+
}
+
.navbar {
+
    -webkit-transition: ease-in-out 0.5s;
+
    -moz-transition: ease-in-out 0.5s;
+
    -ms-transition: ease-in-out 0.5s;
+
    -o-transition: ease-in-out 0.5s;
+
    transition: ease-in-out 0.5s;
+
    background: white;
+
    border-radius: 0;
+
    min-height:45px !important;
+
    height: 48px;
+
    font-size: 20px;
+
}
+
 
+
.navbar-brand {
+
    margin-left:2em;
+
    padding-top: 14px;
+
    padding-bottom: 10px;
+
    color: #555 !important;
+
}
+
 
+
ul.nav {
+
    margin-right:2em;
+
}
+
 
+
ul li {
+
    position: relative;
+
    list-style: none;
+
}
+
 
+
ul.nav li:hover > ul {
+
    visibility: visible;
+
    opacity: 1;
+
    margin-top: 0;
+
}
+
 
+
ul.nav ul {
+
    min-width: 120px;
+
    position: absolute;
+
    top: 100%;
+
    left: 0;
+
    visibility: hidden;
+
    opacity: 0;
+
    margin-top: -30px;
+
}
+
 
+
 
+
ul.nav > li > a {
+
    -webkit-transition: border-color ease-in-out 0.1s;
+
    -moz-transition: border-color ease-in-out 0.1s;
+
    -o-transition: border-color ease-in-out 0.1s;
+
    transition: border-color ease-in-out 0.1s;
+
    margin: 0px 12px 0px 12px;
+
    padding: 15px 0px 8px 0px;
+
    background: transparent !important;
+
    border-bottom: 4px solid transparent!important;
+
    color: #555 ;
+
}
+
 
+
ul.nav > li > a:hover {
+
    border-bottom: 4px solid #ef4c3c;
+
}
+
 
+
 
+
ul.menu {
+
    background: white;
+
    width: auto;
+
    padding-left: 20px;
+
    padding-right:20px;
+
    z-index: 3;
+
}
+
 
+
ul.menu li a, ul.menu li {
+
    padding-top: 4px !important;
+
    padding-bottom: 7px !important;
+
    color: #555;
+
    font-size: 18px;
+
    text-decoration: none;
+
    -webkit-transition: color ease-in-out 0.2s;
+
    -moz-transition: color ease-in-out 0.2s;
+
    -ms-transition: color ease-in-out 0.2s;
+
    -o-transition: color ease-in-out 0.2s;
+
    transition: color ease-in-out 0.2s;
+
}
+
 
+
 
+
.brand {
+
    margin-top: 5em;
+
}
+
ul.nav > li > a {
+
    color: #555;
+
}
+
ul.nav > li > a:hover {
+
    border-bottom: 4px solid #ef4c3c!important;
+
}
+
ul.nav ul.menu li a {
+
    color: #555;
+
}
+
ul.nav ul.menu li a:hover {
+
    color: #ef4c3c;
+
}
+
ul.nav ul.menu {
+
    background: #F3F7F2;
+
}
+
 
+
#menu {
+
    position: fixed;
+
    z-index: 3000;
+
    left: 7%;
+
    top:20%;
+
}
+
 
+
#menu ul li {
+
    height: 30px;
+
    line-height:30px;
+
    padding-left:10px;
+
    border-left: solid #c2c2c2 5px;
+
}
+
 
+
#menu ul li a{
+
    display: block;
+
    font-size: 15px;
+
    color: #c2c2c2;
+
    width: 120px;
+
    text-decoration: none;
+
    outline:none;
+
}
+
 
+
#menu ul li:hover {
+
    border-left: solid #ef4c3c 5px;
+
}
+
 
+
#menu .focused {
+
    color: #ef4c3c;
+
    font-size: 17px;
+
}
+
 
+
/*.scroll-img{
+
    position: fixed;
+
    z-index: 3000;
+
    width: 120px;
+
    left: 115px;
+
    bottom: 5%;
+
}*/
+
 
+
#content {
+
    margin-left: 24%;
+
    width: 900px;
+
    margin-top: 100px;
+
    margin-bottom: 100px;
+
}
+
 
+
#content .item {
+
    margin-top: 100px;
+
    padding: 20px;
+
    font-size: 16px;
+
    overflow: hidden;
+
}
+
 
+
#content .item h2 {
+
    font-size: 36px;
+
    color: #555;
+
}
+
 
+
.item ul li {
+
    float:left;
+
    margin-right:10px;
+
    margin-bottom:10px;
+
    display:inline;
+
    overflow:hidden;
+
    position:relative;
+
}
+
 
+
.item ul li .photo {
+
    width:200px;
+
    height:200px;
+
    overflow:hidden;
+
    background-color: darkgray;
+
}
+
 
+
.item .rsp {
+
    width:200px;
+
    height:200px;
+
    overflow:hidden;
+
    position: absolute;
+
    background:#000;
+
    top:0;
+
    left:0;
+
}
+
 
+
.item .text {
+
    position:absolute;
+
    width:200px;
+
    height:200px;
+
    left:-200px;
+
    top:0;
+
    overflow:hidden;
+
}
+
 
+
.item .text a {
+
    text-decoration:none
+
}
+
 
+
.item .text p {
+
    color:#FFFFFF;
+
    font-size:18px;
+
}
+
 
+
.item .box {
+
    padding:10px 0px 10px 0px;
+
    border-top: solid;
+
    border-left: solid;
+
    border-width:1px;
+
    border-color: #f1f1f1;
+
    box-shadow: 2px 2px 1px #e1e1e1;
+
    margin-left: 20px;
+
}
+
 
+
.item .img {
+
    width: 160px;
+
    height: 160px;
+
    border-radius: 160px;
+
    text-align: center;
+
    border: solid;
+
    border-width:1px;"
+
}
+
 
+
.item h3 {
+
    text-align: center;
+
    border-top: solid;
+
    font-size:15px;
+
    border-color: #e1e1e1;
+
    border-width:1px;
+
    padding:8px 0 8px;
+
    margin: 0px 0 0px;
+
}
+
 
+
.item h5 {
+
    height: 50px;
+
    overflow: hidden;
+
    text-align: center;
+
    border-top: solid;
+
    border-color: #e1e1e1;
+
    border-width:1px;
+
    padding:22px 0 5px;
+
    margin: 0px 0 0px;
+
}
+
 
+
#theme-graph svg {
+
    filter: brightness(90%);
+
}
+
 
+
section,body {
+
    min-width: 1020px;
+
}
+
ul.page-1 > li > a {
+
     color: #ECF0F1;
+
}
+
ul.page-1 > li > a:hover {
+
    border-bottom: 4px solid #ECF0F1!important;
+
}
+
ul.page-1 ul.menu li a {
+
    color: #ECF0F1;
+
}
+
ul.page-1 ul.menu li a:hover {
+
    color: #aaf;
+
}
+
ul.page-1 ul.menu {
+
    background: #2980b8;
+
}
+
 
+
ul.page-2 > li > a {
+
    color: #555;
+
}
+
ul.page-2 > li > a:hover {
+
    border-bottom: 4px solid #ef4c3c!important;
+
}
+
ul.page-2 ul.menu li a {
+
    color: #555;
+
}
+
ul.page-2 ul.menu li a:hover {
+
    color: #ef4c3c;
+
}
+
ul.page-2 ul.menu {
+
    background: #ECF0F1;
+
}
+
 
+
ul.page-3 > li > a {
+
    color: #555;
+
}
+
ul.page-3 > li > a:hover {
+
    border-bottom: 4px solid #ef4c3c!important;
+
}
+
ul.page-3 ul.menu li a {
+
    color: #555;
+
}
+
ul.page-3 ul.menu li a:hover {
+
    color: #ef4c3c;
+
}
+
ul.page-3 ul.menu {
+
    background: #ECF0F1;
+
}
+
 
+
ul.page-4 > li > a {
+
    color: #555;
+
}
+
ul.page-4 > li > a:hover {
+
    border-bottom: 4px solid #ef4c3c!important;
+
}
+
ul.page-4 ul.menu li a {
+
    color: #555;
+
}
+
ul.page-4 ul.menu li a:hover {
+
    color: #ef4c3c;
+
}
+
ul.page-4 ul.menu {
+
    background: #ECF0F1;
+
}
+
 
+
ul.page-5 > li > a {
+
    color: #555;
+
}
+
ul.page-5 > li > a:hover {
+
    border-bottom: 4px solid #ef4c3c!important;
+
}
+
ul.page-5 ul.menu li a {
+
    color: #555;
+
}
+
ul.page-5 ul.menu li a:hover {
+
    color: #ef4c3c;
+
}
+
ul.page-5 ul.menu {
+
    background: #ECF0F1;
+
}
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
  
</style>
 
 
 
</head>
 
</head>
 
<body>
 
<body>
Line 664: Line 186:
  
 
<script>
 
<script>
+
  var fss
 +
  $(function () {
 +
    fss = new ddfullscreenslider({
 +
      sliderid: 'dowebok'
 +
    })
 +
  })
 
</script>
 
</script>
  

Revision as of 12:33, 23 October 2017

wikiHome wikiHome

交换箭头
交换箭头
资源 2
资源 2
对话框
对话框
齿轮_2
齿轮_2
齿轮_2

forums

share your experience

search biobricks

a lot more plugins