<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>单屏布局</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="keywords" content="123"> <meta name="description" content="321"> <meta name="robots" content="all"> <meta name="baiduspider" content="all"> <meta name="googlebot" content="all"> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> <meta name="renderer" content="webkit"> <meta name="format-detection" content="telephone=no" /> <script> /* 根据窗口宽度自动计算html基准字体大小，用于移动端弹性布局 */ (function (){ var docEl = document.documentElement, docBody = document.body, baseFontSize = 100, pageMaxWidth = 750, rootHtml = document.getElementsByTagName('html')[0], resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = Math.min( docEl.clientWidth || docBody.clientWidth, window.innerWidth, pageMaxWidth ); var resFont = baseFontSize * (clientWidth / pageMaxWidth); rootHtml.style.fontSize = resFont + 'px'; }; if (!window.addEventListener) return; window.addEventListener(resizeEvt, recalc, false); recalc(); })(); </script> <style type="text/css"> *{ margin: 0px; padding: 0px; } body{ background-color: #000; color: #fff; font-size: 0.32rem; } a{ text-decoration: none; } .full-screen{ position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; z-index: 1; } .wrapper{ position: absolute; text-align: center; } .wrapper-top,.wrapper-middle,.wrapper-bottom{ position: absolute; left: 0px; width: 100%; font-size: 0.16rem; } .wrapper-middle{ top: 50%; transform: translateY(-50%); font-size: 0px; } .wrapper-top{ position: absolute; left: 0px; width: 100%; bottom: 58%; z-index: 3; } .wrapper-bottom{ position: absolute; left: 0px; width: 100%; top: 58%; bottom: 0px; z-index: 2; } .wrapper-middle .dotted{ width: 0.24rem; height: 0.24rem; border: 0.04rem solid #ff7019; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; font-size: 0px; margin-right: 0.16rem; display: inline-block; } .wrapper-middle .dotted:last-child{ margin-right: 0px; } .wrapper-top .wait-wrapper{ font-size: 1.5em; } .wrapper-top .title { letter-spacing: 1px; } .wrapper-top .wait-times { margin-top: 0.32rem; text-align: center; } .wrapper-top .wait-times>li { display: inline-block; padding: 0.3rem 0.24rem 0; position: relative; width: 17%; } .wrapper-top .wait-times p.units { position: absolute; top: 0px; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } @font-face { font-family: 'Condensed'; src: url("//qidian.gtimg.com/activity/2018/20180316/fonts/Condensed-21c5e01496.woff2") format("woff2"), url("//qidian.gtimg.com/activity/2018/20180316/fonts/Condensed-6d6551d03e.woff") format("woff"), url("//qidian.gtimg.com/activity/2018/20180316/fonts/Condensed-69450615f7.ttf") format("truetype"), url("//qidian.gtimg.com/activity/2018/20180316/fonts/Condensed-4c6dea1ea0.svg") format("svg"); font-weight: normal; font-style: normal; } .wrapper-top .wait-times .gradient-time { font-size: 1rem; font-weight: bold; line-height: 1.1; font-family: "Condensed"; padding-top: 0.2rem; } .wrapper-top .title1{ padding: 0 1%; font-size: 0.32rem; margin-bottom: 0.2rem; } @font-face { font-family: 'main3161'; src: url("//qidian.gtimg.com/activity/2018/20180316/fonts/main3161-3fd57dd20d.woff2") format("woff2"), url("//qidian.gtimg.com/activity/2018/20180316/fonts/main3161-b91191f345.woff") format("woff"), url("//qidian.gtimg.com/activity/2018/20180316/fonts/main3161.ttf") format("truetype"), url("//qidian.gtimg.com/activity/2018/20180316/fonts/main3161-ae9661d96e.svg") format("svg"); font-weight: normal; font-style: normal; } .wrapper-top .descs{ padding: 0 1%; font-size: 1.12rem; margin-bottom: 0.1rem; line-height: 1.2; font-family: 'main3161'; } .wrapper-bottom{ font-size: 0.24rem; line-height: 2; } .wrapper-bottom .title{ color: #ff7019; font-size: 0.32rem; } .wrapper-bottom .desc{ } .wrapper-bottom .answer-btn{ margin: 0.32rem auto; width: 3.6rem; line-height: 0.88rem; background-color: #ff7019; color: #fff; display: block; font-size: 0.32rem; letter-spacing: 2px; font-family: 'main316'; } .wrapper-bottom .array-btn{ color: #ff7019; border-bottom: 1px solid currentColor; font-size: 0.32rem; } .wrapper-bottom .design{ position: absolute; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); bottom: 0.48rem; opacity: 0.25; white-space: nowrap; } </style> </head> <body class = "full-screen"> <div class="wrapper full-screen"> <div class = "wrapper-top"> <div class = "title1">第三届 | 2018.03.16</div> <div class = "descs"> 再出发 </div> <div class="wait-wrapper"> <h3 class="title">距离开始还有</h3> <ul class="wait-times"><li> <p class="units">DAYS</p> <p class="gradient-time">01</p> </li><li> <p class="units">HOURS</p> <p class="gradient-time">02</p> </li><li> <p class="units">MINUTES</p> <p class="gradient-time">44</p> </li><li> <p class="units">SECONDS</p> <p class="gradient-time">00</p> </li></ul> </div> </div> <div class = "wrapper-middle"><span class = "dotted"></span><span class = "dotted"></span><span class = "dotted"></span></div> <div class = "wrapper-bottom"> <p class="title">【请大声说出】你心目中的“进取”？</p> <p class="desc">参与互动留言，随机赠送专属定制礼品！<br>更有机会现场上墙，“对话”CEO~</p> <a class="answer-btn" href="javascript:;" title="我来回答">我来回答</a> <a class="array-btn" href="javascript:;" title="查看会议日程">查看会议日程</a> <p class="design">- DESIGN BY YUX -</p> </div> </div> </body> </html>
来源：博客园
作者：coco姜
链接：https://www.cnblogs.com/objectjj/p/11475758.html