Team:OUC-China/BaoYingying

From 2012.igem.org

(Difference between revisions)
Line 1: Line 1:
<html>
<html>
<head>
<head>
-
<meta charset="UTF-8">
+
<link rel="stylesheet" href="http://1.oucigem.sinaapp.com/oucigem2012-nav.css"><!--nav logo demo css-->
-
<title>Creating "Next Level" Search Form Using jQuery & CSS3 | Webstuffshare.com</title>
+
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
-
<meta name="description" content="Tutorial : Creating Next Level Search Form Using jQuery & CSS3">
+
<!--person CSS -->
-
<meta name="author" content="Webstuffshare">
+
<link rel="stylesheet" href="http://1.oucigem.sinaapp.com/ouc-igem-person.css">
-
<link rel="stylesheet" href="http://1.oucigem.sinaapp.com/ouc-footer-demo.css?v=2">
+
<!-- jQuery for Hover Box -->
-
</head>
+
<script>
-
<body>
+
$(document).ready(function(){
 +
$("img.static").hover(
 +
function() {
 +
$(this).stop().animate({"opacity": "0"}, "350");
 +
},
 +
function() {
 +
$(this).stop().animate({"opacity": "1"}, "350");
 +
});
 +
});
 +
</script>
 +
 +
<!-- CSS -->
 +
<style>
 +
/************** Code for Demo **************/
-
<h1>Creating "Next Level" Search Form Using jQuery & CSS3</h1>
+
/* Containing Element */
-
<br/>
+
#blur {
-
<div id="example">
+
  position:relative;
-
<h1>Simpe Style</h1>
+
  margin-left: 60px;
-
<div class="arrow2">hit the button <img src="images/arrow-right.png" /></div>
+
}
-
<div class="wrapper-simple">
+
-
<input type="text" placeholder="Type and enter..." />
+
/* Static Image Shown Before Hover */
-
<input type="submit" value="" />
+
#blur img.static {
-
<img src="images/search-icon-big.png" />
+
  position:absolute;
-
</div>
+
  left:0;
-
</div>
+
  top:0;
 +
  z-index:1;
 +
}
 +
 +
/* Image Shown Upon Hover */
 +
#blur img.blur {
 +
  position:absolute;
 +
  left:0;
 +
  top:0;
 +
}
 +
#ouc-footer{
 +
text-align:center;
 +
margin-top:-25px;
 +
-
<h1><span class="alert">Both following demo works only on Safari & Firefox. Tested only on Safari 5+ & Firefox 11.0 (both Mac)</span></h1>
+
}
 +
#footer-box
 +
{
 +
height: 50px;
 +
width:100%;
 +
margin-top:10px;
 +
background-color:#009ad9;
 +
border:none;
-
<div id="example1">
+
}
-
<h1>Cube Style </h1>
+
#footer a
-
<div class="wrapper1">
+
{
-
<div class="content-wrapper1">
+
color:#ffffff;
-
<div class="search-button1">
+
-
<span><img src="https://static.igem.org/mediawiki/2012/e/ed/Ouc-footer-search-icon.png" /></span>
+
-
</div>
+
-
<div class="search-box1">
+
-
<input type="text" placeholder="Type your keyword..." />
+
-
<img src="https://static.igem.org/mediawiki/2012/d/db/Ouc-footer-close.png" />
+
-
</div>
+
-
</div>
+
-
</div>
+
-
</div>
+
-
<div id="example2">
+
}
-
<h1>Cube Style With Animate</h1>
+
                #ouc-tools ul{
-
<div class="wrapper2">
+
                 
-
<div class="content-wrapper2">
+
-
<div class="search-button2">
+
-
<span><img src="https://static.igem.org/mediawiki/2012/e/ed/Ouc-footer-search-icon.png"" /></span>
+
                }
-
</div>
+
                #ouc-tools ul li{
-
<div class="search-box2">
+
                    display: inline-block;
-
<input type="text" placeholder="Type your keyword..." />
+
                    margin-right: 20px;
-
<img src="https://static.igem.org/mediawiki/2012/d/db/Ouc-footer-close.png"" />
+
                    vertical-align: middle;
