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