Line 3: | Line 3: | ||
<html xmlns="http://www.w3.org/1999/xhtml"> | <html xmlns="http://www.w3.org/1999/xhtml"> | ||
<head> | <head> | ||
+ | <meta charset="UTF-8" /> | ||
+ | <meta http-equiv="X-UA-Compatible" content="IE=edge"><!--ie使用edge渲染模式--> | ||
+ | <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" id="viewport" name="viewport"> | ||
+ | <meta name="renderer" content="webkit"><!--360渲染模式--> | ||
+ | <meta name="format-detection" content="telephone=notelphone=no, email=no" /> | ||
+ | <meta name="description" content="" /> | ||
+ | <meta name="keywords" content="" /> | ||
+ | <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> | ||
+ | <meta name="apple-touch-fullscreen" content="yes"><!-- 是否启用 WebApp 全屏模式,删除苹果默认的工具栏和菜单栏 --> | ||
+ | <meta name="apple-mobile-web-app-status-bar-style" content="black"><!-- 设置苹果工具栏颜色:默认值为 default,可以定为 black和 black-translucent--> | ||
+ | <meta http-equiv="Cache-Control" content="no-siteapp" /><!-- 不让百度转码 --> | ||
+ | <meta name="HandheldFriendly" content="true"><!-- 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓 --> | ||
+ | <meta name="MobileOptimized" content="320"><!-- 微软的老式浏览器 --> | ||
+ | <meta name="screen-orientation" content="portrait"><!-- uc强制竖屏 --> | ||
+ | <meta name="x5-orientation" content="portrait"><!-- QQ强制竖屏 --> | ||
+ | <meta name="browsermode" content="application"><!-- UC应用模式 --> | ||
+ | <meta name="x5-page-mode" content="app"><!-- QQ应用模式 --> | ||
+ | <meta name="msapplication-tap-highlight" content="no"><!-- windows phone 点击无高光 --> | ||
+ | <title>IGEM-WHU</title> | ||
+ | |||
+ | |||
+ | <!--slider--> | ||
+ | <style> | ||
+ | @charset "utf-8"; | ||
+ | |||
+ | *{ | ||
+ | box-sizing: border-box; | ||
+ | } | ||
+ | body,div,p,h1{ | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | } | ||
+ | img{ | ||
+ | border: 0; | ||
+ | display: block; | ||
+ | max-width: 100%; | ||
+ | vertical-align: middle; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | .js-silder{ | ||
+ | position: relative; | ||
+ | min-width: 320px; | ||
+ | } | ||
+ | .silder-scroll{ | ||
+ | width: 100%; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | .silder-main{ | ||
+ | position: relative; | ||
+ | width: 100%; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | .silder-main-img{ | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | width: 100%; | ||
+ | } | ||
+ | .silder-main-img img{ | ||
+ | width: 100%; | ||
+ | } | ||
+ | .js-silder-ctrl{ | ||
+ | width: 100%; | ||
+ | text-align: center; | ||
+ | } | ||
+ | .silder-ctrl-prev, | ||
+ | .silder-ctrl-next{ | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | width: 8%; | ||
+ | height: 100%; | ||
+ | vertical-align: middle; | ||
+ | cursor: pointer; | ||
+ | color: #fff; | ||
+ | font-family: "宋体"; | ||
+ | font-size: 52px; | ||
+ | font-weight: 600; | ||
+ | text-shadow: #666 2px 2px 5px; | ||
+ | } | ||
+ | .silder-ctrl-prev{ | ||
+ | left: 0; | ||
+ | text-align: left; | ||
+ | } | ||
+ | .silder-ctrl-next{ | ||
+ | right: 0; | ||
+ | text-align: right; | ||
+ | } | ||
+ | .silder-ctrl-prev>span, | ||
+ | .silder-ctrl-next>span{ | ||
+ | position: absolute; | ||
+ | top: 50%; | ||
+ | margin-top: -40px; | ||
+ | } | ||
+ | .silder-ctrl-prev>span{ | ||
+ | left: 0; | ||
+ | } | ||
+ | .silder-ctrl-next>span{ | ||
+ | right: 0; | ||
+ | } | ||
+ | .silder-ctrl-con{ | ||
+ | display: inline-block; | ||
+ | width: 4%; | ||
+ | padding: 10px 0; | ||
+ | margin: 0 10px; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | .silder-ctrl-con>span{ | ||
+ | display: block; | ||
+ | line-height: 0; | ||
+ | text-indent: -9999px; | ||
+ | overflow: hidden; | ||
+ | padding: 5px 0; | ||
+ | cursor: pointer; | ||
+ | background-color: #e4e4e4; | ||
+ | } | ||
+ | .silder-ctrl-con.active>span{ | ||
+ | background-color: #7bbedf; | ||
+ | } | ||
+ | |||
+ | @media (max-width: 768px){ | ||
+ | .silder-ctrl-prev, | ||
+ | .silder-ctrl-next{ | ||
+ | width: 10%; | ||
+ | font-size: 26px; | ||
+ | margin-top: -25px; | ||
+ | } | ||
+ | .silder-ctrl-con{ | ||
+ | width: 14px; | ||
+ | height: 14px; | ||
+ | padding: 0; | ||
+ | margin: 0 5px; | ||
+ | } | ||
+ | .silder-ctrl-con>span{ | ||
+ | display: block; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | border-radius: 50%; | ||
+ | padding: 0; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | </style> | ||
<!---main----> | <!---main----> | ||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
Revision as of 13:55, 3 October 2018
It is well-known that every coin has two sides. For many precious resources we are using now, the same theory applies. We named them Coin Chemicals (CC). On the one hand, CC act as vital materials and show a great side; on the other hand, they become dangerous evil to the environment once the improper emission or leakage happens.