Team:BUCT-China

From 2014.igem.org

(Difference between revisions)
Line 1: Line 1:
 +
<!DOCTYPE HTML>
<html>
<html>
<head>
<head>
-
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css">
+
<title>BUCT-CHINA</title>
 +
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
 +
<!--<link href='http://fonts.googleapis.com/css?family=Noto+Sans:400,700' rel='stylesheet' type='text/css'>
 +
--><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 +
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 +
<script type="text/javascript" src="js/jquery.min.js"></script>
 +
<!---strat-slider---->
 +
    <link rel="stylesheet" type="text/css" href="css/slider.css" />
 +
<script type="text/javascript" src="js/modernizr.custom.28468.js"></script>
 +
<script type="text/javascript" src="js/jquery.cslider.js"></script>
 +
<script type="text/javascript">
 +
$(function() {
 +
 +
$('#da-slider').cslider({
 +
autoplay : true,
 +
bgincrement : 450
 +
});
 +
 +
});
 +
</script>
 +
<!---//strat-slider---->
 +
<!-- scroll -->
 +
<script type="text/javascript">
 +
$(document).ready(function() {
 +
 +
var defaults = {
 +
  containerID: 'toTop', // fading element id
 +
containerHoverID: 'toTopHover', // fading element hover id
 +
scrollSpeed: 1200,
 +
easingType: 'linear'
 +
};
 +
 +
 +
$().UItoTop({ easingType: 'easeOutQuart' });
 +
 +
});
 +
</script>
 +
<!-- //scroll -->
 +
<!-- start portfolios -->
 +
<link href="css/portfolio.css" rel="stylesheet" type="text/css" media="all" />
 +
<script type="text/javascript" src="js/fliplightbox.min.js"></script>
 +
<script type="text/javascript">
 +
$('body').flipLightBox()
 +
</script>
 +
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
 +
<script type="text/javascript" src="js/jquery.mixitup.min.js"></script>
 +
<script type="text/javascript">
 +
$(function() {
-
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
+
var filterList = {
-
<script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
+
 
-
<script>
+
init : function() {
-
$(document).ready(function(){
+
 
-
var win_width = $(window).width()/2 - $("#address").width()/2;
+
// MixItUp plugin
-
$("#address").css("left",win_width);
+
// http://mixitup.io
 +
$('#portfoliolist').mixitup({
 +
targetSelector : '.portfolio',
 +
filterSelector : '.filter',
 +
effects : ['fade'],
 +
easing : 'snap',
 +
// call the hover effect
 +
onMixEnd : filterList.hoverEffect()
 +
});
 +
 
 +
},
 +
 
 +
hoverEffect : function() {
 +
 
 +
// Simple parallax effect
 +
$('#portfoliolist .portfolio').hover(function() {
 +
$(this).find('.label').stop().animate({
 +
bottom : 0
 +
}, 200, 'easeOutQuad');
 +
$(this).find('img').stop().animate({
 +
top : -40
 +
}, 500, 'easeOutQuad');
 +
}, function() {
 +
$(this).find('.label').stop().animate({
 +
bottom : -40
 +
}, 200, 'easeInQuad');
 +
$(this).find('img').stop().animate({
 +
top : 0
 +
}, 300, 'easeOutQuad');
 +
});
 +
 
 +
}
 +
};
 +
 
 +
// Run the show!
 +
filterList.init();
 +
 
 +
});
 +
</script>
 +
<!-- popup -->
 +
<link rel="stylesheet" type="text/css" href="css/magnific-popup1.css">
 +
<link rel="stylesheet" type="text/css" href="css/magnific-popup.css">
 +
<script src="js/jquery.magnific-popup.js" type="text/javascript"></script>
 +
<script>
 +
$(document).ready(function() {
 +
$('.popup-with-zoom-anim').magnificPopup({
 +
type: 'inline',
 +
fixedContentPos: false,
 +
fixedBgPos: true,
 +
overflowY: 'auto',
 +
closeBtnInside: true,
 +
preloader: false,
 +
midClick: true,
 +
removalDelay: 300,
 +
mainClass: 'my-mfp-zoom-in'
 +
});
 +
});
 +
</script>
 +
<script type="text/javascript" src="js/jquery.lightbox.js"></script>
 +
<link rel="stylesheet" type="text/css" href="css/lightbox.css" media="screen" />
 +
  <script type="text/javascript">
 +
    $(function() {
 +
        $('#portfoliolist a').lightBox();
 +
    });
 +
  </script>
 +
<!-- nav --> 
 +
<script type="text/javascript" src="js/jquery.smint.js"></script>
 +
<script type="text/javascript">
 +
$(document).ready( function() {
 +
    $('.subMenu').smint({
 +
    'scrollSpeed' : 1000
 +
    });
});
});
</script>
</script>
 +
<script>
 +
window.addEventListener("load",function() {
 +
  setTimeout(function(){
 +
    window.scrollTo(0, 1);
 +
  }, 0);
 +
});</script>
</head>
</head>
-
<body >
+
<body>
-
<center><img src="https://static.igem.org/mediawiki/2014/5/5f/BUCT_Logo.jpg"></center>
+
<!-- start slider -->
-
<div class="well center">
+
<div class="slider_bg s7">
-
 
+
<!-- start main -->
-
  <div class="btn-group">
+
<!---start-da-slider----->
-
    <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
+
<div id="da-slider" class="da-slider">
-
        PROJECT<span class="caret"></span>
+
<div class="da-slide">
-
      </button>
+
  <!--<h2 class="title">PSD CONCEPT</h2>
-
    <ul class="dropdown-menu" role="menu">
+
                      <h3 class="title">CREATIVE PORTFOLIO</h3>
-
      <li><a href="#">Action</a></li>
+
                      <p class="description">WEB DESIGN . DEVELOPMENT . MARKETING</p>  -->
-
      <li><a href="#">Another action</a></li>
+
                      <h2 class="title" style=" margin-top:-50px; margin-left:300px; width:500px; height:400px;"><img src="images/port.jpg"></h2>
-
      <li><a href="#">Something else here</a></li>
+
                      <p class="description" style="margin-top:150px;">这是第一页</p>
-
      <li class="divider"></li>
+
</div>
-
      <li><a href="#">Separated link</a></li>
+
<div class="da-slide">
-
    </ul>
+
<!--<h2 class="title">PSD CONCEPT</h2>
 +
                    <h3 class="title">CREATIVE PORTFOLIO</h3>
 +
                    <p class="description">WEB DESIGN . DEVELOPMENT . MARKETING</p> -->
 +
                    <h2 class="title" style=" margin-top:-50px; margin-left:300px; width:500px; height:400px;"><img src="images/port.jpg"></h2>
 +
                    <p class="description" style="margin-top:150px;">这是第二页</p>
 +
</div>
 +
