Difference between revisions of "Team:HZAU-China/Team"

Line 1: Line 1:
 
{{HZAU-China}}
 
{{HZAU-China}}
−
 
 
<html>
 
<html>
  
 
<head>
 
<head>
−
<style>
+
    <meta charset="UTF-8">
−
/* reset */
+
    <style type="text/css">
−
body{margin:0;padding:0 0 12px 0;font-size:12px;line-height:22px;font-family:"\5b8b\4f53","Arial Narrow";background:#fff;}
+
        * {
−
form,ul,li,p,h1,h2,h3,h4,h5,h6{margin:0;padding:0;}
+
            margin: 0;
−
input,select{font-size:12px;line-height:16px;}
+
            padding: 0;
−
img{border:0;}
+
            list-style: none;
−
ul,li{list-style-type:none;}
+
            text-decoration: none;
−
a {color:#00007F;text-decoration:none;}
+
        }
−
a:hover {color:#bd0a01;text-decoration:underline;}
+
  
−
.box {
+
        .team {
−
    width: 150px;
+
            margin: 20 8px;
−
margin: 0 auto;
+
            position: relative;
−
}
+
            background-color: #B8C4C6;
−
.menu{
+
            height: 2500px;
−
overflow:hidden;
+
            box-shadow: 0 1px 3px #CCCCCC;
−
border-color: #C4D5DF;
+
            border-radius: 3px;
−
    border-style: solid;
+
        }
−
    border-width: 0 1px 1px;
+
−
}
+
−
/* lv1 */
+
−
.menu li.level1 a{
+
−
    display: block;
+
−
    height: 28px;
+
−
    line-height: 28px;
+
−
    background:#EBF3F8;
+
−
font-weight:700;
+
−
    color: #5893B7;
+
−
text-indent: 14px;
+
−
border-top: 1px solid #C4D5DF;
+
−
}
+
−
.menu li.level1 a:hover{text-decoration:none;}
+
−
.menu li.level1 a.current{background:#B1D7EF;}
+
−
/* lv2 */
+
−
.menu li ul{overflow:hidden;}
+
−
.menu li ul.level2{display:none;}
+
−
.menu li ul.level2 li a{
+
−
    display: block;
+
−
    height: 28px;
+
−
    line-height: 28px;
+
−
    background:#ffffff;
+
−
font-weight:400;
+
−
    color: #42556B;
+
−
text-indent: 18px;
+
−
border-top: 0px solid #ffffff;
+
−
    overflow: hidden;
+
−
}
+
−
.menu li ul.level2 li a:hover{
+
−
color:#f60;
+
−
}
+
−
</style>
+
−
<!-- 引入 jQuery -->
+
−
<script src="../../scripts/jquery.js" type="text/javascript"></script>
+
−
<script type="text/javascript">
+
−
//等待dom元素加载完毕.
+
−
$(document).ready(function () {
+
−
$(".level1 > a").click(function () {
+
−
$(this).addClass("current")  //给当前元素添加"current"样式
+
−
.next().show()                //下一个元素显示
+
−
.parent().siblings().children("a").removeClass("current")        //父元素的兄弟元素的子元素<a>移除"current"样式
+
−
.next().hide();                //它们的下一个元素隐藏
+
−
return false;
+
−
});
+
−
});
+
−
</script>
+
  
 +
        .team .team_list {
 +
            position: relative;
 +
            margin: auto;
 +
            padding: 120px 0;
 +
            /* width: 1200px; */
 +
            height: 314px;
 +
 +
        }
 +
 +
        .team a {
 +
            display: block;
 +
            cursor: pointer;
 +
            font-family: Arial, Verdana, Sans-serif;
 +
        }
 +
 +
        .team .team_list>li {
 +
            padding: 0;
 +
            width: 300px;
 +
            float: left;
 +
            position: relative;
 +
            margin: 0 20px;
 +
            text-align: center;
 +
            height: 250px;
 +
        }
 +
 +
 +
        .team .member img {
 +
            width: 294px;
 +
            height: 250px;
 +
            border-top: 3px solid #0B3C38;
 +
            border-left: 3px solid #0B3C38;
 +
            border-right: 3px solid #0B3C38;
 +
            border-top-left-radius: 5px;
 +
            border-top-right-radius: 5px;
 +
        }
 +
 +
        .team .memberInfor {
 +
            height: 64px;
 +
            line-height: 64px;
 +
            background-color: #0B3C38;
 +
            font-size: 16px;
 +
            color: white;
 +
            box-shadow: 0 1px 3px #CCCCCC;
 +
        }
 +
 +
        .team .member span {
 +
            padding: 15px 15px;
 +
            font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
 +
            font-size: 24px;
 +
            font-weight: bold;
 +
        }
 +
 +
        .team .team_list .memberInfor:hover {
 +
            background-color: #0B3C38;
 +
        }
 +
 +
        .memberInfor div {
 +
            visibility: hidden;
 +
            opacity: 0;
 +
            width: 294px;
 +
            height: 0px;
 +
            z-index: 999;
 +
            background-color: #1fa67a;
 +
            margin: auto;
 +
            overflow: inherit;
 +
        }
 +
 +
        .memberInfor div p {
 +
            padding-top: 20px;
 +
            height: 100px;
 +
            font-family: Arial;
 +
            font-style: italic;
 +
            list-style-type: none;
 +
            text-align: center;
 +
            line-height: 20px;
 +
        }
 +
 +
        .member div {
 +
            visibility: visible;
 +
            opacity: 1;
 +
            height: 200px;
 +
            z-index: 999;
 +
            line-height: 50px;
 +
            transition: all 0.5s;
 +
            border-bottom: 3px solid #0B3C38;
 +
            border-left: 3px solid #0B3C38;
 +
            border-right: 3px solid #0B3C38;
 +
            border-bottom-left-radius: 5px;
 +
            border-bottom-right-radius: 5px;
 +
        }
 +
    </style>
 
</head>
 
</head>
  
 
<body>
 
<body>
−
<p>test</p>
+
    <div class="team">
 +
        <ul class="team_list">
 +
            <li class="member">
 +
                <img src="img/头像.jpg" alt="">
 +
                <a class="memberInfor">
 +
                    <span class="memberName">Shane</span>
 +
                    <div class="memberIntro">
 +
                        <p>This year，I'm captain of the HZAU-China. I hope I can be a brilliant person like professor
 +
                            Li who is my goddess.</p>
 +
                    </div>
 +
                </a>
 +
            </li>
 +
            <li class="member">
 +
                <img src="img/头像.jpg" alt="">
 +
                <a class="memberInfor">
 +
                    <span class="memberName">YinQing Zeng</span>
 +
                    <div class="memberIntro">
 +
                        <p>I'm YinQing Zeng. This year, I'm the student leaders of HZAU-China too. I love
 +
                            rap(especially EMINEM's songs) and making handicraft. In fact, I want to have a dessert
 +
                            shop in the future even though I don't like dessert.</p>
 +
                    </div>
 +
                </a>
 +
            </li>
 +
            <li class="member">
 +
                <img src="img/头像.jpg" alt="">
 +
                <a class="memberInfor">
 +
                    <span class="memberName">Yini Miao</span>
 +
                    <div class="memberIntro">
 +
                        <p>Yini Miao, one of the model group, who are intrigued with modeling last year and always try
 +
                            her best to think and reflect.</p>
 +
                    </div>
 +
                </a>
 +
            </li>
 +
            <li class="member">
 +
                <img src="img/头像.jpg" alt="">
 +
                <a class="memberInfor">
 +
                    <span class="memberName">He Yang</span>
 +
                    <div class="memberIntro">
 +
                        <p>My name is He Yang, It's my second year in HZAU-iGEM team. I am curious and ambitious.
 +
                            However, plentiful in ideal yet skiny in reality. I will easy to screw everything up if
 +
                            neglect any detail. So, it time to be a precise man.</p>
 +
                    </div>
 +
                </a>
 +
            </li>
 +
        </ul>
 +
 
 +
        <ul class="team_list">
 +
            <li class="member">
 +
                <img src="img/头像.jpg" alt="">
 +
                <a class="memberInfor">
 +
                    <span class="memberName">Tom Rao</span>
 +
                    <div class="memberIntro">
 +
                        <p>This is Tom Rao, an anime lover, a movie fan, a fat otaku and a man who is willing to devote
 +
                            his life into biology research. He’s one of the modelling group and built up the ATc model
 +
                            of our project. He also took charge in the interLab and successfully pass the data check.</p>
 +
                    </div>
 +
                </a>
 +
            </li>
 +
            <li class="member">
 +
                <img src="img/头像.jpg" alt="">
 +
                <a class="memberInfor">
 +
                    <span class="memberName">Zhiqing Guo</span>
 +
                    <div class="memberIntro">
 +
                        <p>My name is Zhiqing Guo,and you also can call me Farlina.It is my second year to attend
 +
                            iGEM.I made a lot of friends here who company me all the time.iGEMers let me know what
 +
                            persistence is and never toss in when I confront barriers.So I want to say I am into you
 +
                            guys.</p>
 +
                    </div>
 +
                </a>
 +
            </li>
 +
            <li class="member">
 +
                <img src="img/头像.jpg" alt="">
 +
                <a class="memberInfor">
 +
                    <span class="memberName">Lingyu Zhong</span>
 +
                    <div class="memberIntro">
 +
                        <p>My name is Lingyu Zhong and you may call me Xue Zhang, which means senior in English.
 +
                            Although I don’t know why they call me so. It’s my second year to be an iGEMer, and I also
 +
                            a member of wet experiment group. I love our team, I love our team members. It’s very lucky
 +
                            to meet you all.</p>
 +
                    </div>
 +
                </a>
 +
            </li>
 +
            <li class="member">
 +
                <img src="img/头像.jpg" alt="">
 +
                <a class="memberInfor">
 +
                    <span class="memberName">Zhuoqi Huang</span>
 +
                    <div class="memberIntro">
 +
                        <p>Hello, my name is Zhuoqi Huang, a boy who come from a beautiful city called Jieyang. It is
 +
                            my honour to join in the iGEM as a member of wetlab. Although bioinformatics is my major, I
 +
                            am addicted to experiments of organism but not the program on computer. In next year , I
 +
                            hope I can make contribution to the drylab.</p>
 +
                    </div>
 +
                </a>
 +
            </li>
 +
        </ul>
  
−
<div class="box">
+
        <ul class="team_list">
−
<ul class="menu">
+
            <li class="member">
−
<li class="level1">
+
                <img src="img/头像.jpg" alt="">
−
<a href="#none">hahaha</a>
+
                <a class="memberInfor">
−
<ul class="level2">
+
                    <span class="memberName">Heng Heng</span>
−
<li><a href="#none">1</a></li>
+
                    <div class="memberIntro">
−
<li><a href="#none">2</a></li>
+
                        <p>I‘m Heng Heng. This is my first year in HZAU-iGEM team. I'm eager for knowledge, and iGEM is
−
<li><a href="#none">3</a></li>
+
                            the place I want.</p>
−
<li><a href="#none">4</a></li>
+
                    </div>
−
</ul>
+
                </a>
−
</li>
+
            </li>
−
<li class="level1">
+
            <li class="member">
−
<a href="#none">hehehe</a>
+
                <img src="img/头像.jpg" alt="">
−
<ul class="level2">
+
                <a class="memberInfor">
−
<li><a href="#none">5</a></li>
+
                    <span class="memberName">Hangxi Fu</span>
−
<li><a href="#none">6</a></li>
+
                    <div class="memberIntro">
−
<li><a href="#none">7</a></li>
+
                        <p>This is Hangxi Fu,and you can call me Awesome Fu.I come from Yunnan and I am proud of my
−
<li><a href="#none">8</a></li>
+
                            rich hometown.I am crazy about philosophy and psychology.Also,I am busy with biology just
−
</ul>
+
                            because it's my business.I am engaging in wet lab in iGEM though I wanna study modeling.</p>
−
</li>
+
                    </div>
−
<li class="level1">
+
                </a>
−
<a href="#none">hohoho</a>
+
            </li>
−
<ul class="level2">
+
            <li class="member">
−
<li><a href="#none">9</a></li>
+
                <img src="img/头像.jpg" alt="">
−
<li><a href="#none">10</a></li>
+
                <a class="memberInfor">
−
<li><a href="#none">11</a></li>
+
                    <span class="memberName">Mo Qiqin</span>
−
<li><a href="#none">12</a></li>
+
                    <div class="memberIntro">
−
</ul>
+
                        <p>This is Mo Qiqin, fan of Kerbal Space Program. I love building fantastic space crafts and I
−
</li>
+
                            launch them successfuly. iGEM is more like a sand box game, for people can combine every
−
</ul>
+
                            parts they own to fulfill their fantasies, even the Deep Dark Fantasies♂. In the passed two
−
</div>
+
                            years, I fulfilled my fantasies and got friendships in our iGEM team. Oh, that’s good!</p>
 +
                    </div>
 +
                </a>
 +
            </li>
 +
            <li class="member">
 +
                <img src="img/头像.jpg" alt="">
 +
                <a class="memberInfor">
 +
                    <span class="memberName">Songtao Cheng</span>
 +
                    <div class="memberIntro">
 +
                        <p>Hello! My name is Songtao Cheng. It's my second year to be an iGEMer. During the iGEM
 +
                            project I found that synthetic biology is so charming. Joining iGEM is a good chance for me
 +
                            to learn knowledge and communicate with creative people to broaden my horizon. In short, I
 +
                            enjoy it!</p>
 +
                    </div>
 +
                </a>
 +
            </li>
 +
        </ul>
  
 +
        <ul class="team_list">
 +
            <li class="member">
 +
                <img src="img/头像.jpg" alt="">
 +
                <a class="memberInfor">
 +
                    <span class="memberName">Ruonan Tian</span>
 +
                    <div class="memberIntro">
 +
                        <p>My name is Ruonan Tian, I am now studying bioinformatics at HZAU. I have a wide range of
 +
                            interests, such as sports, reading and watching movies. However, I especially love igem,
 +
                            because I learn concentration from it.</p>
 +
                    </div>
 +
                </a>
 +
            </li>
 +
            <li class="member">
 +
                <img src="img/头像.jpg" alt="">
 +
                <a class="memberInfor">
 +
                    <span class="memberName">Wenxin Hu</span>
 +
                    <div class="memberIntro">
 +
                        <p>Hi! I’m Wenxin Hu, you can call me Stephanie! I’m a girl who have great passion in science
 +
                            and always dream to save the world! It’s my first year in team HZAU-iGEM and iGEM provides
 +
                            me a platform to achieve my dream. Everyone is nice here and I’m really happy to meet you
 +
                            all!</p>
 +
                    </div>
 +
                </a>
 +
            </li>
 +
            <li class="member">
 +
                <img src="img/头像.jpg" alt="">
 +
                <a class="memberInfor">
 +
                    <span class="memberName">Aries</span>
 +
                    <div class="memberIntro">
 +
                        <p>My name is Aries.It is a great pleasure for me to be a member of HZAU-IGEM experiment
 +
                            group.My major contribution is in the related design work.Joining IGEM is a good chance for
 +
                            me to learn knowledge and make friends with others.I believe we'll achieve good results
 +
                            this time！</p>
 +
                    </div>
 +
                </a>
 +
            </li>
 +
            <li class="member">
 +
                <img src="img/头像.jpg" alt="">
 +
                <a class="memberInfor">
 +
                    <span class="memberName">Shuguang Wang</span>
 +
                    <div class="memberIntro">
 +
                        <p>I majored in bioinformatics, a member of the Mathematical Modeling Team. Designer of the
 +
                            Bacterial Colony Counter and programmer of our wiki. </p>
 +
                    </div>
 +
                </a>
 +
            </li>
 +
        </ul>
 +
    </div>
 
</body>
 
</body>
  
 
</html>
 
</html>

Revision as of 09:23, 22 September 2018