Difference between revisions of "Team:NTU-LIHPAO-Taiwan"
Line 1: | Line 1: | ||
{{NTU-LIHPAO-Taiwan}} | {{NTU-LIHPAO-Taiwan}} | ||
<html> | <html> | ||
− | < | + | <head> |
− | + | ||
− | < | + | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
− | < | + | <title>無標題文件</title> |
− | < | + | <style type="text/css"> |
− | + | body { | |
− | + | background-color: #F0F0F0; | |
− | + | } | |
+ | body,td,th { | ||
+ | font-family: Calibri, "新細明體", serif; | ||
+ | } | ||
+ | #Wrapper { | ||
+ | margin-right: auto; | ||
+ | margin-left: auto; | ||
+ | background-color: #FFF; | ||
+ | margin-top: 0px; | ||
+ | margin-bottom: 0px; | ||
+ | width: 1150px; | ||
+ | height: 1000px; | ||
+ | top: 0px; | ||
+ | bottom: 0px; | ||
+ | padding-top: 0px; | ||
+ | padding-bottom: 0px; | ||
+ | } | ||
+ | #Wrapper_TOP { | ||
+ | background-color: #FFF; | ||
+ | height: 20px; | ||
+ | width: 1150px; | ||
+ | position: absolute; | ||
+ | top: 0px; | ||
+ | left: 100px; | ||
+ | right: auto; | ||
+ | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | /*-------------------------------------------*/ | |
− | + | /*--------------------nav--------------------*/ | |
− | + | /*-------------------------------------------*/ | |
− | + | .nav { | |
+ | position: absolute; | ||
+ | top: 200px; | ||
+ | left: 100px; | ||
+ | right: auto; | ||
+ | list-style:none; | ||
+ | margin:0; | ||
+ | padding:0; | ||
+ | } | ||
+ | .nav ul { | ||
+ | *zoom:1; | ||
+ | list-style:none; | ||
+ | margin:0; | ||
+ | padding:0; | ||
+ | background:#FFF; | ||
+ | } | ||
− | + | .nav ul:before,.nav ul:after { | |
− | + | content:""; | |
− | + | display:table; | |
+ | } | ||
+ | .nav ul:after { | ||
+ | clear:both; | ||
+ | } | ||
− | + | .nav a { | |
− | + | text-decoration:none; | |
− | + | display:block; | |
− | + | padding:10px 10px; | |
− | + | line-height:1.2em; | |
− | + | color:#000; | |
− | + | text-align: center; | |
− | + | vertical-align: middle; | |
− | + | } | |
− | + | ||
− | + | ||
+ | .nav a:hover { | ||
+ | text-decoration:none; | ||
+ | background:#FFF; | ||
+ | text-align: center; | ||
+ | vertical-align: middle; | ||
+ | } | ||
− | + | .nav li ul { | |
− | + | position:absolute; | |
− | + | left:0; | |
− | + | top:36px; | |
− | + | z-index:1; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | .nav li ul li { | |
− | + | overflow:hidden; | |
− | + | height:0; | |
+ | } | ||
− | + | .nav li ul a { | |
+ | border:none; | ||
+ | background:rgba(0,0,0,0.05); | ||
+ | -webkit-transition:background 500ms ease-in-out; | ||
+ | -moz-transition:background 500ms ease-in-out; | ||
+ | -o-transition:background 500ms ease-in-out; | ||
+ | transition:background 500ms ease-in-out; | ||
+ | } | ||
+ | .nav li ul a:hover { | ||
+ | background:rgba(0,0,0,0.2); | ||
+ | } | ||
+ | .nav ul > li { | ||
+ | text-decoration:none; | ||
+ | float:left; | ||
+ | position:relative; | ||
+ | height:36px; | ||
+ | width: 125px; | ||
+ | } | ||
− | + | .nav ul > li:hover ul.subs { | |
+ | height:auto; | ||
+ | width:300px; | ||
+ | } | ||
+ | .nav ul > li:hover ul li { | ||
+ | line-height: 24px; | ||
+ | text-decoration:none; | ||
+ | height:36px; | ||
+ | width: 300px; | ||
+ | text-align: center; | ||
+ | vertical-align: middle; | ||
+ | border-left:1px solid #6E67A6; | ||
+ | -webkit-transition:height 250ms ease-in; | ||
+ | -moz-transition:height 250ms ease-in; | ||
+ | -o-transition:height 250ms ease-in; | ||
+ | transition:height 250ms ease-in; | ||
+ | } | ||
+ | |||
+ | |||
+ | /*--------------------------------------------*/ | ||
+ | /*--------------------nav2--------------------*/ | ||
+ | /*--------------------------------------------*/ | ||
+ | .nav2 { | ||
+ | position: absolute; | ||
+ | top: 200px; | ||
+ | left: auto; | ||
+ | right: 100px; | ||
+ | list-style:none; | ||
+ | margin:0; | ||
+ | padding:0; | ||
+ | } | ||
+ | |||
+ | .nav2 ul { | ||
+ | *zoom:1; | ||
+ | list-style:none; | ||
+ | margin:0; | ||
+ | padding:0; | ||
+ | background:#FFF; | ||
+ | } | ||
+ | |||
+ | .nav2 ul:before,.nav ul:after { | ||
+ | content:""; | ||
+ | display:table; | ||
+ | } | ||
+ | |||
+ | .nav2 ul:after { | ||
+ | clear:both; | ||
+ | } | ||
+ | |||
+ | .nav2 a { | ||
+ | text-decoration:none; | ||
+ | display:block; | ||
+ | padding:10px 10px; | ||
+ | line-height:1.2em; | ||
+ | color:#000; | ||
+ | text-align: center; | ||
+ | vertical-align: middle; | ||
+ | } | ||
+ | |||
+ | .nav2 a:hover { | ||
+ | text-decoration:none; | ||
+ | background:#FFF; | ||
+ | text-align: center; | ||
+ | vertical-align: middle; | ||
+ | } | ||
+ | |||
+ | .nav2 li ul { | ||
+ | position:absolute; | ||
+ | right:0; | ||
+ | top:36px; | ||
+ | z-index:1; | ||
+ | } | ||
+ | |||
+ | .nav2 li ul li { | ||
+ | overflow:hidden; | ||
+ | height:0; | ||
+ | } | ||
+ | |||
+ | .nav2 li ul a { | ||
+ | border:none; | ||
+ | background:rgba(0,0,0,0.05); | ||
+ | -webkit-transition:background 500ms ease-in-out; | ||
+ | -moz-transition:background 500ms ease-in-out; | ||
+ | -o-transition:background 500ms ease-in-out; | ||
+ | transition:background 500ms ease-in-out; | ||
+ | } | ||
+ | |||
+ | .nav2 li ul a:hover { | ||
+ | background:rgba(0,0,0,0.2); | ||
+ | } | ||
+ | |||
+ | .nav2 ul > li { | ||
+ | text-decoration:none; | ||
+ | float:right; | ||
+ | position:relative; | ||
+ | height:36px; | ||
+ | width: 125px; | ||
+ | } | ||
+ | |||
+ | .nav2 ul > li:hover ul.subs { | ||
+ | height:auto; | ||
+ | width:300px; | ||
+ | } | ||
+ | |||
+ | .nav2 ul > li:hover ul li { | ||
+ | line-height: 24px; | ||
+ | text-decoration:none; | ||
+ | height:36px; | ||
+ | width: 300px; | ||
+ | text-align: center; | ||
+ | vertical-align: middle; | ||
+ | border-right:1px solid #6E67A6; | ||
+ | -webkit-transition:height 250ms ease-in; | ||
+ | -moz-transition:height 250ms ease-in; | ||
+ | -o-transition:height 250ms ease-in; | ||
+ | transition:height 250ms ease-in; | ||
+ | } | ||
+ | |||
+ | |||
+ | </style> | ||
+ | </head> | ||
+ | |||
+ | |||
+ | <!----------------------------------------> | ||
+ | <!----------------------------------------> | ||
+ | <!------------------BODY------------------> | ||
+ | <!----------------------------------------> | ||
+ | <!----------------------------------------> | ||
+ | |||
+ | <body> | ||
+ | |||
+ | <div id="Wrapper_TOP"></div> | ||
+ | |||
+ | <nav class="nav"> | ||
+ | <ul> | ||
+ | <li><a href="#">Home</a> | ||
+ | <ul class="subs"> | ||
+ | <li><a href="#">Subnav Item</a></li> | ||
+ | <li><a href="#">Subnav Item</a></li> | ||
+ | <li><a href="#">Subnav Item</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | |||
+ | <li><a href="#">Team</a> | ||
+ | <ul class="subs"> | ||
+ | <li><a href="#">Subnav Item</a></li> | ||
+ | <li><a href="#">Subnav Item</a></li> | ||
+ | <li><a href="#">Subnav Item</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | |||
+ | <li><a href="#">Project</a> | ||
+ | <ul class="subs"> | ||
+ | <li><a href="#">Subnav Item</a></li> | ||
+ | <li><a href="#">Subnav Item</a></li> | ||
+ | <li><a href="#">Subnav Item</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | |||
+ | <li><a href="#">Results</a> | ||
+ | <ul class="subs"> | ||
+ | <li><a href="#">Subnav Item</a></li> | ||
+ | <li><a href="#">Subnav Item</a></li> | ||
+ | <li><a href="#">Subnav Item</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </nav> | ||
+ | |||
+ | <nav class="nav2"> | ||
+ | <ul> | ||
+ | <li><a href="#">Modeling</a> | ||
+ | <ul class="subs"> | ||
+ | <li><a href="#">Subnav Item</a></li> | ||
+ | <li><a href="#">Subnav Item</a></li> | ||
+ | <li><a href="#">Subnav Item</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | |||
+ | <li><a href="#">Notebook</a> | ||
+ | <ul class="subs"> | ||
+ | <li><a href="#">Subnav Item</a></li> | ||
+ | <li><a href="#">Subnav Item</a></li> | ||
+ | <li><a href="#">Subnav Item</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | |||
+ | <li><a href="#">Safety</a> | ||
+ | <ul class="subs"> | ||
+ | <li><a href="#">Subnav Item</a></li> | ||
+ | <li><a href="#">Subnav Item</a></li> | ||
+ | <li><a href="#">Subnav Item</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | |||
+ | <li><a href="#">Human Practice</a> | ||
+ | <ul class="subs"> | ||
+ | <li><a href="#">Subnav Item</a></li> | ||
+ | <li><a href="#">Subnav Item</a></li> | ||
+ | <li><a href="#">Subnav Item</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </nav> | ||
+ | |||
+ | <div id="Wrapper"> | ||
+ | |||
+ | |||
+ | </div> | ||
+ | </body> | ||
</html> | </html> |
Revision as of 17:20, 11 July 2015