<div class="da-slide">
 +
<!--<h2 class="title">PSD CONCEPT</h2>
 +
                    <h3 class="title">CREATIVE PORTFOLIO</h3>
 +
                    <p class="description">WEB DESIGN . DEVELOPMENT . MARKETING</p> -->
 +
                    <h2 class="title" style=" margin-top:-50px; margin-left:300px; width:500px; height:400px;"><img src="images/port.jpg"></h2>
 +
                    <p class="description" style="margin-top:150px;">这是第三页</p>
 +
</div>
 +
<div class="da-slide">
 +
<!--<h2 class="title">PSD CONCEPT</h2>
 +
                    <h3 class="title">CREATIVE PORTFOLIO</h3>
 +
                    <p class="description">WEB DESIGN . DEVELOPMENT . MARKETING</p>-->
 +
                  <h2 class="title" style=" margin-top:-50px; margin-left:300px; width:500px; height:400px;"><img src="images/port.jpg"></h2>
 +
                  <p class="description" style="margin-top:150px;">这是第四页</p>
 +
</div>
 +
<div class="da-slide" >
 +
 +
                    <h2 class="title" style=" margin-top:-50px; margin-left:300px; width:500px; height:400px;"><img src="images/blog4.jpg"></h2>
 +
                    <p class="description" style="margin-top:150px;">哎呦,只有五页哦!...鼠标点一下就不转了是怎么回事!</p>
 +
                   
 +
</div>
 +
</div>
 +
<!---//End-da-slider----->
 +
</div>
 +
<!-- <a href="#services" class="button scroll"><img src="images/arrow.png"></a>
 +
  <p class="description" style="margin-top:250px;margin-left:300px">哎呦,有个小东西不见了!</p>-->
 +
<!-- start header -->
 +
  <div class="header">
 +
<div class="logo">
 +
<a href="#s7" class="scroll"><img src="images/wiki.png"></a>
 +
</div>
 +
<!-- start top-nav-->
 +
<div class="h_right">
 +
<div class="subMenu" >
 +
<div class="wrap">
 +
<div class="inner">
 +
<a href="#" id="sTop" class="subNavBtn">PROJECT</a>  
 +
<a href="#" id="s1" class="subNavBtn">PARTS</a>
 +
<a href="#" id="s2" class="subNavBtn">MODELING</a>
 +
<a href="#" id="s3" class="subNavBtn">SAFETY</a>
 +
<a href="#" id="s4" class="subNavBtn">TEAM</a>
 +
<a href="#" id="s5" class="subNavBtn end">HP</a>
 +
<a href="sponsor.html" class="subNavBtn end">SPONSOR</a>
 +
               
  </div>
  </div>
-
  <div class="btn-group">
+
  <!-- /.navbar-collapse -->
-
    <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
+
            <a id="s7" class="right-msg subNavBtn msg-icon"href="#">
-
        JUDGING <span class="caret"></span>
+
            <img src="images/wiki.png">
-
      </button>
+
            <!--<span style="background-image:url(images/wiki.png)">igem</span></a>-->
-
    <ul class="dropdown-menu" role="menu">
+
              <div class="clearfix"> </div>
-
      <li><a href="#">Action</a></li>
+
    </div>
-
      <li><a href="#">Another action</a></li>
+
  </div>
-
      <li><a href="#">Something else here</a></li>
+
<!-- start smart_nav * -->
-
      <li class="divider"></li>
+
<nav class="nav">
-
      <li><a href="#">Separated link</a></li>
+
            <ul class="nav-list">
-
    </ul>
+
                <li class="nav-item"><a href="#services">Services</a></li>
-
  </div>
+
                <li class="nav-item"><a href="#work" class="scroll">Works</a></li>
-
<div class="btn-group">
+
              <li class="nav-item"><a href="#about" class="scroll">About us</a></li>
-
  <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
+
                    <li class="nav-item"><a href="#blog" class="scroll">Blog</a></li>
-
      SAFETY <span class="caret"></span>
+
                  <li class="nav-item"><a href="#studio" class="scroll">Studio</a></li>
-
    </button>
+
                <li class="nav-item"><a href="#pricing" class="scroll">Pricing</a></li>                          
-
  <ul class="dropdown-menu" role="menu">
+
                <!--<li class="nav-item"><a href="sponsor.html" target="_blank" >SPONSOR</a></li>-->
-
    <li><a href="#">Action</a></li>
+
                  <div class="clear"></div>
-
    <li><a href="#">Another action</a></li>
+
            </ul>
-
    <li><a href="#">Something else here</a></li>
+
    </nav>
-
    <li class="divider"></li>
+
          <script type="text/javascript" src="js/responsive.menu.js"></script>
-
    <li><a href="#">Separated link</a></li>
+
<!-- end smart_nav * -->
-
  </ul>
+
</div>
 +
<div class="clear"></div>
 +
  </div>
 +
<!---//End-header--->
 +
<!--- services --->
 +
    <div class="services sTop" id="services">
 +
  <div class="wrap">
 +
  <h3>PROJECT</h3>
 +
  <p>题目</p>
 +
<div class="col_1_of_3 span_1_of_3" style="margin-left:10px;">
 +
<img src="images/service1.png" alt="">
 +
<h4><a href="#">OVERVIEW</a></h4>
 +
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
 +
<p><a href="#about">MORE</a></p>
</div>
</div>
-
<div class="btn-group">
+
<div class="col_1_of_3 span_1_of_3">
-
  <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
+
<img src="images/service2.png" alt="">
-
      NOTEBOOK <span class="caret"></span>
+
<h4><a href="#">BIOSENSORS</a></h4>
-
    </button>
+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-
  <ul class="dropdown-menu" role="menu">
+
<p><a href="#">MORE</a></p>
-
    <li><a href="#">Action</a></li>
+
-
    <li><a href="#">Another action</a></li>
+
-
    <li><a href="#">Something else here</a></li>
+
-
    <li class="divider"></li>
+
-
    <li><a href="#">Separated link</a></li>
+
-
  </ul>
+
</div>
</div>
-
<div class="btn-group">
+
               
-
  <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
+
                <div class="col_1_of_3 span_1_of_3">
-
      TEAM <span class="caret"></span>
+
<img src="images/service2.png" alt="">
-
    </button>
+
<h4><a href="#">DEVICE</a></h4>
-
  <ul class="dropdown-menu" role="menu">
+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-
    <li><a href="#">Action</a></li>
+
<p><a href="#">MORE</a></p>
-
    <li><a href="#">Another action</a></li>
+
-
    <li><a href="#">Something else here</a></li>
+
-
    <li class="divider"></li>
+
-
    <li><a href="#">Separated link</a></li>
+
-
  </ul>
+
</div>
</div>
 +
               
 +
<div class="col_1_of_3 span_1_of_3">
 +
