<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>炫酷时钟</title>
<style type="text/css">
body{
height: 100%;color: #51555c;
background: url("./img/bg1.png") no-repeat;
/* 背景图垂直、水平均居中 */
background-position: center center; /* 背景图不平铺 */
background-repeat: no-repeat; /* 当内容高度大于图片高度时,背景图像的位置相对于viewport固定 */
background-attachment: fixed; /* 让背景图基于容器大小伸缩 */
background-size: cover; /* 设置背景颜色,背景图加载过程中会显示背景色 */
background-color: #464646;
}
img{
display: inline-block;
width: 28px;
height: 50px;
margin:0 4px;
}
.main_demo{
width: 910px;
min-height: 600px;
margin:30px auto 0 auto;
}
.main_demo h2{
text-align: center;
padding: 10px;
font-size: 40px;
color: wheat;
}
.clock{
width: 500px;
padding: 40px;
margin:2px auto;
} .clock_right{
text-align: right;
margin:4px;
}
</style>
</head>
<body>
<div class="main_demo">
<div align="center">
<h2>Js 炫酷时钟</h2>
</div>
<div class="clock">
<!--10点-->
<img src="" />
<img src="" />

<!--40分-->
<img src="" />
<img src="" />

<!--*秒-->
<img src="" />
<img src="" />
<br />
<div class="clock_right">
<!--2017年-->
<img src="" />
<img src="" />
<img src="" />
<img src="" />

<!--09月-->
<img src="" />
<img src="" />

<!--27日-->
<img src="" />
<img src="" />
</div>
</div>
</div> </body>
<script type="text/javascript">
var imgs = document.getElementsByTagName('img');
setInterval(getTime,1000); function getTime(){
var _date = new Date();
var year = _date.getFullYear();
var month = _date.getMonth()+1;
var day = _date.getDate();
var hour = _date.getHours();
var minutes = _date.getMinutes();
var second = _date.getSeconds();
var newDate = addZero(hour) + "" + addZero(minutes)+ "" + addZero(second)+""+addZero(year) + "" + addZero(month)+ "" + addZero(day)
;
console.log(newDate.length);
for(var i = 0;i < newDate.length;i++){
imgs[i].src = 'img/time_' + newDate[i] + '.png';
}
} getTime(); function addZero(num){
if(num < 10){
num = "0" + num;
}
return num
}
</script>
</html>

css怎样让背景充满整个屏幕的更多相关文章

  1. 004-CSS怎样让背景充满整个屏幕

    <!doctype html><html><body> ...Your content goes here...</body></html> ...

  2. css中设置背景图片适应屏幕

    以body为例 body{ background: url(../img/jld.png) no-repeat center center fixed; -webkit-background-size ...

  3. css 使用background背景实现border边框效果

    css中,我们一般使用border给html元素设置边框,但也可以使用background背景来模拟css边框效果,本文章向大家介绍css 使用background背景实现border边框效果,需要的 ...

  4. 【Python全栈-CSS】CSS实现网页背景图片自适应全屏

    CSS实现网页背景图片自适应全屏 功能:实现能自适应屏幕大小又不会变形的背景大图,而且背景图片不会随着滚动条滚动而滚动. 以下是用CSS实现的方法: <html> <head> ...

  5. 用extract-text-webpack-plugin提取出来的css文件中背景图片url的不正确的问题

    在一个main.js中require一个scss文件,scss文件中用了背景图片,图片url是用的相对路径,用extract-text-webpack-plugin插件提取出的css文件背景图片路径不 ...

  6. css中background背景属性概

    css中background背景属性概 background:url(背景图片路径)  no-repeat;/*不重复默认在左上方*/background:url(背景图片路径)  no-repeat ...

  7. 用css实现条纹背景

    我先额外的说一下怎么用CSS绘制三角形: 绘制三角形是把边框加粗,将元素的宽高都设为0,让其余的边框颜色透明,下面我们来看实现的代码: 先把边框的颜色设置成不同颜色: #div{ border-col ...

  8. css中的背景、边框、补丁相关属性

    css中的背景.边框.补丁相关属性 关于背景涉及到背景颜色与背景图片 背景颜色background-color即可设定: 背景图片background-image即可设定: 但是背景图片还涉及到其他的 ...

  9. 第 17 章 CSS 边框与背景[下]

    学习要点: 1.设置背景 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 边框和背景,通过边框和背景的样式设置,给元素增加更丰富的外观. 一.设置背景 盒模型的尺寸可以通过两种方式实现可见性, ...

随机推荐

  1. JavaScript正则表达式知识点

    通过学习imooc课程<JavaScript正则表达式>http://www.imooc.com/video/12539,对视频教学内容做一个知识整理. 一个正则表达式在线工具:http: ...

  2. ldap数据库--ODSEE--卸载

    针对ldap实例的卸载,即删除,可以通过管理界面进行操作也可以通过命令行进行操作.卸载顺序为ldap实例--agent--ads.这里主要介绍命令操作步骤 1,ldap实例卸载 从ads注销,即不在需 ...

  3. Django中请求的生命周期

    1. 概述 首先我们知道HTTP请求及服务端响应中传输的所有数据都是字符串. 在Django中,当我们访问一个的url时,会通过路由匹配进入相应的html网页中. Django的请求生命周期是指当用户 ...

  4. middlewares in GCC

    Our GCC is a project developed by React that makes it painless to create interactive UIs. Design sim ...

  5. RocketMQ集群部署配置

    目标,使用2台机器部署RocketMQ多Master多Slave模式,异步复制集群模式. 第一步,修改/etc/hosts文件 192.168.116.115 rocketmq1 192.168.11 ...

  6. 老男孩Python全栈开发(92天全)视频教程 自学笔记02

    day2课程目录: 操作系统的历史 二进制运算 字符编码与计算机容量 编程语言介绍 开发语言分类 演讲能力锻炼 day2课程内容梳理: 操作系统发展史: Unix系统 极其稳定 现在很多银行还在用 L ...

  7. web-故道白云&Clound的错误

    web-故道白云 题目: 解题思路: 0x01 首先看到题目说html里有秘密,就看了下源代码如图, 重点在红圈那里,表示输入的变量是id,当然上一行的method="get"同时 ...

  8. 简易RPC框架-熔断降级机制

    *:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...

  9. nginx使用replace-filter-nginx-module实现内容替换

    有时候我们想对响应(例如PHP接口)返回的内容做些字符串,虽然可以使用各语言代码相关方法(例如PHP的str_replace)进行替换,但是在nginx层面替换是更方便的,无需修改代码. 约定:本文源 ...

  10. windows下python3.6 32bit 安装django

    在Windows下python3.6安装Django1.11.3 1.首先下载地址:https://pypi.python.org/pypi/Django/1.11.3 pip install dja ...