-
</div>
+
-
</div>
+
 +
                }
 +
                input.searchButton {
 +
           
 +
                    font-size: 100%;
 +
                    background: none;
 +
                    border: none;
 +
                    color: #888;
 +
                    font-weight: bold;
 +
 +
margin-right:10px;
 +
margin-bottom:0;
 +
magin-left:10px;
 +
                }
 +
                input.searchButton:hover {
 +
                    color: #000;
 +
 +
                }
 +
</style>
 +
</style>
 +
</head>
 +
<body>
 +
<div id="menu-wrapper">
 +
<div id="logo">
</div>
</div>
-
<div class="arrow"><img src="images/arrow.png" /> make a click</div>
+
<ul class="menu">
-
</div>
+
<li> <a href="#">Home</a> </li>
-
 
+
<li> <a href="#">Project</a> </li>
-
+
<li> <a href="#">Modeling</a> </li>
-
<script>!window.jQuery && document.write(unescape('%3Cscript src="http://1.oucigem.sinaapp.com/ouc-footer-jquery-1.7.1.min.js"%3E%3C/script%3E'))</script>
+
<li> <a href="#">Human Practice</a> </li>
-
<script type="text/javascript" src="http://1.oucigem.sinaapp.com/ouc-footer-modernizr.js"></script>
+
<li> <a href="#">Team</a> </li>
-
<script type="text/javascript" src="http://1.oucigem.sinaapp.com/ouc-footer-demo.js"></script>
+
<li> <a href="#">Parts</a> </li>
 +
<li> <a href="#">Safety</a> </li>
 +
<li> <a href="#">Note</a> </li>
 +
</ul>
 +
</div>
 +
<div id="submenu-wrapper">
 +
<ul class="submenu">
 +
<li>
 +
<a href="">
 +
<img src="" />
 +
 +
</a>
 +
</li>
 +
<li>
 +
<a href="">
 +
<img src="" />
 +
 +
</a>
 +
</li>
 +
<li>
 +
<a href="/">
 +
<img src="" />
 +
 +
</a>
 +
</li>
 +
<li>
 +
<a href="/">
 +
<img src="" />
 +
 +
</a>
 +
</li>
 +
</ul>
 +
<ul class="submenu">
 +
<li>
 +
<a href="/">
 +
<img src="" />
 +
 +
</a>
 +
</li>
 +
<li>
 +
<a href="/">
 +
<img src="" />
 +
 +
</a>
 +
</li>
 +
<li>
 +
<a href="/">
 +
<img src="" />
-
<!-- GA -->
+
</a>
 +
</li>
 +
<li>
 +
<a href="/">
 +
<img src="" />
 +
 +
</a>
 +
</li>
 +
</ul>
 +
<ul class="submenu">
 +
<li>
 +
<a href="/">
 +
<img src="" />
 +
 +
</a>
 +
</li>
 +
<li>
 +
<a href="/">
 +
<img src="" />
 +
 +
</a>
 +
</li>
 +
<li>
 +
<a href="/">
 +
<img src="" />
 +
 +
</a>
 +
</li>
 +
<li>
 +
<a href="/">
 +
<img src="" />
 +
 +
</a>
 +
</li>
 +
</ul>
 +
<ul class="submenu">
 +
<li>
 +
<a href="/">
 +
<img src="" />
 +
 +
</a>
 +
</li>
 +
<li>
 +
<a href="/">
 +
<img src="" />
 +
 +
</a>
 +
</li>
 +
<li>
 +
<a href="/">
 +
<img src="" />
 +
 +
</a>
 +
</li>
 +
<li>
 +
<a href="/">
 +
<img src="" />
 +
 +
</a>
 +
</li>
 +
</ul>
 +
</div>
 +
<section id="wrapper">
 +
<article id="main">
 +
<h2>BaoYingying</h2>
 +
<p>Wiki programmer</p>
 +
 +
<!-- Code for jQuery Hover Box -->
 +
<div id="blur">
 +
<a>
 +