<img src="images/service3.png" alt="">
 +
<h4>前景及意义</h4>
 +
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
 +
<p><a href="#">MORE</a></p>
 +
</div>
 +
<div class="clear"></div>
 +
    </div>
 +
  </div>
 +
     
 +
        <div>
 +
        <div class="pricing s5" id="pricing">
 +
<div class="wrap">
 +
<div class="pricing-head">
 +
    <a class="expand-btn">
 +
<h3>parts</h3></a>
 +
<div style="margin-top:20px; width:100%; height:100px; text-align:center; color: #0FC;">
 +
                            <!--<a class="wedobtn" href="#">先空着吧!或者写每月进度.</a> -->
 +
                            </div>
 +
</div>
 +
  <div class="pricing-grids">
 +
<div class="pricing-grid1">
 +
<h3><a ><span>quorum sensing system</span></a></h3>
 +
<div>
 +
  <P>Our part is constituted by Plac、luxR、Pluxr、luxr. LuxI can result in the production of AHL—a kind of auto-inducer which can ...</P>
 +
  </div>
 +
 +
<div class="cart1">
 +
<div class="span3"><a class="popup-with-zoom-anim" href="#small-dialog">
 +
<j>MORE</j></a>
 +
</div>
 +
</div>
 +
</div>
 +
<div class="pricing-grid2">
 +
  <h3><a><br>
 +
    Fast-type merR biosensor</a></h3>
 +
<!--<div class="price-value">
 +
<a href="#">2简介</a>
 +
  </div>-->
 +
<div>
 +
                                        <p>merR gene acts as a regulator which can promote downstream genes’ expression in the presence of Hg (II), the detailed mechanism of it is well-known as a whole...</p>
 +
                                        </div>
 +
  <div class="cart1">
 +
<div class="span3"><a class="popup-with-zoom-anim" href="#small-dialog1">
 +
<k>MORE</k></a>
 +
</div>
 +
</div>
 +
</div>
 +
<div class="pricing-grid3">
 +
<h3><a><span><br>
 +
Hg(II)<br>
 +
sensor</span>
 +
        <p></p></a></h3>
 +
<!--<div class="price-value">
 +
<a href="#">3简介</a>
 +
</div> -->
 +
<div>
 +
                                        <p>We built our part with an existed part----which provided us a PmerT promoter----and a merR sequence synthetized by ourselves.However, you need to add upstream an rbs to make it  work if you decide to adopt our part.... </p>
 +
                                        </div>
 +
 +
 +
  <div class="cart1">
 +
<div class="span3"><a class="popup-with-zoom-anim" href="#small-dialog2"><l>MORE</l></a>
 +
</div>
 +
</div>
 +
</div>
 +
                                    <div style="margin-top:10px;width:100%;height:100px; text-align:center">
 +
                        <!--  <a class="wedobtn" href="#">先空着吧!或者写每月进度.</a> -->
 +
                            </div>
 +
<!-----pop-up-grid---->
 +
<div id="small-dialog" class="mfp-hide">
 +
<div >
 +
<div class="payment-online-form-left">
 +
                                                    <h1>K1513000: quorum sensing system</h1>
 +
                                                    <img src="images/p1.jpg" alt="" align="middle" />
 +
<p>Our part is constituted by Plac、luxR、Pluxr、luxr. LuxI can result in the production of AHL—a kind of auto-inducer which can bind to the protein LuxR and induce the high expression of downstream genes of Pluxr,therefore,this system can drive a mass of bacteria highly express a particular gene. What’s more, AHL can be used by all bacteria in certain range.</p>
 +
 +
</div>
 +
  </div>
 +
</div>
 +
<!-----pop-up-grid---->
 +
                                           
 +
                                           
 +
                                            <!-----pop-up-grid---->
 +
<div id="small-dialog1" class="mfp-hide">
 +
<div style="background-color:#FFF">
 +
<div class="payment-online-form-left">
 +
                                                    <h1>K1513001: Fast-type merR biosensor</h1>
 +
                                                    <img src="images/p2.jpg" alt="" align="middle" />
 +
<p>merR gene acts as a regulator which can promote downstream genes’ expression in the presence of Hg (II), the detailed mechanism of it is well-known as a whole. This summer we aimed at finding out a fast as well as accurate method to detect the Hg (II) in water. However, we found that the former method costs much time, so we turn to look for a rapid way which meets our expectation.</p>
 +
 +
</div>
 +
</div>
 +
                                            </div>
 +
<!-----pop-up-grid复制这个添加其他的弹出框---->
 +
                                            <div id="small-dialog2" class="mfp-hide">
 +
<div style="background-color:#FFF">
 +
<div class="payment-online-form-left">
 +
                                                    <h1>K1513002:Hg(II) sensor</h1>
 +
                                                    <img src="images/p3.jpg" alt="" align="middle" />
 +
<p>We built our part with an existed part----which provided us a PmerT promoter----and a merR sequence synthetized by ourselves. However, you need to add upstream an rbs to make it work if you decide to adopt our part.</p>
 +
 +
</div>
 +
</div>
 +
</div>
 +
<div class="clear"> </div>
 +
              </div>
 +
</div>
 +
</div>
 +
        </div>
 +
     
 +
       
 +
          <div>
 +
        modeling
 +
          modeling
 +
            modeling
 +
              modeling
 +
            <a href="images/port.jpg #small-dialog1" class="flipLightBox popup-with-zoom-anim"><img src="images/port.jpg" alt="Image 2" style="top: 0px;"> </a> 
 +
        </div>
 +
  <div class="portfoliO s1" id="work"><!-- start portfoli1 -->
 +
  <div class="wrap">
 +
<h3>Saftey </h3>
 +
<p>&nbsp;</p>
 +
<div class="container"><!-- start container -->
 +
      <!-- start h_menu -->
 +
<div class="h_menu">
 +
<!--<ul class="flexy-menu thick orange">
 +
                <li class="active"> <span class="filter active" data-filter="app card icon web">VIEW ALL</span></li>
 +
                <li><span class="filter" data-filter="app  icon">ILLUSTRATION</span></li>
 +
                <li><span class="filter" data-filter="card ">LOGO</span></li>            
 +
                <li><span class="filter" data-filter="icon app card ">THIPOGRAPHY</span></li>
 +
                <li><span class="filter" data-filter="web card icon">POSTER</span></li>
 +
</ul>-->
 +
</div> <!-- end h_menu -->
 +
<script type="text/javascript" src="js/flexy-menu.js"></script>
 +
<link href="css/header_style1.css" rel="stylesheet" type="text/css" media="all" />
 +
<script type="text/javascript">$(document).ready(function(){$(".flexy-menu").flexymenu({speed: 400,type: "horizontal",align: "right"});});</script>
-
</div>
+
<!-- end smart_nav * -->
-
 
