js+css实现一个简洁倒计时时钟效果代码
代码语言:html
所属分类:布局界面
代码描述:js+css实现一个简洁倒计时时钟效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <style type="text/css"> body{ text-align: center; background: #00ECB9; font-family: sans-serif; font-weight: 100; } h1{ color: #396; font-weight: 100; font-size: 40px; margin: 40px 0px 20px; } #clockdiv{ font-family: sans-serif; color: #fff; display: inline-block; font-weight: 100; text-align: center; font-size: 30px; } #clockdiv > div{ padding: 10px; border-radius: 3px; background: #00BF96; display: inline-block; } #clockdiv div > span{ padding: 15px; min-width: 48px; border-radius: 3px; background: #00816A; display: inline-block; } .smalltext{ padding-top: 5px; font-size: 16px; } </style> </head> <body> <h1>Countdown Clock</h1> <div id="clockdiv"> <div> <span class="days">00</span> <div class="smalltext">Days</div> </div> <div> <span class="hours">00</span> <div class="smalltext">Hours</div> </div> <div> <span class="minutes">00</span> <div class="smalltext">Minutes</div> </div> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0