<img src="https://static.igem.org/mediawiki/2012/8/8b/Ouc-person-baoyingying1.jpg" class="static">
 +
</a>
 +
<img src="https://static.igem.org/mediawiki/2012/b/b0/Ouc-person-baoyingying2.jpg" class="blur">
 +
<div id="person-intro">
 +
<p>Hi, I am Bao Yingying, a junior student in college of information science and engineering. My major is computer science and technology.  It is a challenge and great honor to me to be the design assistant in OUC-China team. I have the passion for web development, meanwhile, I am now learning. Although it is not my major, I like molecular biology. I hope I can make my team's overview better. Making a great show about our project is the goal of all members. </p>
 +
</div>
 +
</div>
 +
<!-- Code for jQuery Hover Box -->
 +
 +
 +
</article>
 +
</section>
 +
</body>
 +
<script type="text/javascript" src="http://1.oucigem.sinaapp.com/OUC-nav.js"></script><!--nav js-->
 +
<!-- GA -->
<script type="text/javascript">
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
Line 68: Line 245:
var pageTracker = _gat._getTracker("UA-2260508-2");
var pageTracker = _gat._getTracker("UA-2260508-2");
pageTracker._trackPageview();
pageTracker._trackPageview();
-
} catch(err) {}</script>
+
} catch(err) {}
-
<!-- GA -->
+
</script>
-
</body>
+
 
-
</html>
+
 
 +
 
 +
    <div id="ouc-footer">
 +
        <div id="ouc-tools">
 +
         
 +
            <ul>
 +
                <li id="ouc-clustrmaps-wrapper">
 +
                    <div id="clustrmaps-widget"></div><script type="text/javascript">var _clustrmaps = {'url' : 'https://2012.igem.org/Team:OUC-China', 'user' : 1034709, 'server' : '4', 'id' : 'clustrmaps-widget', 'version' : 1, 'date' : '2012-09-22', 'lang' : 'zh', 'corners' : 'square' };(function (){ var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = 'http://www4.clustrmaps.com/counter/map.js'; var x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x);})();</script><noscript><a href="http://www4.clustrmaps.com/user/c56fc9d5"><img src="http://www4.clustrmaps.com/stats/maps-no_clusters/2012.igem.org-Team-OUC-China-thumb.jpg" alt="Locations of visitors to this page" /></a></noscript>
 +
                </li>
 +
                <li>
 +
<a href="http://www.renren.com/296396903/profile?ref=opensearch_normal"><img src="https://static.igem.org/mediawiki/2012/d/d2/Ouc-footer-cmlsast.jpg" alt="OUC CMLS AST" border="0"></a>
 +
 
 +
                 
 +
                </li>
 +
                <li>
 +
                    <a href="http://www.renren.com/296396903/profile?ref=opensearch_normal"><img src="https://static.igem.org/mediawiki/2012/5/5e/OUC-footer-contact.jpg" alt="Contact Us" border="0"></a>
 +
                </li>
 +
                <li style="width:160px;" >
 +
                <form action="/Special:Search" id="searchform">
 +
<input id="searchInput" name="search" type="text" title="Search 2011.igem.org [f]" accesskey="f" value="">
 +
                <input type='submit' name="go" class="searchButton" id="searchGoButton" value="Go" title="Go to a page with this exact name if exists" />&nbsp;
 +
                <input type='submit' name="fulltext" class="searchButton" id="mw-searchButton" value="Search" title="Search the pages for this text" />
 +
</form>
 +
                </li>
 +
            </ul>
 +
        </div>
 +
     
 +
    </div>
 +
</div></html>

Revision as of 18:34, 22 September 2012

BaoYingying

Wiki programmer

Hi, I am Bao Yingying, a junior student in college of information science and engineering. My major is computer science and technology. It is a challenge and great honor to me to be the design assistant in OUC-China team. I have the passion for web development, meanwhile, I am now learning. Although it is not my major, I like molecular biology. I hope I can make my team's overview better. Making a great show about our project is the goal of all members.

Retrieved from "http://2012.igem.org/Team:OUC-China/BaoYingying"