Line 1: | Line 1: | ||
− | |||
− | |||
− | |||
<html> | <html> | ||
− | < | + | <style> |
− | + | body { | |
− | + | background-color:white; | |
− | + | } | |
− | + | ||
− | + | /* nav css start*/ | |
− | + | nav{ | |
+ | |||
+ | } | ||
+ | |||
+ | nav ul { | ||
+ | height: 100px; | ||
+ | list-style-type: none; | ||
+ | text-align: right; | ||
+ | } | ||
+ | |||
+ | nav li { | ||
+ | display:inline-block; | ||
+ | } | ||
+ | |||
+ | nav li a{ | ||
+ | display: inline-block; | ||
+ | color: #809bbb; | ||
+ | text-decoration: none; | ||
+ | font-size: 18px; | ||
+ | font-family: '微軟正黑體'; | ||
+ | padding: 40px 20px; | ||
+ | transition: 0.5s; | ||
+ | } | ||
+ | |||
+ | nav li.logo{ | ||
+ | display: inline-block; | ||
+ | text-align: left; | ||
+ | position: absolute; | ||
+ | left: 100px; | ||
+ | width: 307px; | ||
+ | height: 100px; | ||
+ | } | ||
+ | |||
+ | |||
+ | nav li a:hover, .dropdown:hover .dropbtn { | ||
+ | background-color: #f1f1f1; | ||
+ | } | ||
+ | |||
+ | nav li.dropdown { | ||
+ | display: inline-block; | ||
+ | } | ||
+ | |||
+ | .dropdown-content { | ||
+ | display: none; | ||
+ | position: absolute; | ||
+ | background-color: #f9f9f9; | ||
+ | min-width: 160px; | ||
+ | box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); | ||
+ | z-index: 1; | ||
+ | } | ||
+ | |||
+ | .dropdown-content a { | ||
+ | color: black; | ||
+ | padding: 12px 16px; | ||
+ | text-decoration: none; | ||
+ | display: block; | ||
+ | text-align: left; | ||
+ | } | ||
+ | |||
+ | .dropdown-content a:hover { | ||
+ | background-color: #f1f1f1; | ||
+ | } | ||
+ | |||
+ | .dropdown:hover .dropdown-content { | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | /* nav css end*/ | ||
+ | |||
+ | /* background animation start */ | ||
+ | .head{ | ||
+ | position:fixed; | ||
+ | left:2%; | ||
+ | transform:translateX(500px); | ||
+ | display:block; | ||
+ | text-align:right; | ||
+ | float:right; | ||
+ | height:2000px; | ||
+ | width:1000px; | ||
+ | background:url(https://static.igem.org/mediawiki/2017/7/74/Cguheadsquare.png) -50px -425px no-repeat; | ||
+ | z-index:-1; | ||
+ | transition: 0.5s; | ||
+ | } | ||
+ | |||
+ | .square{ | ||
+ | position:fixed; | ||
+ | top:20%; | ||
+ | left:80%; | ||
+ | display:inline-block; | ||
+ | float:right; | ||
+ | height:40vw; | ||
+ | width:40vw; | ||
+ | background:url(https://static.igem.org/mediawiki/2017/8/89/Cgusquare_2.png) top left no-repeat; | ||
+ | background-size:contain; | ||
+ | z-index:-1; | ||
+ | transition: 0.5s; | ||
+ | } | ||
+ | |||
+ | /* left menu start */ | ||
+ | .leftMenuBack{ | ||
+ | position:fixed; | ||
+ | top:18%; | ||
+ | display:inline-block; | ||
+ | float:left; | ||
+ | width:20vw; | ||
+ | height:89vw; background:url(https://static.igem.org/mediawiki/2017/7/70/LeftMenuBack.png) top left no-repeat; | ||
+ | background-size:contain; | ||
+ | z-index:-2; | ||
+ | } | ||
+ | |||
+ | .leftMenu{ | ||
+ | position:fixed; | ||
+ | top:18%; | ||
+ | display:inline-block; | ||
+ | float:left; | ||
+ | width:10vw; | ||
+ | height:auto; | ||
+ | /*null back ground*/ | ||
+ | background:url(https://static.igem.org/mediawiki/2017/0/0d/Null.png) top left no-repeat; | ||
+ | background-size:contain; | ||
+ | z-index:1; | ||
+ | /* transition: 1s; */ | ||
+ | } | ||
+ | |||
+ | .leftMenu ul { | ||
+ | display: inline-block; | ||
+ | text-align:center; | ||
+ | margin:0px; | ||
+ | padding:0px; | ||
+ | list-style:none; | ||
+ | font-size:13px; | ||
+ | } | ||
+ | |||
+ | .leftMenu li { | ||
+ | float:left; | ||
+ | } | ||
+ | |||
+ | .leftMenu li a { | ||
+ | display:block; | ||
+ | text-decoration:none; | ||
+ | background:url(https://static.igem.org/mediawiki/2017/7/7c/Cgurightmenu.png) top left no-repeat; | ||
+ | float:left; | ||
+ | width:20vw; | ||
+ | height:auto; | ||
+ | text-align:center; | ||
+ | text-indent:-300px; | ||
+ | margin:0px; | ||
+ | } | ||
+ | |||
+ | .leftMenu li.left1 a { | ||
+ | width:20vw; | ||
+ | height:11.9vw; | ||
+ | background:url(https://static.igem.org/mediawiki/2017/c/c7/LeftMenuBio.png) top left no-repeat; | ||
+ | background-size:contain; | ||
+ | } | ||
+ | |||
+ | .leftMenu li.left2 a { | ||
+ | width:10vw; | ||
+ | height:auto; | ||
+ | background:url(https://static.igem.org/mediawiki/2017/e/e3/LeftMenuModel.png) top left no-repeat; | ||
+ | background-size:contain; | ||
+ | } | ||
+ | .leftMenu li.left3 a { | ||
+ | width:10vw; | ||
+ | height:auto; | ||
+ | background:url(https://static.igem.org/mediawiki/2017/2/2f/LeftMenuDevice.png) top left no-repeat; | ||
+ | background-size:contain; | ||
+ | } | ||
+ | |||
+ | .leftMenu li.left4 a { | ||
+ | width:10vw; | ||
+ | height:auto; | ||
+ | background:url(https://static.igem.org/mediawiki/2017/6/68/LeftMenuMarketing.png) top left no-repeat; | ||
+ | background-size:contain; | ||
+ | } | ||
+ | |||
+ | .leftMenu li.left1 a:hover { | ||
+ | width:20vw; | ||
+ | height:11.9vw; | ||
+ | background:url(https://static.igem.org/mediawiki/2017/a/ae/LeftMenuBioB.png) left top no-repeat; | ||
+ | background-size:contain; | ||
+ | } | ||
+ | .leftMenu li.left2 a:hover { | ||
+ | width:10vw; | ||
+ | height:auto; | ||
+ | background:url(https://static.igem.org/mediawiki/2017/2/2f/LeftMenuModelB.png) left top no-repeat; | ||
+ | background-size:contain; | ||
+ | } | ||
+ | .leftMenu li.left2 a:hover { | ||
+ | width:10vw; | ||
+ | height:auto; | ||
+ | background:url(https://static.igem.org/mediawiki/2017/4/48/LeftMenuDeviceB.png) left top no-repeat; | ||
+ | background-size:contain; | ||
+ | } | ||
+ | .leftMenu li.left2 a:hover { | ||
+ | width:10vw; | ||
+ | height:auto; | ||
+ | background:url(https://static.igem.org/mediawiki/2017/3/3f/LeftMenuMarketingB.png) left top no-repeat; | ||
+ | background-size:contain; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | /* right menu start */ | ||
+ | .rightmenuBack{ | ||
+ | position:fixed; | ||
+ | top:18%; | ||
+ | display:inline-block; | ||
+ | float:left; | ||
+ | width:199.5px; | ||
+ | height:430px; | ||
+ | background:url(https://static.igem.org/mediawiki/2017/6/69/Cgurightmenu-back.png) top left no-repeat; | ||
+ | background-size:contain; | ||
+ | z-index:-2; | ||
+ | } | ||
+ | |||
+ | .rightmenu{ | ||
+ | position:fixed; | ||
+ | top:18%; | ||
+ | display:inline-block; | ||
+ | float:left; | ||
+ | width:199.5px; | ||
+ | height:143.33px; | ||
+ | background-size:contain; | ||
+ | z-index:1; | ||
+ | /* transition: 1s; */ | ||
+ | } | ||
+ | |||
+ | .rightmenu ul { | ||
+ | display: inline-block; | ||
+ | text-align:center; | ||
+ | margin:0px; | ||
+ | padding:0px; | ||
+ | list-style:none; | ||
+ | font-size:13px; | ||
+ | } | ||
+ | |||
+ | .rightmenu li { | ||
+ | float:left; | ||
+ | } | ||
+ | |||
+ | .rightmenu li a { | ||
+ | display:block; | ||
+ | text-decoration:none; | ||
+ | background:url(https://static.igem.org/mediawiki/2017/7/7c/Cgurightmenu.png) top left no-repeat; | ||
+ | float:left; | ||
+ | width:199px; | ||
+ | height:143.33px; | ||
+ | text-align:center; | ||
+ | text-indent:-300px; | ||
+ | margin:0px; | ||
+ | } | ||
+ | |||
+ | .rightmenu li.right1 a { | ||
+ | width:199px; | ||
+ | height:143.33px; | ||
+ | background:url(https://static.igem.org/mediawiki/2017/7/7c/Cgurightmenu.png) top left no-repeat; | ||
+ | } | ||
+ | |||
+ | .rightmenu li.right2 a { | ||
+ | width:199px; | ||
+ | height:143.33px; | ||
+ | background:url(https://static.igem.org/mediawiki/2017/7/7c/Cgurightmenu.png) 0px -143.33px no-repeat; | ||
+ | } | ||
+ | |||
+ | .rightmenu li.right3 a { | ||
+ | width:199px; | ||
+ | height:143.33px; | ||
+ | background:url(https://static.igem.org/mediawiki/2017/7/7c/Cgurightmenu.png) 0px -286.66px no-repeat; | ||
+ | } | ||
+ | |||
+ | .rightmenu li.right1 a:hover { | ||
+ | background:url(https://static.igem.org/mediawiki/2017/7/7c/Cgurightmenu.png) -199.5px 0px no-repeat; | ||
+ | } | ||
+ | |||
+ | .rightmenu li.right2 a:hover { | ||
+ | width:199px; | ||
+ | height:143.33px; | ||
+ | background:url(https://static.igem.org/mediawiki/2017/7/7c/Cgurightmenu.png) -199.5px -143.33px no-repeat; | ||
+ | } | ||
+ | |||
+ | .rightmenu li.right3 a:hover { | ||
+ | width:199px; | ||
+ | height:143.33px; | ||
+ | background:url(https://static.igem.org/mediawiki/2017/7/7c/Cgurightmenu.png) -199.5px -286.66px no-repeat; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* right menu end */ | ||
+ | |||
+ | /* background animation end */ | ||
− | + | .description{ | |
+ | margin:auto; | ||
+ | padding-top: 50px; | ||
+ | padding-left: 100px; | ||
+ | padding-right: 100px; | ||
+ | } | ||
− | + | h1{ | |
− | + | color:orange; | |
− | + | text-align:center; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | .description p{ | |
− | + | margin:auto; | |
+ | padding-top: 20px; | ||
+ | padding-left: 120px; | ||
+ | padding-right: 120px; | ||
+ | font-size: 200%; | ||
+ | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | /* footer css start*/ | |
+ | footer{ | ||
+ | width: 100%; | ||
+ | height: 100px; | ||
+ | text-align: right; | ||
+ | box-sizing: border-box; | ||
+ | } | ||
− | + | footer ul{ | |
− | + | display: block; | |
− | + | width: 100%; | |
− | + | height: 100px; | |
− | + | text-align: right; | |
− | + | box-sizing: border-box; | |
− | + | } | |
− | + | ||
− | + | footer ul li{ | |
− | + | display:inline-block; | |
+ | text-decoration: none; | ||
+ | font-size: 15px; | ||
+ | font-family: '微軟正黑體'; | ||
+ | } | ||
− | + | /* footer css end*/ | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | </style> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | </ | + | |
</html> | </html> |
Revision as of 15:00, 18 October 2017