+
<!-- <ul id="filters" class="clearfix">
-
<div class="row">
+
<li>
-
<div class="col-md-4">
+
<span class="filter active" data-filter="app card icon web">VIEW ALL</span>
-
          <div class="thumbnail">
+
</li>
-
            <a href="" title="Bootstrap 编码规范"><img class="lazy" src="/img/wantyou.jpg" height="150" data-src="http://static.bootcss.com/www/assets/img/codeguide.png" alt="Headroom.js"></a>
+
<li>
-
            <div class="caption">
+
<span class="filter" data-filter="app  icon">ILLUSTRATION</span>
-
              <h3>  
+
</li>
-
                <a href="" >研究目标</a>
+
<li>
-
              </h3>
+
<span class="filter" data-filter="card ">LOGO</span>
-
              <p>
+
</li>
-
              我们希望研制出一种大肠杆菌 blablablablabla
+
<li>
-
              </p>
+
<span class="filter" data-filter="icon app card ">THIPOGRAPHY</span>
-
            </div>
+
</li>
-
          </div>
+
<li>
-
        </div>
+
<span class="filter" data-filter="web card icon">POSTER</span>
-
<div class="col-md-4">
+
</li>
-
          <div class="thumbnail">
+
</ul>
-
            <a href="" title="Bootstrap 编码规范"><img class="lazy" src="/img/wantyou.jpg" height="150" data-src="http://static.bootcss.com/www/assets/img/codeguide.png" alt="Headroom.js"></a>
+
-->
-
            <div class="caption">
+
<div id="portfoliolist">
-
              <h3>  
+
<div class="portfolio app mix_all" data-cat="app" style="display: inline-block; opacity: 1;">
-
                <a href="" >研究成果</a>
+
<div class="portfolio-wrapper">
-
              </h3>
+
<a href="images/port.jpg #small-dialog1" class="flipLightBox popup-with-zoom-anim"><img src="images/port.jpg" alt="Image 2" style="top: 0px;"> </a>
-
              <p>
+
-
              这里是我们的研究成果简介
+
</div>
-
              </p>
+
</div>
-
            </div>
+
<div class="portfolio app mix_all" data-cat="app" style="display: inline-block; opacity: 1;">
-
          </div>
+
<div class="portfolio-wrapper">
-
        </div>
+
<a href="images/port1.jpg #small-dialog1" class="flipLightBox popup-with-zoom-anim"><img src="images/port1.jpg" alt="Image 2" style="top: 0px;"> </a>
-
<div class="col-md-4">
+
</div>
-
          <div class="thumbnail">
+
</div>
-
            <a href="" title="Bootstrap 编码规范"><img class="lazy" src="/img/wantyou.jpg" height="150" data-src="http://static.bootcss.com/www/assets/img/codeguide.png" alt="Headroom.js"></a>
+
<div class="portfolio web mix_all" data-cat="web" style="display: inline-block; opacity: 1;">
-
            <div class="caption">
+
<div class="portfolio-wrapper">
-
              <h3>  
+
<a href="images/port2.jpg #small-dialog1" class="flipLightBox popup-with-zoom-anim"><img src="images/port2.jpg" alt="Image 2" style="top: 0px;"> </a>
-
                <a href="" >团队成员</a>
+
</div>
-
              </h3>
+
</div>
-
              <p>
+
<div class="portfolio card mix_all" data-cat="card" style="display: inline-block; opacity: 1;">
-
              我们的队员有XXX,XXX,XXX,XXX,XXX
+
<div class="portfolio-wrapper">
-
              </p>
+
<a href="images/port3.jpg #small-dialog1" class="flipLightBox popup-with-zoom-anim"><img src="images/port3.jpg" alt="Image 2" style="top: 0px;"> </a>
-
            </div>
+
-
          </div>
+
</div>
-
        </div>
+
</div>
 +
<div class="portfolio web mix_all" data-cat="web" style="display: inline-block; opacity: 1;">
 +
<div class="portfolio-wrapper">
 +
<a href="images/port4.jpg #small-dialog1" class="flipLightBox popup-with-zoom-anim"><img src="images/port4.jpg" alt="Image 2" style="top: 0px;"> </a>
 +
 +
</div>
 +
</div>
 +
<div class="portfolio app mix_all" data-cat="app" style="display: inline-block; opacity: 1;">
 +
<div class="portfolio-wrapper">
 +
<a href="images/port5.jpg #small-dialog1" class="flipLightBox popup-with-zoom-anim"><img src="images/port5.jpg" alt="Image 5" style="top: 0px;"> </a>  
 +
 +
</div>
 +
</div>
 +
 +
</div>
 +
                       
 +
</div>
 +
                        <div style="width:100%;">
 +
                       
 +
                 
 +
                   
 +
                        </div>
 +
<!--<div class="img">
 +
<a href="#"><img src="images/zoom.png" alt=""></a>
 +
</div> -->
 +
</div><!-- end container -->
</div>
</div>
-
+
  <!----start-team-members---->
 +
<div class="team-members s2" id="about">
 +
<div class="wrap">
 +
<div class="tm-head">
 +
<h3>这里写什么呢?</h3>
 +
<p>每个人的照片和简介?</p>
 +
</div>
 +
<div class="tm-head-grids">
 +
<div class="tm-head-grid">
 +
<img src="images/team-member1.jpg" alt="" />
 +
<h4>魏巍</h4>
 +
<h5>错了错了,应该是个男的头像的!</h5>
 +
<!--<ul class="top-social-icons">
 +
<li><a class="twitter simptip-position-bottom simptip-movable" data-tooltip="twitter" href="#"> </a></li>
 +
<li><a class="facebook simptip-position-bottom simptip-movable" data-tooltip="Facebook" href="#"> </a></li>
 +
<li><a class="pin simptip-position-bottom simptip-movable" data-tooltip="pintrest" href="#"> </a></li>
 +
<div class="clear"> </div>
 +
</ul>-->
 +
</div>
 +
<div class="tm-head-grid">
 +
<img src="images/team-member2.jpg" alt="" />
 +
<h4>AARON TIGER</h4>
 +
<h5>Designer</h5>
 +
<!--<ul class="top-social-icons">
 +
<li><a class="twitter simptip-position-bottom simptip-movable" data-tooltip="twitter" href="#"> </a></li>
 +
<li><a class="facebook simptip-position-bottom simptip-movable" data-tooltip="Facebook" href="#"> </a></li>
 +
<li><a class="pin simptip-position-bottom simptip-movable" data-tooltip="pintrest" href="#"> </a></li>
 +
<div class="clear"> </div>
 +
</ul>-->
 +
</div>
 +
<div class="tm-head-grid">
 +
<a href="#about"><img src="images/team-member3.jpg" alt="" /></a>
 +
<h4>这个可以点击的哦!</h4>
 +
<h5>Developer</h5>
 +
