css+jquery实现自适应考试倒计时全屏页面代码
代码语言:html
所属分类:布局界面
代码描述:css+jquery实现自适应考试倒计时全屏页面代码
代码标签: css jquery 自适应 考试 倒计时 全屏
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Marck+Script|Roboto:100,400,500,900'>
<style>
* {
box-sizing: border-box;
margin: 0;
font-family: 'Roboto', sans-serif;
}
h1, p, h2, h3, h4, ul, li, div {
margin: 0;
padding: 0;
}
body{
margin:0px;
background-image: url(//repo.bfw.wiki/bfwrepo/image/5e44fe08140e7.png);
background-repeat: no-repeat;
background-size: cover;
}
.wrap{
display:none;
}
.logo div{
text-transform:uppercase;
}
.logo .cx{
font-size: 50px;
color: #535353;
margin: 10px 10px 0px;
font-weight: 900;
}
.logo .cd{
font-size: 32px;
color: #535353;
margin: -40px 139px 0px;
font-weight: 900;
}
.logo .line{
position: absolute;
height: 1px;
width: calc( 100% - 350px );
background: #535353;
margin: -15.5px 165px;
}
.logo .line .days{
text-align: center;
font-size: 16px;
font-weight: 900;
color: #000000;
margin: -18px 10px;
}
.logo .cc{
font-size: 32px;
color: #b51936;
margin: -14px 12px 0px;
font-weight: 400;
}
.social{
float: right;
position: absolute;
right: 0px;
margin: -25px 40px;
}
.social a{
text-decoration:none;
}
.social i{
color: #535353;
margin:0px 8px;
}
main .container{
width: 1200px;
margin: 100px auto;
}
.counter-box{
}
.counter-box .message:nth-of-type(1){
width: 200px;
border-left: 1px solid black;
padding: 0px 25px;
}
.counter-box .message:nth-of-type(3){
margin: 65px 0px;
text-align: right;
width: 100%;
}
.counter-box .message:nth-of-type(4){
margin: -60px 0px;
.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0