<!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;
100%;
font-size: 0.16rem;
}
.wrapper-middle{
top: 50%;
transform: translateY(-50%);
font-size: 0px;
}
.wrapper-top{
position: absolute;
left: 0px;
100%;
bottom: 58%;
z-index: 3;
}
.wrapper-bottom{
position: absolute;
left: 0px;
100%;
top: 58%;
bottom: 0px;
z-index: 2;
}
.wrapper-middle .dotted{
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;
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;
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>