<!--<ul class="top-social-icons">
 +
<li><a class="twitter simptip-position-bottom simptip-movable" data-tooltip="twitter" href="#"> </a></li>
 +
<li><a class="facebook simptip-position-bottom simptip-movable" data-tooltip="Facebook" href="#"> </a></li>
 +
<li><a class="pin simptip-position-bottom simptip-movable" data-tooltip="pintrest" href="#"> </a></li>
 +
<div class="clear"> </div>
 +
</ul>-->
 +
</div>
 +
<div class="clear"> </div>
 +
</div>
 +
</div>
 +
                 
 +
                 
 +
                    <div style="margin-top:10px;width:100%;height:100px; text-align:center">
 +
<h2 style="font-size:24px; fon">biaoti</h2>
 +
                        <h3>lingyige biaoti</h3>
 +
                        <p>我擦,没有格式啊</p>
 +
                        <h1 style="font-size:30px;fon">额,交友不慎!...上边不是我说的话!</h1>
 +
                    </div>
 +
                   
 +
</div>
 +
               
 +
<!----//End-team-members---->
 +
<!----start-team-members---->
 +
<div class="experience">
 +
<div class="wrap">
 +
<div class="ex-head">
 +
<h3>进度什么的</h3>
 +
<p>我觉得没用吧,或许能放在最后边.</p>
 +
</div>
 +
<div class="prog">
 +
<div class="text">
 +
<span>Web design</span>
 +
</div>
 +
<div class="text_p">
 +
<span>90%</span>
 +
</div>
 +
<div class="clear"></div>
 +
<div class="progress-bar-container" data-percent="90%">
 +
<div class="progress-bar" style="width: 90%;">
 +
</div>
 +
</div>
 +
</div>
 +
<div class="prog1">
 +
<div class="text">
 +
<span>HTML/css</span>
 +
</div>
 +
<div class="text_p">
 +
<span>40%</span>
 +
</div>
 +
<div class="clear"></div>
 +
<div class="progress-bar-container" data-percent="90%">
 +
<div class="progress-bar1" style="width: 80%;">
 +
</div>
 +
</div>
 +
</div>
 +
<div class="prog2">
 +
<div class="text">
 +
<span>illustration</span>
 +
</div>
 +
<div class="text_p">
 +
<span>60%</span>
 +
</div>
 +
<div class="clear"></div>
 +
<div class="progress-bar-container" data-percent="90%">
 +
<div class="progress-bar2" style="width: 60%;">
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
<!----//End-team-members---->
 +
<!---- fun ---->
 +
<div class="fun">
 +
<div class="wrap">
 +
<div class="fun-head">
 +
<h3>team</h3>
 +
</div>
 +
<div class="fun-head-grids">
 +
<div class="fun-head-grid">
 +
    <img src="images/fact1.png" alt="" />
 +
      <h4>638</h4>
 +
<h5>CUP OF COFFEE</h5>
 +
                                <h5>638一杯?太贵了吧!</h5>
 +
</div>
 +
                          <div class="fun-head-grid">
 +
<img src="images/fact2.png" alt="" />
 +
<h4>746</h4>
 +
<h5>HAPPY CLIENTS</h5>
 +
                                <h5>理解错了  不是638一杯!</h5>
 +
</div>
 +
<div class="fun-head-grid">
 +
<img src="images/fact2.png" alt="" />
 +
<h4>746</h4>
 +
<h5>HAPPY CLIENTS</h5>
 +
                                <h5>理解错了  不是638一杯!</h5>
 +
</div>
 +
<div class="fun-head-grid">
 +
<img src="images/fact3.png" alt="" />
 +
<h4>887</h4>
 +
<h5>SONG LISTENED</h5>
 +
</div>
 +
<div class="fun-head-grid">
 +
<img src="images/fact4.png" alt="" />
 +
<h4>1047</h4>
 +
<h5>ENDED PROJECTS</h5>
 +
</div>
 +
<div class="clear"> </div>
 +
</div>
 +
</div>
 +
</div>
 +
<!----//End-fun---->
 +
          <!----start-blog---->
 +
              <div class="slider_nb s7">
 +
              <div text-align:center;>
 +
            <!--    <div class="fun-head">
 +
<h3>&nbsp;</h3>
 +
<h3>NOTBOOK</h3>
 +
<p>&nbsp;</p>
 +
</div>-->
 +
                        <h3>&nbsp;</h3>
 +
<h3>NOTBOOK</h3>
 +
<p>&nbsp;</p>
 +
                            <h3>&nbsp;</h3>
 +
<h3>NOTBOOK</h3>
 +
<p>&nbsp;</p>
 +
                </div>
 +
                </div>
 +
                <div style="background:url(images/bg.jpg)center;height:600px;width:1026px ">
 +
             
 +
                <h1>HP</h1>
 +
                  <h1>HP</h1>
 +
                    <h1>HP</h1>
 +
                      <h1>HP</h1>
 +
                        <h1>HP</h1>
 +
                          <h1>HP</h1>
 +
                            <h1>HP</h1>
 +
                              <h1>HP</h1>
 +
                             
 +
                </div>
 +
<div class="blog s3" id="blog">
 +
<div class="wrap">
 +
<div class="blog-head">
 +
<h3>&nbsp;</h3>
 +
<p>Proin iaculis purus consequat sem cure.</p>
 +
</div>
 +
<div class="blog-grid">
 +
<div class="blog-left">
 +
<div class="img-left">
 +
<img src="images/blog1.jpg" alt="" />
 +
</div>
 +
<div class="text-right">
 +
<h6>March 29, 2014</h6>
 +
<h3><a href="#">点击进入哪里去啊?</a></h3>
 +
<img src="images/line.png" alt="" />
 +
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum ....</p>
 +
<p><a href="#">MORE</a></p>
 +
</div>
 +
    <div class="clear"> </div>
 +
</div>
 +
<div class="blog-right">
 +
<div class="img-left">
 +
<img src="images/blog2.jpg" alt="" />
 +
</div>
 +
<div class="text-right">
 +
<h6>March 29, 2014</h6>
 +
<h3><a href="#">A NEW INVENTION FOR LOVERS WHO LOVE</a></h3>
 +
<img src="images/line.png" alt="" />
 +
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum ....</p>
 +
<p><a href="#">MORE</a></p>
 +
</div>
 +
    <div class="clear"> </div>
 +
</div>
 +
<div class="clear"> </div>
 +
</div>
 +
<div class="blog-grid">
 +
<div class="blog-left">
 +
<div class="img-left">
 +
<img src="images/blog3.jpg" alt="" />
 +
</div>
 +
<div class="text-right">
 +
<h6>March 29, 2014</h6>
 +
<h3><a href="#">A NEW INVENTION FOR LOVERS WHO LOVE</a></h3>
 +
