Line 1: | Line 1: | ||
<HTML> | <HTML> | ||
<head> | <head> | ||
− | <meta | + | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
+ | <meta content="IE=edge" http-equiv="X-UA-Compatible"> | ||
<title>Homepage</title> | <title>Homepage</title> | ||
<style> | <style> | ||
Line 15: | Line 16: | ||
background-color:block; | background-color:block; | ||
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | . | + | |
− | + | @charset "UTF-8"; | |
− | + | html{font-size:62.5%;font-family:'helvetica neue',tahoma,arial,'hiragino sans gb','Simsun',sans-serif} | |
− | } | + | body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td,hr{margin:0;padding:0} |
+ | body{line-height:1.333;font-size:12px} | ||
+ | h1,h2,h3,h4,h5,h6{font-size:100%;font-family:arial,'hiragino sans gb','microsoft yahei','Simsun',sans-serif} | ||
+ | li{list-style:none} | ||
+ | a:link,a:visited{text-decoration:none} | ||
+ | |||
+ | |||
+ | .head-v3{position:relative;z-index:100;min-width:1000px} | ||
+ | .head-v3 .navigation-inner{margin:0 auto;width:980px;position:relative} | ||
+ | .navigation-up{height:60px;background:#27303f} | ||
+ | .navigation-up .navigation-v3{margin-left:155px;float:left;_margin-left:10px} | ||
+ | .navigation-up .navigation-v3 ul{float:left} | ||
+ | .navigation-up .navigation-v3 li{float:left;font:normal 16px/59px "microsoft yahei";color:#fff} | ||
+ | .navigation-up .navigation-v3 .nav-up-selected{background:#344157} | ||
+ | .navigation-up .navigation-v3 .nav-up-selected-inpage{background:#202833} | ||
+ | .navigation-up .navigation-v3 li h2{font-weight:normal;padding:0;margin:0} | ||
+ | .navigation-up .navigation-v3 li h2 a{padding:0 25px;color:#fff;display:inline-block;height:60px;font-family:"microsoft yahei"} | ||
+ | |||
+ | .navigation-down{position:absolute;top:60px;left:0px;width:100%} | ||
+ | .navigation-down .nav-down-menu{width:100%;margin:0;background:#344157;position:absolute;top:0px} | ||
+ | .navigation-down .nav-down-menu .navigation-down-inner{margin:auto;width:1200px;position:relative} | ||
+ | .navigation-down .nav-down-menu dl{float:left;margin:18px 80px 18px 0} | ||
+ | .navigation-down .menu-1 dl{margin:20px 80px 25px 0} | ||
+ | .navigation-down .menu-1 dt{font:normal 16px "microsoft yahei";color:#61789e;padding-bottom:10px;border-bottom:1px solid #61789e;margin-bottom:10px} | ||
+ | .navigation-down .menu-1 dd a{color:#fff;font:normal 14px/30px "microsoft yahei"} | ||
+ | .navigation-down .menu-1 dd a:hover{color:#60aff6} | ||
+ | .navigation-down .menu-2 dd a,.navigation-down .menu-3 dd a{color:#fff;font:normal 16px "microsoft yahei"} | ||
+ | |||
</style> | </style> | ||
+ | <script src="jquery-1.7.1.min.js" type="text/javascript"></script> | ||
+ | |||
+ | <script type="text/javascript"> | ||
+ | jQuery(document).ready(function(){ | ||
+ | var qcloud={}; | ||
+ | $('[_t_nav]').hover(function(){ | ||
+ | var _nav = $(this).attr('_t_nav'); | ||
+ | clearTimeout( qcloud[ _nav + '_timer' ] ); | ||
+ | qcloud[ _nav + '_timer' ] = setTimeout(function(){ | ||
+ | $('[_t_nav]').each(function(){ | ||
+ | $(this)[ _nav == $(this).attr('_t_nav') ? 'addClass':'removeClass' ]('nav-up-selected'); | ||
+ | }); | ||
+ | $('#'+_nav).stop(true,true).slideDown(200); | ||
+ | }, 150); | ||
+ | },function(){ | ||
+ | var _nav = $(this).attr('_t_nav'); | ||
+ | clearTimeout( qcloud[ _nav + '_timer' ] ); | ||
+ | qcloud[ _nav + '_timer' ] = setTimeout(function(){ | ||
+ | $('[_t_nav]').removeClass('nav-up-selected'); | ||
+ | $('#'+_nav).stop(true,true).slideUp(200); | ||
+ | }, 150); | ||
+ | }); | ||
+ | }); | ||
+ | </script> | ||
+ | |||
</head> | </head> | ||
− | |||
<body> | <body> | ||
− | <div class=" | + | <div class="head-v3"> |
− | <ul> | + | <div class="navigation-up"> |
− | <li><a href="# | + | <div class="navigation-inner"> |
− | <li><a href="# | + | <div class="navigation-v3"> |
− | <li><a href="# | + | <ul> |
− | <li><a href="# | + | <li class="nav-up-selected-inpage" _t_nav="home"> |
− | </ul> | + | <h2> |
+ | <a href="#">Home</a> | ||
+ | </h2> | ||
+ | </li> | ||
+ | <li class="" _t_nav="team"> | ||
+ | <h2> | ||
+ | <a href="#">Team</a> | ||
+ | </h2> | ||
+ | </li> | ||
+ | <li class="" _t_nav="attributions"> | ||
+ | <h2> | ||
+ | <a href="#">Attributions</a> | ||
+ | </h2> | ||
+ | </li> | ||
+ | <li class="" _t_nav="project"> | ||
+ | <h2> | ||
+ | <a href="#">Project</a> | ||
+ | </h2> | ||
+ | </li> | ||
+ | <li class="" _t_nav="hp"> | ||
+ | <h2> | ||
+ | <a href="#">Human Practice</a> | ||
+ | </h2> | ||
+ | </li> | ||
+ | <li class="" _t_nav="safety"> | ||
+ | <h2> | ||
+ | <a href="#">Safety</a> | ||
+ | </h2> | ||
+ | </li> | ||
+ | <li _t_nav="parts"> | ||
+ | <h2> | ||
+ | <a href="#">Parts</a> | ||
+ | </h2> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="navigation-down"> | ||
+ | <div id="team" class="nav-down-menu menu-1" style="display: none;" _t_nav="team"> | ||
+ | <div class="navigation-down-inner"> | ||
+ | <dl style="margin-left: 100px;"> | ||
+ | <dd> | ||
+ | <a class="link" hotrep="hp.header.solution.1" href="#">Team</a> | ||
+ | </dd> | ||
+ | |||
+ | </dl> | ||
+ | <dl> | ||
+ | <dd> | ||
+ | <a class="link" hotrep="hp.header.solution.1" href="#">Collaboration</a> | ||
+ | </dd> | ||
+ | |||
+ | </dl> | ||
+ | |||
+ | </div> | ||
+ | </div> | ||
+ | <div id="project" class="nav-down-menu menu-3 menu-1" style="display: none;" _t_nav="project"> | ||
+ | <div class="navigation-down-inner"> | ||
+ | <dl style="margin-left: 380px;"> | ||
+ | <dd> | ||
+ | <a class="link" hotrep="hp.header.solution.1" href="#">Decription</a> | ||
+ | </dd> | ||
+ | </dl> | ||
+ | <dl> | ||
+ | <dd> | ||
+ | <a class="link" hotrep="hp.header.solution.2" href="#">Experiments</a> | ||
+ | </dd> | ||
+ | </dl> | ||
+ | <dl> | ||
+ | <dd> | ||
+ | <a class="link" hotrep="hp.header.solution.3" href="#">Model</a> | ||
+ | </dd> | ||
+ | </dl> | ||
+ | <dl> | ||
+ | <dd> | ||
+ | <a class="link" hotrep="hp.header.solution.3" href="#">Prof of concept</a> | ||
+ | </dd> | ||
+ | </dl> | ||
+ | |||
+ | </div> | ||
+ | </div> | ||
+ | <div id="hp" class="nav-down-menu menu-3 menu-1" style="display: none;" _t_nav="hp"> | ||
+ | <div class="navigation-down-inner"> | ||
+ | <dl style="margin-left: 610px;"> | ||
+ | <dd> | ||
+ | <a class="link" hotrep="hp.header.support.1" href="#">HP</a> | ||
+ | </dd> | ||
+ | </dl> | ||
+ | <dl> | ||
+ | <dd> | ||
+ | <a class="link" hotrep="hp.header.support.2" href="#">Silver</a> | ||
+ | </dd> | ||
+ | </dl> | ||
+ | <dl> | ||
+ | <dd> | ||
+ | <a class="link" hotrep="hp.header.support.3" href="#">Gold</a> | ||
+ | </dd> | ||
+ | </dl> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | </div> | ||
+ | </div> | ||
+ | <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> | ||
</div> | </div> | ||
− | |||
− | |||
</body> | </body> | ||
</html> | </html> |
Revision as of 06:30, 21 June 2018