Line 1: | Line 1: | ||
{{CIEI-BJ}} | {{CIEI-BJ}} | ||
− | <html | + | <html> |
<head> | <head> | ||
<meta charset="UTF-8"> | <meta charset="UTF-8"> | ||
Line 6: | Line 6: | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<title>CIEI-BJ Virtual Tour</title> | <title>CIEI-BJ Virtual Tour</title> | ||
− | + | <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 { font-size: 100%; padding: 0; margin: 0;} | ||
+ | |||
+ | |||
+ | |||
+ | /* Reset */ | ||
+ | |||
+ | *, | ||
+ | |||
+ | *:after, | ||
+ | |||
+ | *:before { | ||
+ | |||
+ | -webkit-box-sizing: border-box; | ||
+ | |||
+ | -moz-box-sizing: border-box; | ||
+ | |||
+ | box-sizing: border-box; | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | /* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */ | ||
+ | |||
+ | .clearfix:before, | ||
+ | |||
+ | .clearfix:after { | ||
+ | |||
+ | content: " "; | ||
+ | |||
+ | display: table; | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | .clearfix:after { | ||
+ | |||
+ | clear: both; | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | body{ | ||
+ | |||
+ | background: #494A5F; | ||
+ | |||
+ | color: #D5D6E2; | ||
+ | |||
+ | font-weight: 500; | ||
+ | |||
+ | font-size: 1.05em; | ||
+ | |||
+ | font-family: "Microsoft YaHei","宋体","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo; | ||
+ | |||
+ | } | ||
+ | |||
+ | a{color: #2fa0ec;text-decoration: none;outline: none;} | ||
+ | |||
+ | a:hover,a:focus{color:#74777b;} | ||
+ | |||
+ | |||
+ | |||
+ | .htmleaf-container{ | ||
+ | |||
+ | margin: 0 auto; | ||
+ | |||
+ | overflow: hidden; | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | .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*/ | ||
+ | |||
+ | .bgcolor-20{ background: #494A5F;color: #D5D6E2;} | ||
+ | |||
+ | /* Header */ | ||
+ | |||
+ | .htmleaf-header{ | ||
+ | |||
+ | padding: 1em 190px 1em; | ||
+ | |||
+ | letter-spacing: -1px; | ||
+ | |||
+ | text-align: center; | ||
+ | |||
+ | } | ||
+ | |||
+ | .htmleaf-header h1 { | ||
+ | |||
+ | color: #fff; | ||
+ | |||
+ | 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: #fff; | ||
+ | |||
+ | } | ||
+ | |||
+ | /*nav*/ | ||
+ | |||
+ | .htmleaf-demo a{color: #fff;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 #fff;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: transparent; | ||
+ | |||
+ | 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"; | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | @media screen and (max-width: 50em) { | ||
+ | |||
+ | .htmleaf-header { | ||
+ | |||
+ | padding: 3em 10% 4em; | ||
+ | |||
+ | } | ||
+ | |||
+ | .htmleaf-header h1 { | ||
+ | |||
+ | font-size:2em; | ||
+ | |||
+ | } | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | @media screen and (max-width: 40em) { | ||
+ | |||
+ | .htmleaf-header h1 { | ||
+ | |||
+ | font-size: 1.5em; | ||
+ | |||
+ | } | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | @media screen and (max-width: 30em) { | ||
+ | |||
+ | .htmleaf-header h1 { | ||
+ | |||
+ | font-size:1.2em; | ||
+ | |||
+ | } | ||
+ | |||
+ | } | ||
+ | </style> | ||
+ | <style> | ||
+ | article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;} | ||
+ | </style> | ||
+ | <style> | ||
+ | /*@import url(https://fonts.googleapis.com/css?family=Righteous);*/ | ||
+ | html, | ||
+ | body { | ||
+ | height: 100%; | ||
+ | margin: 0; | ||
+ | /*font-family: 'Righteous', sans serif;*/ | ||
+ | color: #ffffff; | ||
+ | overflow-y: hidden; | ||
+ | overflow-x: hidden; | ||
+ | } | ||
+ | |||
+ | svg { | ||
+ | position: absolute; | ||
+ | top: 50%; | ||
+ | height: 5em; | ||
+ | width: 5em; | ||
+ | margin-top: -2.5em; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | |||
+ | svg#next { | ||
+ | right: 1em; | ||
+ | } | ||
+ | |||
+ | svg#previous { | ||
+ | display: none; | ||
+ | left: 1em; | ||
+ | } | ||
+ | |||
+ | div.slider { | ||
+ | display: flex; | ||
+ | -webkit-display: flex; | ||
+ | -webkit-align-items: center; | ||
+ | align-items: center; | ||
+ | justify-content: center; | ||
+ | -webkit-justify-content: center; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | position: absolute; | ||
+ | transition: all 1s ease; | ||
+ | -moz-transition: all 1s ease; | ||
+ | -ms-transition: all 1s ease; | ||
+ | -webkit-transition: all 1s ease; | ||
+ | -o-transition: all 1s ease; | ||
+ | } | ||
+ | |||
+ | div.slider h1 { | ||
+ | font-size: 2em; | ||
+ | width: 100%; | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | .zoomout { | ||
+ | transform: scale(0.7); | ||
+ | -moz-transform: scale(0.7); | ||
+ | -webkit-transform: scale(0.7); | ||
+ | -o-transform: scale(0.7); | ||
+ | -ms-transform: scale(0.7); | ||
+ | } | ||
+ | |||
+ | .one { | ||
+ | background-color: #63E89D; | ||
+ | } | ||
+ | |||
+ | .two { | ||
+ | background-color: #65BEFF; | ||
+ | } | ||
+ | |||
+ | .three { | ||
+ | background-color: #EF4264; | ||
+ | } | ||
+ | |||
+ | .four { | ||
+ | background-color: #8F70FD; | ||
+ | } | ||
+ | </style> | ||
</head> | </head> |
Revision as of 15:49, 10 October 2016