<img src="images/line.png" alt="" />
 +
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum ....</p>
 +
<p><a href="#">MORE</a></p>
 +
</div>
 +
    <div class="clear"> </div>
 +
</div>
 +
<div class="blog-right">
 +
<div class="img-left">
 +
<img src="images/blog4.jpg" alt="" />
 +
</div>
 +
<div class="text-right">
 +
<h6>March 29, 2014</h6>
 +
<h3><a href="#">A NEW INVENTION FOR LOVERS WHO LOVE</a></h3>
 +
<img src="images/line.png" alt="" />
 +
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum ....</p>
 +
<p><a href="#">MORE</a></p>
 +
</div>
 +
    <div class="clear"> </div>
 +
</div>
 +
<div class="clear"> </div>
 +
</div>
 +
</div>
 +
</div>
 +
<!----//End-blog---->
 +
<!---- strat-studio---->
 +
          <div class="studio s4" id="studio">
 +
<div class="wrap">
 +
<div class="studio-head">
 +
<h3>这块倒是可以考虑放个视频什么的!</h3>
 +
<p>不知道传到哪个网站在国内外都可以看到的.</p>
 +
</div>
 +
</div>
 +
<iframe src="http://www.baidu.com/" width="600px" margin:0 auto; height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
 +
</div>
 +
<!----//End-studio---->
 +
        <!---- strat-clent---->
 +
   
 +
<!----//End-clients---->
 +
  <div class="pricing s5" id="pricing">
 +
<div class="wrap">
 +
<div class="pricing-head">
 +
<a class="expand-btn"><h3>又不知道写什么了!</h3></a>
 +
<div style="margin-top:20px;width:100%;height:100px; text-align:center">
 +
                            <!--<a class="wedobtn" href="#">先空着吧!或者写每月进度.</a> -->
 +
                            </div>
 +
</div>
 +
  <div class="pricing-grids">
 +
<div class="pricing-grid1">
 +
<h3><a href="#"><span>5月</span></a></h3>
 +
<div class="price-value">
 +
<a href="#">我们开始准备了!</a>
 +
</div>
 +
<img src="images/border.png" alt="" />
 +
<ul>
 +
<li><a href="#">啊?分条写,这个工作量是不是有点大!</a></li>
 +
<li><a href="#">Dolor sitamet, Consect</a></li>
 +
<li><a href="#">Adipiscing elit</a></li>
 +
<li><a href="#">Proin commodo turips</a></li>
 +
<li><a href="#">Laws pulvinarvel</a></li>
 +
<li><a href="#">Prnare nisi pretium</a></li>
 +
</ul>
 +
<div class="cart1">
 +
<div class="span3"><a class="popup-with-zoom-anim" href="#small-dialog"><j>TRY</j></a>
 +
</div>
 +
</div>
 +
</div>
 +
<div class="pricing-grid2">
 +
<h3><a href="#">$<span>29</span><p>month</p></a></h3>
 +
<div class="price-value">
 +
<a href="#">STANDARD</a>
 +
</div>
 +
<img src="images/border.png" alt="" />
 +
<ul>
 +
<li><a href="#">Lorem ipsum</a></li>
 +
<li><a href="#">Dolor sitamet, Consect</a></li>
 +
<li><a href="#">Adipiscing elit</a></li>
 +
<li><a href="#">Proin commodo turips</a></li>
 +
<li><a href="#">Laws pulvinarvel</a></li>
 +
<li><a href="#">Prnare nisi pretium</a></li>
 +
<li><a href="#">Proin commodo turips</a></li>
 +
<li><a href="#">Laws pulvinarvel</a></li>
 +
</ul>
 +
<div class="cart1">
 +
<div class="span3"><a class="popup-with-zoom-anim" href="#small-dialog1"><k>TRY</k></a>
 +
</div>
 +
</div>
 +
</div>
 +
<div class="pricing-grid3">
 +
<h3><a href="#">$<span>99</span><p>month</p></a></h3>
 +
<div class="price-value">
 +
<a href="#">PREMIUM</a>
 +
</div>
 +
<img src="images/border.png" alt="" />
 +
<ul>
 +
<li><a href="#">Lorem ipsum</a></li>
 +
<li><a href="#">Dolor sitamet, Consect</a></li>
 +
<li><a href="#">Adipiscing elit</a></li>
 +
<li><a href="#">Proin commodo turips</a></li>
 +
<li><a href="#">Laws pulvinarvel</a></li>
 +
<li><a href="#">Prnare nisi pretium</a></li>
 +
<li><a href="#">Dolor sitamet, Consect</a></li>
 +
<li><a href="#">Adipiscing elit</a></li>
 +
<li><a href="#">Proin commodo turips</a></li>
 +
<li><a href="#">Laws pulvinarvel</a></li>
 +
</ul>
 +
<div class="cart1">
 +
<div class="span3"><a class="popup-with-zoom-anim" href="#small-dialog"><l>TRY</l></a>
 +
</div>
 +
</div>
 +
</div>
 +
                                    <div style="margin-top:10px;width:100%;height:100px; text-align:center">
 +
                            <a class="wedobtn" href="#">先空着吧!或者写每月进度.</a>
 +
                            </div>
 +
<!-----pop-up-grid---->
 +
<div id="small-dialog" class="mfp-hide">
 +
<div >
 +
<div class="payment-online-form-left">
 +
<p>修改了这个东西</p>
 +
 +
</div>
 +
  </div>
 +
</div>
 +
<!-----pop-up-grid---->
 +
                                           
 +
                                           
 +
                                            <!-----pop-up-grid---->
 +
<div id="small-dialog1" class="mfp-hide">
 +
<div style="background-color:#FFF">
 +
<div class="payment-online-form-left">
 +
<p>这里就详细介绍每一条吧!</p>
 +
<img src="images/blog2.jpg" alt="" />
 +
 +
  </div>
 +
</div>
 +
<!-----pop-up-grid复制这个添加其他的弹出框---->
 +
                                           
 +
</div>
 +
<div class="clear"> </div>
 +
              </div>
 +
</div>
 +
                </div>
 +
<!-----logos---->
 +
  <div class="logos">
 +
  <div class="wrap">
 +
  <ul>
 +
  <li><img src="images/client6.png" alt="" /></li>
 +
  <li><img src="images/client7.png" alt="" /></li>
 +
  <li><img src="images/client8.png" alt="" /></li>
 +
  </ul>
 +
  </div>
 +
  </div>
 +
  <!-----cntact---->
 +
  <div class="contact s6" id="contact">
 +
<div class="wrap">
 +
<h3>这段不需要了吧!</h3>
 +
