<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>数码管时钟</title>
<style type="text/css">
.ledback{
background:url("./imgs/LED.png") 0px 0px no-repeat;
background-size:100% 100%;
width:740px;
height:300px;
margin:auto;
}
.top1{
width:100%;
height:15%;
/* background-color:red; */
opacity:0.6;
}
/* 时间样式=========================================================== */
.timediv{
width:100%;
height:38%;
/* background-color:green; */
/* opacity:0.6; */
text-align:center;
}
/* 选择timediv下div,一个数组,后代选择器,父亲下儿子们这一代,不包括孙子 */
.timediv>div{
display:inline-block;
transform:skewX(-10deg);/* 设置倾斜 */
}
/* 冒号的样式 选择timediv下的div,第三个div和第六个div */
.timediv>div:nth-of-type(3),.timediv>div:nth-of-type(6){
width:20px;
height:100px;
background:url("./imgs/dot.png") -52px -13px no-repeat;
}
/* 时间的数字 */
.timenum{
width:50px;
height:100px;
background:url("./imgs/countdown8.png") -38px -13px no-repeat;
}
/* 日期样式=========================================================== */
.datediv{
width:100%;
height:36%;
/* background-color:blue; */
/* opacity:0.6; */
text-align:center;
}
.datediv>div{
display:inline-block;
transform:skewX(-10deg);
font-size:50px;
vertical-align:middle;
color:white;
}
.datenum{
width:39px;
height:73px;
background:url("./imgs/countdown8.png") -27px -2px no-repeat;
background-size:241% 118%;
}
</style>
</head>
<body>
<div class="ledback">
<!-- 占位DIV -->
<div class="top1"></div>
<!-- 时分秒布局 -->
<div class="timediv">
<div class="timenum"></div>
<div class="timenum"></div>
<div></div>
<div class="timenum"></div>
<div class="timenum"></div>
<div></div>
<div class="timenum"></div>
<div class="timenum"></div>
</div>
<!-- XXXX年XX月XX日星期X布局 -->
<div class="datediv">
<div class="datenum"></div>
<div class="datenum"></div>
<div class="datenum"></div>
<div class="datenum"></div>
<div class="">年</div>
<div class="datenum"></div>
<div class="datenum"></div>
<div class="">月</div>
<div class="datenum"></div>
<div class="datenum"></div>
<div class="">日</div>
<div class="">星期</div>
<div class="datenum"></div>
</div>
</div>
</body>
</html>