@charset "UTF-8"; @font-face { font-family: 'webfont'; font-display: swap; src: url('//at.alicdn.com/t/webfont_5czx8pbda86.eot'); /* IE9*/ src: url('//at.alicdn.com/t/webfont_5czx8pbda86.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('//at.alicdn.com/t/webfont_5czx8pbda86.woff2') format('woff2'), url('//at.alicdn.com/t/webfont_5czx8pbda86.woff') format('woff'), /* chrome、firefox */ url('//at.alicdn.com/t/webfont_5czx8pbda86.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('//at.alicdn.com/t/webfont_5czx8pbda86.svg#NotoSansHans-DemiLight') format('svg'); /* iOS 4.1- */ } * { padding: 0; margin: 0; font-size: 16px; font-family: 'webfont', ui-serif; } /* 定义好背景 */ /* 配置头部导航 */ .head { width: 100vw; height: 80px; border-bottom: 2px #efefef solid; } .menu-logo { float: left; padding-left: 40px; } .menu-logo .logo { width: 100px; height: 80px; } /* logo */ /* menu */ .menu-item { padding-right: 40px; } .menu-item ul { float: right; list-style: none; display: block; } .menu-item ul li { margin: 0 30px; float: left; line-height: 80px; } .menu-item ul li a { color: #222222; text-decoration: none; } /* checkbox display none*/ #toggler { display: none; } @media all and (max-width: 762px) { /* 汉堡导航样式 */ .check_button { width: 40px; height: 40px; display: block; position: relative; float: right; right: 45px; top: 20px; text-align: center; cursor: pointer; } #toggler { display: none; } /* 设置汉堡导航的导航条 */ .check_button span { display: block; height: 2px; background-color: #000; position: relative; transition: transform .9s ease-in-out; top: 0; text-align: center; } .check_button span:nth-child(2) { margin-top: 7px; } .check_button span:nth-child(3) { margin-top: 7px; } .check_button span:nth-child(4) { margin-top: 7px; } #toggler:checked + label .check_button span:nth-child(1) { top: 10px; transition: top .2s; /*ease-in-out, opacity .8s ease-in-out .4s;*/ height: 1px; } #toggler:checked + label .check_button span:nth-child(2) { top: 6px; transition: top .3s; /*ease-in-out, opacity .8s ease-in-out .4s;*/ height: 1px; } #toggler:checked + label .check_button span:nth-child(3) { top: 3px; transition: top .4s; /*ease-in-out, opacity .8s ease-in-out .4s;*/ height: 2px; } #toggler:checked + label .check_button span:nth-child(4) { top: 0; transition: top .6s; /*ease-in-out, opacity .4s ease-in-out .4s;*/ height: 2px; } .menu-item { background-color: rgba(239, 239, 239, 0.92); width: 100%; height: 100vh; position: absolute; top: 82px; left: 0; transform: scaleY(0); transition: transform .7s ease-in-out, opacity .2s ease-in-out .2s; transform-origin: 50% 0; opacity: 0; z-index: 100; padding: 40px 4%; } #toggler:checked ~ .menu-item { transform: scaleY(1); opacity: 1; } /* 定义汉堡导航后的结果。 */ .menu-list { position: fixed; left: 0; } .menu-list li { width: 300px; display: block; float: left; border-bottom: 3px #000 solid; } } @media (max-width: 1200px) { } /* 定义移动样式 */ /*menu*/ .menu-list span { margin-left: 10px; font-size: 25px; } .man { background-color: #b4b2b2; margin: 15px auto; width: 90%; height: 40%; border-radius: 15px; overflow: hidden; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.12%); } .images { height: 200px; } .images img { width: 100%; display: block; height: inherit; } .title_content_box h1 { margin: 10px; padding: 5px; display: inline-block; font-family: "Helvetica Neue", serif; font-size: 40px; border-bottom: 1px #000000 solid; } [id="text"] p { margin: 0 10px; font-weight: bold; } .time-btn { height: 100px; top: 10px; position: relative; left: 43px; bottom: 10px; text-align: center; } .time-btn tr { position: absolute; left: 0; float: left; display: inline-block; text-align: center; border-bottom: #000000 solid 1px; } .time-btn tr:nth-child(2) { top: 30px; } .time-btn tr:nth-child(3) { top: 60px; } .time-btn tr:nth-child(4) { top: 90px; } .time-btn tr:nth-child(5) { top: 120px; } .time-btn tr:nth-child(6) { top: 150px; } .time-btn td, th { /*display: block;*/ text-align: center; border-right: #000000 solid 1px; } /*时间按钮*/ .top { width: 30px; height: 30px; position: absolute; background-color: #df5000; border: 2px solid #000000; } /* 定义PC样式 */