<p>Proin iaculis purus consequat sem cure.</p>
 +
        <div class="contact_form">
 +
    <form method="post" action="contact-post.html">
 +
    <span><input type="text" value="NAME" onFocus="this.value = '';" onBlur="if (this.value == '') {this.value = 'NAME';}"><label><img src="images/con1.png" alt="" /></label></span>    
 +
    <span class="left"><input type="text" value="EMAIL" onFocus="this.value = '';" onBlur="if (this.value == '') {this.value = 'EMAIL';}"><label><img src="images/con2.png" alt="" /></label></span>
 +
    <div class="clear"></div>
 +
    <span><textarea placeholder="MESSAGE"></textarea><label1><img src="images/con3.png" alt="" /></label1></span>
 +
  <input type="submit" class="" value="Submit">
 +
    </form>
 +
</div>
 +
</div>
 +
</div>
 +
  <div class="map">
 +
<iframe width="100%" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.in/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Lighthouse+Point,+FL,+United+States&amp;aq=4&amp;oq=light&amp;sll=26.275636,-80.087265&amp;sspn=0.04941,0.104628&amp;ie=UTF8&amp;hq=&amp;hnear=Lighthouse+Point,+Broward,+Florida,+United+States&amp;t=m&amp;z=14&amp;ll=26.275636,-80.087265&amp;output=embed"></iframe><br><small><a href="https://maps.google.co.in/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=Lighthouse+Point,+FL,+United+States&amp;aq=4&amp;oq=light&amp;sll=26.275636,-80.087265&amp;sspn=0.04941,0.104628&amp;ie=UTF8&amp;hq=&amp;hnear=Lighthouse+Point,+Broward,+Florida,+United+States&amp;t=m&amp;z=14&amp;ll=26.275636,-80.087265" style="color:#666;text-align:left;font-size:12px"></a></small>
 +
    </div>
 +
    <div class="signup">
 +
                <div class="form">
 +
<span><label><img src="images/msg.png" alt="" /></label><input type="text" value="Your E-MAIL Please?" onFocus="this.value = '';" onBlur="if (this.value == '') {this.value = 'Your E-MAIL Please?';}"></span>
 +
<span><input type="submit" value="Sign Up Now" id="submit" name="submit"></span>
 +
<p>这个也不要了!</p>
 +
<div class="clear"> </div>
 +
  </div>
 +
          </div>
 +
          <!----start-bottom-footer---->
 +
<div class="bottom-footer">
 +
<div class="wrap">
 +
<div class="bottom-footer-center">
 +
<ul class="bottom-social-icons">
 +
<li><a class="bottom-twitter" href="#"> </a></li>
 +
<li><a class="bottom-facebook" href="#"> </a></li>
 +
<li><a class="bottom-pin" href="#"> </a></li>
 +
<li><a class="bottom-google" href="#"> </a></li>
 +
<div class="clear"> </div>
 +
</ul>
 +
</div>
 +
<div class="bottom-footer-left">
 +
                        <p>倒是可以换成人人、微博等啊!</p>
 +
<p><span>Copyright &copy; 网站换主人啦~.<a target="_blank" href="http://www.buct.edu.cn/">BUCT</a></p>
 +
</div>  
 +
<div class="clear"> </div>
 +
</div>
 +
</div>
 +
<!----//End-bottom-footer---->
 +
<!-- scroll_top_btn -->
 +
<script type="text/javascript" src="js/move-top.js"></script>
 +
<script type="text/javascript" src="js/easing.js"></script>
 +
<script type="text/javascript">
 +
jQuery(document).ready(function($) {
 +
$(".scroll").click(function(event){
 +
event.preventDefault();
 +
$('html,body').animate({scrollTop:$(this.hash).offset().top},1200);
 +
});
 +
});
 +
</script>
 +
 
 +
<a href="#" id="toTop" style="display: block;"><span id="toTopHover" style="opacity: 1;"></span></a>
 +
<div style="display:none"><script src='http://v7.cnzz.com/stat.php?id=155540&web_id=155540' language='JavaScript' charset='gb2312'></script></div>
 +
 
 +
 
 +
<script type="text/javascript" src="js/jquery.mixitup.min.js"></script>
 +
<script type="text/javascript">
 +
$(function () {
 +
var filterList = {
 +
init: function () {
 +
 +
// MixItUp plugin
 +
// http://mixitup.io
 +
$('#portfoliolist').mixitup({
 +
targetSelector: '.portfolio',
 +
filterSelector: '.filter',
 +
effects: ['fade'],
 +
easing: 'snap',
 +
// call the hover effect
 +
onMixEnd: filterList.hoverEffect()
 +
});
 +
 +
},
 +
hoverEffect: function () {
 +
// Simple parallax effect
 +
$('#portfoliolist .portfolio').hover(
 +
function () {
 +
$(this).find('.label').stop().animate({bottom: 0}, 200, 'easeOutQuad');
 +
$(this).find('img').stop().animate({top: -30}, 500, 'easeOutQuad');
 +
},
 +
function () {
 +
$(this).find('.label').stop().animate({bottom: -40}, 200, 'easeInQuad');
 +
$(this).find('img').stop().animate({top: 0}, 300, 'easeOutQuad');
 +
}
 +
);
 +
 +
}
 +
 +
};
 +
// Run the show!
 +
filterList.init();
 +
});
 +
</script>
 +
<div>
 +
<div id="portfoliolist">
 +
<div class="portfolio logo1 mix_all port-big-grid" data-cat="logo" style="display: inline-block; opacity: 1;">
 +
<div class="portfolio-wrapper">
 +
<a data-toggle="modal" data-target=".bs-example-modal-md" href="#" class="b-link-stripe b-animate-go  thickbox">
 +
    <img class="p-img" src="images/port5.jpg" /><div class="b-wrapper"><h2 class="b-animate b-from-left    b-delay03 ">哎呦,终于搞定了!</h2>
 +
    </div></a>
 +
                </div>
 +
</div>
 +
</div>
 +
   
 +
<!--  <div id="portfoliolist">
 +
    <a data-toggle="modal" data-target=".bs-example-modal-md" href="#" class="b-link-stripe b-animate-go  thickbox">
 +
    <img src="images/port5.jpg" width="5%" height="854" class="p-img" /><div class="b-wrapper"><h2 class="b-animate b-from-left    b-delay03 ">哎呦,终于搞定了!</h2>
 +
</div></a>
 +
</div>-->
 +
 
 +
  <div id="portfoliolist">
 +
<div class="portfolio logo1 mix_all port-big-grid" data-cat="logo" style="display: inline-block; opacity: 1;">
 +
<div class="portfolio-wrapper">
 +
<a data-toggle="modal" data-target=".bs-example-modal-md" href="#" class="b-link-stripe b-animate-go  thickbox">
 +
    <img class="p-img" src="images/port5.jpg" /><div class="b-wrapper"><h2 class="b-animate b-from-left    b-delay03 "><img src="images/link-ico.png" alt=""/></h2>
 +
    </div></a>
 +
                </div>
 +
