Zhu Tingting (Talk | contribs) |
Zhu Tingting (Talk | contribs) |
||
Line 1: | Line 1: | ||
− | <html | + | <!DOCTYPE html> |
− | < | + | <html> |
− | + | <head lang="en"> | |
− | < | + | <meta charset="UTF-8"> |
− | < | + | <title></title> |
− | < | + | <link rel="stylesheet" href="css/animate.min.css" /> |
− | <!-- | + | <script src="https://2018.igem.org/wiki/index.php?title=Template:BGU_Israel/jquery.min&redirect=no"></script> |
− | body { | + | <script src="js/wow.min.js"></script> |
− | + | <script> | |
− | + | $(function(){ | |
− | + | var wow = new WOW({ | |
− | + | boxClass: 'wow', | |
− | + | animateClass: 'animated', | |
− | } | + | offset: 0, |
− | . | + | mobile: true, |
− | + | live: true | |
− | + | }); | |
− | + | wow.init(); | |
− | + | }) | |
− | + | </script> | |
− | + | <!--[if lt IE 9]> | |
− | } | + | <script src="js/html5shiv.min.js"></script> |
− | -- | + | <script src="js/respond.min.js"></script> |
− | + | <![endif]--> | |
− | + | <!--[if lte IE 9]> | |
− | + | <script src="js/jquery.placeholder.js"></script> | |
+ | <script> | ||
+ | $(function() { | ||
+ | $('input, textarea').placeholder({customClass:'my-placeholder'}); | ||
+ | }); | ||
+ | </script> | ||
+ | <![endif]--> | ||
+ | <style> | ||
+ | html { | ||
+ | font-family: sans-serif; | ||
+ | -webkit-text-size-adjust: 100%; | ||
+ | -ms-text-size-adjust: 100%; | ||
+ | } | ||
+ | body { | ||
+ | margin: 0; | ||
+ | } | ||
+ | article, | ||
+ | aside, | ||
+ | details, | ||
+ | figcaption, | ||
+ | figure, | ||
+ | footer, | ||
+ | header, | ||
+ | hgroup, | ||
+ | main, | ||
+ | menu, | ||
+ | nav, | ||
+ | section, | ||
+ | summary { | ||
+ | display: block; | ||
+ | } | ||
+ | audio, | ||
+ | canvas, | ||
+ | progress, | ||
+ | video { | ||
+ | display: inline-block; | ||
+ | vertical-align: baseline; | ||
+ | } | ||
+ | audio:not([controls]) { | ||
+ | display: none; | ||
+ | height: 0; | ||
+ | } | ||
+ | [hidden], | ||
+ | template { | ||
+ | display: none; | ||
+ | } | ||
+ | a { | ||
+ | background-color: transparent; | ||
+ | } | ||
+ | a:active, | ||
+ | a:hover { | ||
+ | outline: 0; | ||
+ | } | ||
+ | abbr[title] { | ||
+ | border-bottom: 1px dotted; | ||
+ | } | ||
+ | b, | ||
+ | strong { | ||
+ | font-weight: bold; | ||
+ | } | ||
+ | dfn { | ||
+ | font-style: italic; | ||
+ | } | ||
+ | h1 { | ||
+ | margin: .67em 0; | ||
+ | font-size: 2em; | ||
+ | } | ||
+ | mark { | ||
+ | color: #000; | ||
+ | background: #ff0; | ||
+ | } | ||
+ | small { | ||
+ | font-size: 80%; | ||
+ | } | ||
+ | sub, | ||
+ | sup { | ||
+ | position: relative; | ||
+ | font-size: 75%; | ||
+ | line-height: 0; | ||
+ | vertical-align: baseline; | ||
+ | } | ||
+ | sup { | ||
+ | top: -.5em; | ||
+ | } | ||
+ | sub { | ||
+ | bottom: -.25em; | ||
+ | } | ||
+ | img { | ||
+ | border: 0; | ||
+ | } | ||
+ | svg:not(:root) { | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | figure { | ||
+ | margin: 1em 40px; | ||
+ | } | ||
+ | hr { | ||
+ | height: 0; | ||
+ | -webkit-box-sizing: content-box; | ||
+ | -moz-box-sizing: content-box; | ||
+ | box-sizing: content-box; | ||
+ | } | ||
+ | pre { | ||
+ | overflow: auto; | ||
+ | } | ||
+ | code, | ||
+ | kbd, | ||
+ | pre, | ||
+ | samp { | ||
+ | font-family: monospace, monospace; | ||
+ | font-size: 1em; | ||
+ | } | ||
+ | button, | ||
+ | input, | ||
+ | optgroup, | ||
+ | select, | ||
+ | textarea { | ||
+ | margin: 0; | ||
+ | font: inherit; | ||
+ | color: inherit; | ||
+ | } | ||
+ | button { | ||
+ | overflow: visible; | ||
+ | } | ||
+ | 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; | ||
+ | } | ||
+ | button::-moz-focus-inner, | ||
+ | input::-moz-focus-inner { | ||
+ | padding: 0; | ||
+ | border: 0; | ||
+ | } | ||
+ | input { | ||
+ | line-height: normal; | ||
+ | } | ||
+ | input[type="checkbox"], | ||
+ | input[type="radio"] { | ||
+ | -webkit-box-sizing: border-box; | ||
+ | -moz-box-sizing: border-box; | ||
+ | box-sizing: border-box; | ||
+ | padding: 0; | ||
+ | } | ||
+ | input[type="number"]::-webkit-inner-spin-button, | ||
+ | input[type="number"]::-webkit-outer-spin-button { | ||
+ | height: auto; | ||
+ | } | ||
+ | input[type="search"] { | ||
+ | -webkit-box-sizing: content-box; | ||
+ | -moz-box-sizing: content-box; | ||
+ | box-sizing: content-box; | ||
+ | -webkit-appearance: textfield; | ||
+ | } | ||
+ | input[type="search"]::-webkit-search-cancel-button, | ||
+ | input[type="search"]::-webkit-search-decoration { | ||
+ | -webkit-appearance: none; | ||
+ | } | ||
+ | fieldset { | ||
+ | padding: .35em .625em .75em; | ||
+ | margin: 0 2px; | ||
+ | border: 1px solid #c0c0c0; | ||
+ | } | ||
+ | legend { | ||
+ | padding: 0; | ||
+ | border: 0; | ||
+ | } | ||
+ | textarea { | ||
+ | overflow: auto; | ||
+ | } | ||
+ | optgroup { | ||
+ | font-weight: bold; | ||
+ | } | ||
+ | table { | ||
+ | border-spacing: 0; | ||
+ | border-collapse: collapse; | ||
+ | |||
+ | } | ||
+ | td, | ||
+ | th { | ||
+ | padding: 0; | ||
+ | } | ||
+ | |||
+ | |||
+ | body { | ||
+ | font-family: "宋体", Helvetica, Arial, sans-serif; | ||
+ | font-size: 12px; | ||
+ | line-height: 1.42857143; | ||
+ | color: #333; | ||
+ | background-color: #fff; | ||
+ | } | ||
+ | input, | ||
+ | button, | ||
+ | select, | ||
+ | textarea { | ||
+ | font-family: inherit; | ||
+ | font-size: inherit; | ||
+ | line-height: inherit; | ||
+ | } | ||
+ | a { | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | a:hover, | ||
+ | a:focus { | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | a:focus { | ||
+ | outline: thin dotted; | ||
+ | outline: 5px auto -webkit-focus-ring-color; | ||
+ | outline-offset: -2px; | ||
+ | } | ||
+ | |||
+ | body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dt,dd,form{ | ||
+ | margin:0; | ||
+ | } | ||
+ | h4,h5,h6{ | ||
+ | font-size:1em; | ||
+ | } | ||
+ | ul,ol{ | ||
+ | padding-left:0; | ||
+ | list-style-type:none; | ||
+ | } | ||
+ | |||
+ | /*common*/ | ||
+ | *:focus {outline: none;} | ||
+ | |||
+ | /* display */ | ||
+ | .dn { display: none; } | ||
+ | .di { display: inline; } | ||
+ | .db { display: block; } | ||
+ | .dib { display: inline-block; } /* if the element is block level(eg. div, li), using 'inline-any' instead */ | ||
+ | |||
+ | |||
+ | .fl{float:left;} | ||
+ | .fr{float:right;} | ||
+ | |||
+ | /* 块状元素水平居中 */ | ||
+ | .auto { margin-left: auto; margin-right: auto; } | ||
+ | |||
+ | /* overflow */ | ||
+ | .ovh { overflow: hidden; } | ||
+ | |||
+ | /* position */ | ||
+ | .rel { position: relative; } | ||
+ | .abs { position: absolute; } | ||
+ | |||
+ | /* font-family */ | ||
+ | .fw { font-family: 'Microsoft Yahei'; } | ||
+ | .fs { font-family: "宋体", Helvetica, Arial, sans-serif; } | ||
+ | |||
+ | |||
+ | /* font-style */ | ||
+ | .n { font-weight: normal; font-style: normal; } | ||
+ | .b { font-weight: bold; } | ||
+ | .i { font-style: italic; } | ||
+ | |||
+ | /* text-align */ | ||
+ | .tc { text-align: center; } | ||
+ | .tr { text-align: right; } | ||
+ | .tl { text-align: left; } | ||
+ | .tj { text-align: justify; } | ||
+ | |||
+ | /* 清除浮 动*/ | ||
+ | .fix { *zoom:1; } | ||
+ | .fix:after { content:" "; display:block; height:0; clear:both; visibility:hidden; font-size:0;} | ||
+ | |||
+ | /*table*/ | ||
+ | table { | ||
+ | width: 100%; | ||
+ | border-collapse: collapse; | ||
+ | } | ||
+ | |||
+ | /* margin */ | ||
+ | .m0 { margin:0 !important; } | ||
+ | .ml0 { margin-left: 0} | ||
+ | .ml1 { margin-left: 1px; } | ||
+ | .ml2 { margin-left: 2px; } | ||
+ | .ml5 { margin-left: 5px; } | ||
+ | .ml10 { margin-left: 10px; } | ||
+ | .ml15 { margin-left: 15px; } | ||
+ | .ml20 { margin-left: 20px; } | ||
+ | .ml25 { margin-left: 25px;} | ||
+ | .ml30 { margin-left: 30px; } | ||
+ | |||
+ | .mr1 { margin-right: 1px; } | ||
+ | .mr2 { margin-right: 2px; } | ||
+ | .mr5 { margin-right: 5px; } | ||
+ | .mr10 { margin-right: 10px; } | ||
+ | .mr15 { margin-right: 15px; } | ||
+ | .mr20 { margin-right: 20px; } | ||
+ | .mr30 { margin-right: 30px; } | ||
+ | |||
+ | .mt1 { margin-top: 1px; } | ||
+ | .mt2 { margin-top: 2px; } | ||
+ | .mt5 { margin-top: 5px; } | ||
+ | .mt10 { margin-top: 10px; } | ||
+ | .mt15 { margin-top: 15px; } | ||
+ | .mt20 { margin-top: 20px; } | ||
+ | .mt25 { margin-top: 25px; } | ||
+ | .mt30 { margin-top: 30px; } | ||
+ | |||
+ | .mb1 { margin-bottom: 1px; } | ||
+ | .mb2 { margin-bottom: 2px; } | ||
+ | .mb5 { margin-bottom: 5px; } | ||
+ | .mb10 { margin-bottom: 10px; } | ||
+ | .mb15 { margin-bottom: 15px; } | ||
+ | .mb20 { margin-bottom: 20px; } | ||
+ | .mb25 { margin-bottom: 25px; } | ||
+ | .mb30 { margin-bottom: 30px; } | ||
+ | |||
+ | /* padding */ | ||
+ | .p0 { padding: 0; } | ||
+ | .p1 { padding: 1px; } | ||
+ | .pl1 { padding-left: 1px; } | ||
+ | .pt1 { padding-top: 1px; } | ||
+ | .pr1 { padding-right: 1px; } | ||
+ | .pb1 { padding-bottom: 1px; } | ||
+ | |||
+ | .p2 { padding: 2px; } | ||
+ | .pl2 { padding-left: 2px; } | ||
+ | .pt2 { padding-top: 2px; } | ||
+ | .pr2 { padding-right: 2px; } | ||
+ | .pb2 { padding-bottom: 2px; } | ||
+ | |||
+ | .pl5 { padding-left: 5px; } | ||
+ | .p5 { padding: 5px; } | ||
+ | .pt5 { padding-top: 5px; } | ||
+ | .pr5 { padding-right: 5px; } | ||
+ | .pb5 { padding-bottom: 5px; } | ||
+ | |||
+ | .p10 { padding: 10px; } | ||
+ | .pl10 { padding-left: 10px; } | ||
+ | .pt10 { padding-top: 10px; } | ||
+ | .pr10 { padding-right: 10px; } | ||
+ | .pb10 { padding-bottom: 10px; } | ||
+ | |||
+ | .p15 { padding: 15px; } | ||
+ | .pl15 { padding-left: 15px; } | ||
+ | .pt15 { padding-top: 15px; } | ||
+ | .pr15 { padding-right: 15px; } | ||
+ | .pb15 { padding-bottom: 15px; } | ||
+ | |||
+ | .p20 { padding: 20px; } | ||
+ | .pl20 { padding-left: 20px; } | ||
+ | .pt20 { padding-top: 20px; } | ||
+ | .pr20 { padding-right: 20px; } | ||
+ | .pb20 { padding-bottom: 20px; } | ||
+ | |||
+ | .p30 { padding: 30px; } | ||
+ | .pl30 { padding-left: 30px; } | ||
+ | .pt30 { padding-top: 30px; } | ||
+ | .pr30 { padding-right: 30px; } | ||
+ | .pb30 { padding-bottom: 30px; } | ||
+ | |||
+ | /* vertical-align */ | ||
+ | .vm { vertical-align: middle; } | ||
+ | .vtb { vertical-align: text-bottom; } | ||
+ | .vb { vertical-align: bottom; } | ||
+ | .vt { vertical-align: top; } | ||
+ | .vn { vertical-align: -2px; } | ||
+ | |||
+ | .bgnone{background:none !important;} | ||
+ | .bnone{border:none !important;} | ||
+ | |||
+ | |||
+ | |||
+ | body{ | ||
+ | font-family: "Microsoft Yahei", Helvetica, Arial, sans-serif; | ||
+ | } | ||
+ | .container{ | ||
+ | width: 1200px; | ||
+ | min-width: 1200px; | ||
+ | margin-right: auto; | ||
+ | margin-left: auto; | ||
+ | } | ||
+ | |||
+ | .shortcut{ | ||
+ | height: 24px; | ||
+ | line-height: 24px; | ||
+ | padding-top: 16px; | ||
+ | } | ||
+ | .shortcut a{ | ||
+ | color: #808080; | ||
+ | -webkit-transition: all 0.3s ease 0s; | ||
+ | -moz-transition: all 0.3s ease 0s; | ||
+ | -o-transition: all 0.3s ease 0s; | ||
+ | transition: all 0.3s ease 0s; | ||
+ | } | ||
+ | .shortcut a img{ | ||
+ | margin-right: 5px; | ||
+ | } | ||
+ | .shortcut a:hover{ | ||
+ | color: #8e2322; | ||
+ | } | ||
+ | .header{ | ||
+ | width: 100%; | ||
+ | min-width: 1200px; | ||
+ | height: 110px; | ||
+ | background: #fff; | ||
+ | } | ||
+ | .logo{ | ||
+ | width: 259px; | ||
+ | height: 77px; | ||
+ | } | ||
+ | .logo img{ | ||
+ | display: block; | ||
+ | width: 259px; | ||
+ | height: 77px; | ||
+ | } | ||
+ | |||
+ | /*nav*/ | ||
+ | nav a{ | ||
+ | display: inline-block; | ||
+ | height: 38px; | ||
+ | line-height: 38px; | ||
+ | margin-right: 43px; | ||
+ | margin-left: 43px; | ||
+ | font-size: 16px; | ||
+ | color: #333; | ||
+ | -webkit-transition: all 0.3s ease 0s; | ||
+ | -moz-transition: all 0.3s ease 0s; | ||
+ | -o-transition: all 0.3s ease 0s; | ||
+ | transition: all 0.3s ease 0s; | ||
+ | } | ||
+ | nav a:hover, | ||
+ | nav .on{ | ||
+ | color: #8e2322; | ||
+ | } | ||
+ | </style> | ||
</head> | </head> | ||
− | + | <body> | |
− | + | <!--header--> | |
− | + | <section class="container"> | |
− | + | <div class="shortcut fix"> | |
− | <div class=" | + | <div class="fl"> |
− | + | <a href="#" class="mr15"> | |
− | < | + | <img src="images/icon_1.png" class="vm" /> |
− | + | <img src="images/icon_1h.png" class="vm dn" /> | |
− | + | 门店查询 | |
− | + | </a> | |
− | + | <a href="#" class="mr15"> | |
− | + | <img src="images/icon_2.png" class="vm" /> | |
− | </ | + | <img src="images/icon_2h.png" class="vm dn" /> |
− | < | + | 联系我们 |
− | + | </a> | |
− | + | </div> | |
− | + | <div class="fr"> | |
− | + | <a href="#" class="ml15"> | |
− | + | <img src="images/icon_3.png" class="vm" /> | |
− | </ | + | <img src="images/icon_3h.png" class="vm dn" /> |
− | + | 品牌加盟 | |
− | + | </a> | |
− | < | + | <a href="#" class="ml15"> |
− | < | + | <img src="images/icon_4.png" class="vm" /> |
− | + | <img src="images/icon_4h.png" class="vm dn" /> | |
− | / | + | 售后服务 |
− | </ | + | </a> |
− | + | <a href="#" class="ml15"> | |
− | + | <img src="images/icon_5.png" class="vm" /> | |
+ | <img src="images/icon_5h.png" class="vm dn" /> | ||
+ | 搜索 | ||
+ | </a> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="logo auto mb20"><a href="#"><img src="https://static.igem.org/mediawiki/2018/8/88/T--BCU--navpic.jpg" /></a></div> | ||
+ | <nav class="tc mb15"> | ||
+ | <a href="#" class="on">首页</a> | ||
+ | <a href="#">系列</a> | ||
+ | <a href="#">新品</a> | ||
+ | <a href="#">类别</a> | ||
+ | <a href="#">传承</a> | ||
+ | <a href="#">新闻</a> | ||
+ | <a href="#">商学院</a> | ||
+ | </nav> | ||
+ | </section> | ||
+ | <!--header end--> | ||
</body> | </body> | ||
</html> | </html> |
Revision as of 06:30, 26 July 2018
<!DOCTYPE html>