Line 1: | Line 1: | ||
− | <html lang=""> | + | <html lang="zh" class="no-js"> |
− | + | <head> | |
− | + | <meta charset="UTF-8"> | |
− | + | <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | |
− | + | <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
− | + | <title>创意堆叠式导航菜单UI界面设计|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库</title> | |
− | + | <link href="http://cdn.bootcss.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"> | |
− | + | <!-- <link rel="stylesheet" type="text/css" href="css/default.css" />--> | |
− | + | <link rel="stylesheet" type="text/css" href="https://2019.igem.org/Template:Tongji_Software/css/component_css?action=raw&ctype=text/css"/> | |
− | + | <script src="https://2019.igem.org/Template:Tongji_Software/js/modernizr_custom_js?action=raw&ctype=text/javascript"></script> | |
− | + | <style> | |
+ | @font-face { | ||
+ | /*font-family: 'icomoon';*/ | ||
+ | /*src:*/ | ||
+ | /* url('../fonts/icomoon.eot?rretjt');*/ | ||
+ | /* src:url('../fonts/icomoon.eot?#iefixrretjt') format('embedded-opentype'),*/ | ||
+ | /* url('../fonts/icomoon.woff?rretjt') format('woff'),*/ | ||
+ | /* url('../fonts/icomoon.ttf?rretjt') format('truetype'),*/ | ||
+ | /* url('../fonts/icomoon.svg?rretjt#icomoon') format('svg');*/ | ||
+ | font-weight: normal; | ||
+ | font-style: normal; | ||
+ | } | ||
+ | |||
+ | [class^="icon-"], [class*=" icon-"] { | ||
+ | /*font-family: 'icomoon';*/ | ||
+ | speak: none; | ||
+ | font-style: normal; | ||
+ | font-weight: normal; | ||
+ | font-variant: normal; | ||
+ | text-transform: none; | ||
+ | line-height: 1; | ||
+ | |||
+ | /* Better Font Rendering =========== */ | ||
+ | -webkit-font-smoothing: antialiased; | ||
+ | -moz-osx-font-smoothing: grayscale; | ||
+ | } | ||
+ | |||
+ | body, html { padding: 0; margin: 0;} | ||
+ | |||
+ | /* Reset */ | ||
+ | *, | ||
+ | *:after, | ||
+ | *:before { | ||
+ | -webkit-box-sizing: border-box; | ||
+ | -moz-box-sizing: border-box; | ||
+ | box-sizing: border-box; | ||
+ | } | ||
+ | |||
+ | .cf:before, | ||
+ | .cf:after { | ||
+ | content: ' '; | ||
+ | display: table; | ||
+ | } | ||
+ | |||
+ | .cf:after { | ||
+ | clear: both; | ||
+ | } | ||
+ | |||
+ | body { | ||
+ | font-family: 'Avenir Next', Avenir, 'Helvetica Neue', 'Lato', 'Segoe UI', Helvetica, Arial, sans-serif; | ||
+ | margin: 0; | ||
+ | color: #cecece; | ||
+ | background: #1d1e21; | ||
+ | -webkit-font-smoothing: antialiased; | ||
+ | -moz-osx-font-smoothing: grayscale; | ||
+ | } | ||
+ | |||
+ | a { | ||
+ | text-decoration: none; | ||
+ | color: #5c5edc; | ||
+ | outline: none; | ||
+ | } | ||
+ | |||
+ | a:hover { | ||
+ | color: #fff; | ||
+ | } | ||
+ | |||
+ | .bgcolor-1 { background: #f0efee; } | ||
+ | .bgcolor-2 { background: #f9f9f9; } | ||
+ | .bgcolor-3 { background: #e8e8e8; }/*light grey*/ | ||
+ | .bgcolor-4 { background: #2f3238; color: #fff; }/*Dark grey*/ | ||
+ | .bgcolor-5 { background: #df6659; color: #521e18; }/*pink1*/ | ||
+ | .bgcolor-6 { background: #2fa8ec; }/*sky blue*/ | ||
+ | .bgcolor-7 { background: #d0d6d6; }/*White tea*/ | ||
+ | .bgcolor-8 { background: #3d4444; color: #fff; }/*Dark grey2*/ | ||
+ | .bgcolor-9 { background: #ef3f52; color: #fff;}/*pink2*/ | ||
+ | .bgcolor-10{ background: #64448f; color: #fff;}/*Violet*/ | ||
+ | .bgcolor-11{ background: #3755ad; color: #fff;}/*dark blue*/ | ||
+ | .bgcolor-12{ background: #3498DB; color: #fff;}/*light blue*/ | ||
+ | /* Header */ | ||
+ | .htmleaf-header{ | ||
+ | padding: 6em 10vw 2em; | ||
+ | } | ||
+ | .htmleaf-header h1 { | ||
+ | font-weight: 600; | ||
+ | font-size: 2em; | ||
+ | line-height: 1; | ||
+ | margin-bottom: 0; | ||
+ | font-family: "Microsoft YaHei","宋体","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo; | ||
+ | } | ||
+ | .htmleaf-header h1 span { | ||
+ | font-family: "Microsoft YaHei","宋体","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo; | ||
+ | display: block; | ||
+ | font-size: 60%; | ||
+ | font-weight: 400; | ||
+ | padding: 0.8em 0 0.5em 0; | ||
+ | color: #c3c8cd; | ||
+ | } | ||
+ | .bp-header { | ||
+ | padding: 6em 10vw 2em; | ||
+ | } | ||
+ | |||
+ | .bp-header__title { | ||
+ | font-size: 2.125em; | ||
+ | font-weight: 700; | ||
+ | line-height: 1.3; | ||
+ | margin: 0; | ||
+ | letter-spacing: 2px; | ||
+ | text-transform: uppercase; | ||
+ | color: #fff; | ||
+ | } | ||
+ | |||
+ | .bp-header__desc { | ||
+ | font-size: 0.95em; | ||
+ | margin: 0.5em 0 1em; | ||
+ | padding: 0; | ||
+ | } | ||
+ | |||
+ | .bp-header__present { | ||
+ | font-size: 0.85em; | ||
+ | font-weight: 700; | ||
+ | position: relative; | ||
+ | z-index: 100; | ||
+ | display: block; | ||
+ | padding: 0 0 0.6em 0.1em; | ||
+ | letter-spacing: 0.5em; | ||
+ | text-transform: uppercase; | ||
+ | color: #5c5edc; | ||
+ | } | ||
+ | |||
+ | /*nav*/ | ||
+ | .htmleaf-demo a{color: #1d7db1;text-decoration: none;} | ||
+ | .htmleaf-demo{width: 100%;padding-bottom: 1.2em;} | ||
+ | .htmleaf-demo a{display: inline-block;margin: 0.5em;padding: 0.6em 1em;border: 3px solid #1d7db1;font-weight: 700;} | ||
+ | .htmleaf-demo a:hover{opacity: 0.6;} | ||
+ | .htmleaf-demo a.current{background:#1d7db1;color: #fff; } | ||
+ | /* Top Navigation Style */ | ||
+ | .htmleaf-links { | ||
+ | position: relative; | ||
+ | display: inline-block; | ||
+ | white-space: nowrap; | ||
+ | font-size: 1.5em; | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | .htmleaf-links::after { | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | left: 50%; | ||
+ | margin-left: -1px; | ||
+ | width: 2px; | ||
+ | height: 100%; | ||
+ | background: #dbdbdb; | ||
+ | content: ''; | ||
+ | -webkit-transform: rotate3d(0,0,1,22.5deg); | ||
+ | transform: rotate3d(0,0,1,22.5deg); | ||
+ | } | ||
+ | |||
+ | .htmleaf-icon { | ||
+ | display: inline-block; | ||
+ | margin: 0.5em; | ||
+ | padding: 0em 0; | ||
+ | width: 1.5em; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | .htmleaf-icon span { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | .htmleaf-icon:before { | ||
+ | margin: 0 5px; | ||
+ | text-transform: none; | ||
+ | font-weight: normal; | ||
+ | font-style: normal; | ||
+ | font-variant: normal; | ||
+ | /*font-family: 'icomoon';*/ | ||
+ | line-height: 1; | ||
+ | speak: none; | ||
+ | -webkit-font-smoothing: antialiased; | ||
+ | } | ||
+ | /* footer */ | ||
+ | .htmleaf-footer{width: 100%;padding-top: 10px;} | ||
+ | .htmleaf-small{font-size: 0.8em;} | ||
+ | .center{text-align: center;} | ||
+ | /****/ | ||
+ | .related { | ||
+ | color: #fff; | ||
+ | background: #333; | ||
+ | text-align: center; | ||
+ | font-size: 1.25em; | ||
+ | padding: 0.5em 0; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | |||
+ | .related > a { | ||
+ | vertical-align: top; | ||
+ | width: calc(100% - 20px); | ||
+ | max-width: 340px; | ||
+ | display: inline-block; | ||
+ | text-align: center; | ||
+ | margin: 20px 10px; | ||
+ | padding: 25px; | ||
+ | font-family: "Microsoft YaHei","宋体","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo; | ||
+ | } | ||
+ | .related a { | ||
+ | display: inline-block; | ||
+ | text-align: left; | ||
+ | margin: 20px auto; | ||
+ | padding: 10px 20px; | ||
+ | opacity: 0.8; | ||
+ | -webkit-transition: opacity 0.3s; | ||
+ | transition: opacity 0.3s; | ||
+ | -webkit-backface-visibility: hidden; | ||
+ | } | ||
+ | |||
+ | .related a:hover, | ||
+ | .related a:active { | ||
+ | opacity: 1; | ||
+ | } | ||
+ | |||
+ | .related a img { | ||
+ | max-width: 100%; | ||
+ | opacity: 0.8; | ||
+ | border-radius: 4px; | ||
+ | } | ||
+ | .related a:hover img, | ||
+ | .related a:active img { | ||
+ | opacity: 1; | ||
+ | } | ||
+ | .related h3{font-family: "Microsoft YaHei", sans-serif;} | ||
+ | .related a h3 { | ||
+ | font-weight: 300; | ||
+ | margin-top: 0.15em; | ||
+ | color: #fff; | ||
+ | } | ||
+ | /* icomoon */ | ||
+ | .icon-htmleaf-home-outline:before { | ||
+ | content: "\e5000"; | ||
+ | } | ||
+ | |||
+ | .icon-htmleaf-arrow-forward-outline:before { | ||
+ | content: "\e5001"; | ||
+ | } | ||
+ | .bp-nav { | ||
+ | margin: 0 0 0 -0.75em; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | @media screen and (max-width: 40em) { | ||
+ | .bp-header { | ||
+ | padding: 50px 20px 1em; | ||
+ | } | ||
+ | .bp-header__title { | ||
+ | font-size: 1.8em; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | |||
+ | </style> | ||
+ | </head> | ||
+ | <body> | ||
+ | |||
+ | <!-- navigation --> | ||
+ | <nav class="pages-nav"> | ||
+ | <div class="pages-nav__item"><a class="link link--page" href="#page-home">Home</a></div> | ||
+ | <div class="pages-nav__item"><a class="link link--page" href="#page-docu">Documentation</a></div> | ||
+ | <div class="pages-nav__item"><a class="link link--page" href="#page-manuals">Manuals</a></div> | ||
+ | <div class="pages-nav__item"><a class="link link--page" href="#page-software">Software</a></div> | ||
+ | <div class="pages-nav__item"><a class="link link--page" href="#page-custom">Customization & Settings</a></div> | ||
+ | <div class="pages-nav__item"><a class="link link--page" href="#page-training">Training</a></div> | ||
+ | <div class="pages-nav__item pages-nav__item--small"><a class="link link--page link--faded" href="#page-buy">Where to buy</a></div> | ||
+ | <div class="pages-nav__item pages-nav__item--small"><a class="link link--page link--faded" href="#page-blog">Blog & News</a></div> | ||
+ | <div class="pages-nav__item pages-nav__item--small"><a class="link link--page link--faded" href="#page-contact">Contact</a></div> | ||
+ | <div class="pages-nav__item pages-nav__item--social"> | ||
+ | <a class="link link--social link--faded" href="#"><i class="fa fa-twitter"></i><span class="text-hidden">Twitter</span></a> | ||
+ | <a class="link link--social link--faded" href="#"><i class="fa fa-linkedin"></i><span class="text-hidden">LinkedIn</span></a> | ||
+ | <a class="link link--social link--faded" href="#"><i class="fa fa-facebook"></i><span class="text-hidden">Facebook</span></a> | ||
+ | <a class="link link--social link--faded" href="#"><i class="fa fa-youtube-play"></i><span class="text-hidden">YouTube</span></a> | ||
+ | </div> | ||
+ | </nav> | ||
+ | <!-- /navigation--> | ||
+ | <!-- pages stack --> | ||
+ | <div class="pages-stack"> | ||
+ | <!-- page --> | ||
+ | <div class="page" id="page-home"> | ||
+ | <!-- Blueprint header --> | ||
+ | <header class="bp-header cf"> | ||
+ | <h1 class="bp-header__title">徐博女装HOME</h1> | ||
+ | <nav class="bp-nav"> | ||
+ | </nav> | ||
+ | </header> | ||
+ | <img class="poster" src="images/1.jpg" alt="img01" /> | ||
+ | </div> | ||
+ | <!-- /pages --> | ||
+ | |||
+ | <div class="page" id="page-docu"> | ||
+ | <header class="bp-header cf"> | ||
+ | <h1 class="bp-header__title">Documentation</h1> | ||
+ | </header> | ||
+ | <img class="poster" src="images/6.jpg" alt="img06" /> | ||
+ | </div> | ||
+ | |||
+ | <!-- <div class="page" id="page-manuals">--> | ||
+ | <!-- <header class="bp-header cf">--> | ||
+ | <!-- <h1 class="bp-header__title">Manuals</h1>--> | ||
+ | <!-- </header>--> | ||
+ | <!-- <img class="poster" src="images/2.jpg" alt="img02" />--> | ||
+ | <!-- </div>--> | ||
+ | |||
+ | <!-- <div class="page" id="page-software">--> | ||
+ | <!-- <header class="bp-header cf">--> | ||
+ | <!-- <h1 class="bp-header__title">Software & Downloads</h1>--> | ||
+ | |||
+ | <!-- </header>--> | ||
+ | <!-- <img class="poster" src="images/3.jpg" alt="img03" />--> | ||
+ | <!-- </div>--> | ||
+ | |||
+ | <!-- <div class="page" id="page-custom">--> | ||
+ | <!-- <header class="bp-header cf">--> | ||
+ | <!-- <h1 class="bp-header__title">Customization & Settings</h1>--> | ||
+ | <!-- </header>--> | ||
+ | <!-- <img class="poster" src="images/4.jpg" alt="img04" />--> | ||
+ | <!-- </div>--> | ||
+ | |||
+ | <!-- <div class="page" id="page-training">--> | ||
+ | <!-- <header class="bp-header cf">--> | ||
+ | <!-- <h1 class="bp-header__title">Training & Learning Center</h1>--> | ||
+ | <!-- </header>--> | ||
+ | <!-- <img class="poster" src="images/5.jpg" alt="img05" />--> | ||
+ | <!-- </div>--> | ||
+ | |||
+ | <!-- <div class="page" id="page-buy">--> | ||
+ | <!-- <header class="bp-header cf">--> | ||
+ | <!-- <h1 class="bp-header__title">Where to buy</h1>--> | ||
+ | <!-- </header>--> | ||
+ | <!-- <img class="poster" src="images/6.jpg" alt="img06" />--> | ||
+ | <!-- </div>--> | ||
+ | |||
+ | <!-- <div class="page" id="page-blog">--> | ||
+ | <!-- <header class="bp-header cf">--> | ||
+ | <!-- <h1 class="bp-header__title">Blog & News</h1>--> | ||
+ | <!-- </header>--> | ||
+ | <!-- <img class="poster" src="images/1.jpg" alt="img01" />--> | ||
+ | <!-- </div>--> | ||
+ | |||
+ | <!-- <div class="page" id="page-contact">--> | ||
+ | <!-- <header class="bp-header cf">--> | ||
+ | <!-- <h1 class="bp-header__title">Contact</h1>--> | ||
+ | |||
+ | <!-- </header>--> | ||
+ | <!-- <img class="poster" src="images/4.jpg" alt="img04" />--> | ||
+ | <!-- </div>--> | ||
+ | |||
+ | </div> | ||
+ | <!-- /pages-stack --> | ||
+ | <button class="menu-button"><span>Menu</span></button> | ||
+ | <!-- <script src="js/classie.js"></script>--> | ||
+ | <!-- <script src="js/main.js"></script>--> | ||
+ | <script src="https://2019.igem.org/Template:Tongji_Software/js/main_old_js?action=raw&ctype=text/javascript"></script> | ||
+ | <script src="https://2019.igem.org/Template:Tongji_Software/js/classie_js?action=raw&ctype=text/javascript"></script> | ||
+ | </body> | ||
</html> | </html> |
Revision as of 14:55, 8 October 2019