</div>
 +
<div class="clearfix"> </div>
 +
  </div>
 +
 +
</div>
 +
           
 +
  <div class="clients">
 +
<div class="wrap">
 +
<div class="client-head">
 +
<h3>这个就写赞助商吧</h3>
 +
                            <h5>这段程序有点乱...</h5>
 +
                        <!--  <p>这段可以用下边的那个效果啊,点击一下出现一个浮动框来描述。</p> -->
 +
</div>
 +
<!---strat-image-cursuals---->
 +
                  <div class="t-clients">
 +
                  <div class="wrap">
 +
<div class="nbs-flexisel-container"><div class="nbs-flexisel-inner"><ul class="flexiselDemo3 nbs-flexisel-ul" style="left: -253.6px; display: block;">              
 +
<li onClick="location.href='#';" class="nbs-flexisel-item" style="width: 253.6px;"><img src="images/client1.png"></li><li onClick="location.href='#';" class="nbs-flexisel-item" style="width: 253.6px;"><img src="images/client2.png"></li><li onClick="location.href='#';" class="nbs-flexisel-item" style="width: 253.6px;"><img src="images/client3.png"></li><li onClick="location.href='#';" class="nbs-flexisel-item" style="width: 253.6px;"><img src="images/client4.png"></li><li onClick="location.href='#';" class="nbs-flexisel-item" style="width: 253.6px;"><img src="images/client5.png"></li><li onClick="location.href='#';" class="nbs-flexisel-item" style="width: 253.6px;"><img src="images/client1.png"></li><li onClick="location.href='#';" class="nbs-flexisel-item" style="width: 253.6px;"><img src="images/client2.png"></li><li onClick="location.href='#';" class="nbs-flexisel-item" style="width: 253.6px;"><img src="images/client3.png"></li></ul><div class="nbs-flexisel-nav-left" style="top: 21.5px;"></div><div class="nbs-flexisel-nav-right" style="top: 21.5px;"></div></div></div>
 +
<div class="clear"> </div>     
 +
  <!---strat-image-cursuals---->
 +
<script type="text/javascript" src="js/jquery.flexisel.js"></script>
 +
<!---End-image-cursuals---->
 +
<script type="text/javascript">
 +
$(window).load(function() {
 +
    $(".flexiselDemo3").flexisel({
 +
        visibleItems: 5,
 +
        animationSpeed: 1000,
 +
        autoPlay: true,
 +
        autoPlaySpeed: 3000,           
 +
        pauseOnHover: true,
 +
        enableResponsiveBreakpoints: true,
 +
        responsiveBreakpoints: {
 +
            portrait: {
 +
                changePoint:480,
 +
                visibleItems: 1
 +
            },
 +
            landscape: {
 +
                changePoint:640,
 +
                visibleItems: 2
 +
            },
 +
            tablet: {
 +
                changePoint:768,
 +
                visibleItems: 3
 +
            }
 +
        }
 +
    });
 +
});
 +
</script>
 +
<!---->
 +
  <!---->
 +
</div>
 +
</div>
 +
</div>
 +
                    <h1>占着啦啊!</h1>
 +
                    <div class="bottom-footer-left">
 +
                        <p>倒是可以换成人人、微博等啊!</p>
 +
<p><span>Copyright &copy; 网站换主人啦~.<a target="_blank" href="http://www.buct.edu.cn/">BUCT</a></p>
 +
</div>  
 +
</div>
</body>
</body>
</html>
</html>

Revision as of 15:00, 13 October 2014

<!DOCTYPE HTML> BUCT-CHINA

这是第一页

这是第二页

这是第三页

这是第四页

哎呦,只有五页哦!...鼠标点一下就不转了是怎么回事!

PROJECT

题目

OVERVIEW

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

MORE

BIOSENSORS

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

MORE

DEVICE

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

MORE

前景及意义

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

MORE

quorum sensing system

Our part is constituted by Plac、luxR、Pluxr、luxr. LuxI can result in the production of AHL—a kind of auto-inducer which can ...


Fast-type merR biosensor

merR gene acts as a regulator which can promote downstream genes’ expression in the presence of Hg (II), the detailed mechanism of it is well-known as a whole...


Hg(II)
sensor

We built our part with an existed part----which provided us a PmerT promoter----and a merR sequence synthetized by ourselves.However, you need to add upstream an rbs to make it work if you decide to adopt our part....

K1513000: quorum sensing system

Our part is constituted by Plac、luxR、Pluxr、luxr. LuxI can result in the production of AHL—a kind of auto-inducer which can bind to the protein LuxR and induce the high expression of downstream genes of Pluxr,therefore,this system can drive a mass of bacteria highly express a particular gene. What’s more, AHL can be used by all bacteria in certain range.

K1513001: Fast-type merR biosensor

merR gene acts as a regulator which can promote downstream genes’ expression in the presence of Hg (II), the detailed mechanism of it is well-known as a whole. This summer we aimed at finding out a fast as well as accurate method to detect the Hg (II) in water. However, we found that the former method costs much time, so we turn to look for a rapid way which meets our expectation.

K1513002:Hg(II) sensor

We built our part with an existed part----which provided us a PmerT promoter----and a merR sequence synthetized by ourselves. However, you need to add upstream an rbs to make it work if you decide to adopt our part.

modeling modeling modeling modeling Image 2

Saftey

 

这里写什么呢?

每个人的照片和简介?

魏巍

错了错了,应该是个男的头像的!

AARON TIGER

Designer

这个可以点击的哦!

Developer

biaoti

lingyige biaoti

我擦,没有格式啊

额,交友不慎!...上边不是我说的话!

进度什么的

我觉得没用吧,或许能放在最后边.

Web design
90%
HTML/css
40%
illustration
60%

team

638

CUP OF COFFEE
638一杯?太贵了吧!

746

HAPPY CLIENTS
理解错了 不是638一杯!

746

HAPPY CLIENTS
理解错了 不是638一杯!

887

SONG LISTENED

1047

ENDED PROJECTS

 

NOTBOOK

 

 

NOTBOOK

 

HP

HP

HP

HP

HP

HP

HP

HP

 

Proin iaculis purus consequat sem cure.

March 29, 2014

点击进入哪里去啊?

Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum ....

MORE

March 29, 2014

A NEW INVENTION FOR LOVERS WHO LOVE

Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum ....

MORE

March 29, 2014

A NEW INVENTION FOR LOVERS WHO LOVE

Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum ....

MORE

March 29, 2014

A NEW INVENTION FOR LOVERS WHO LOVE

Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum ....

MORE

这块倒是可以考虑放个视频什么的!

不知道传到哪个网站在国内外都可以看到的.

这段不需要了吧!

Proin iaculis purus consequat sem cure.


这个就写赞助商吧

这段程序有点乱...

占着啦啊!