使用HTML写了个万花筒时间表具体请看图

最新推荐文章于 2024-03-13 14:05:52 发布

♛人生如戏

最新推荐文章于 2024-03-13 14:05:52 发布

阅读量106

点赞数 1

分类专栏： HTML 文章标签： css html html5

本文链接：https://blog.csdn.net/weixin_53767594/article/details/120276089

版权

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

别问我感受，问就是心累加心痛

为了练习css 在网上找的素材写下来下面代码

有完整的包，这只是mtml，大家下载可以在我的分享里找到

可以当桌面壁纸在飞狐壁纸和STEAM 导入使用

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>动态时钟</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="js/jquery-3.4.1.min.js"></script>
    <script src="js/test.js"></script>
    <script src="js/common.js"></script>
    <script src="js/config.js"></script>
</head>

<style>

	*{
		margin: 0;
		padding: 0;
	}

	body{
		background-attachment: fixed;
		color: white !important;
		font-size: 12px;
		font-weight: bold;
		overflow: hidden;
		width: 1000px;
		height: 900px;
		font-family: "微软雅黑";
		background-image: url(./123.png);
	}

	audio{
		position: absolute;
		right: 0;
		opacity: 0.1;
		transition: all 1s;
		
	}

	/* audio:hover{
		opacity: 0;
	} */



	.current{
		color: red;
	}


	video{
		z-index: -1;
		/* object-fit: fill; */
		position: fixed;
		/* right: 0px;
		bottom: 0px; */
		min-width: 100%;
		min-height: 100%;
		/* height: auto;
		width: auto; */
	}


	.main-content{
		position: absolute; 
		top:50%;
		left: 50%;
	}


	.main-content .year{
		position: relative;
		top: -13px;
		left: -38px;
		text-align: center
	}

	.main-content .year span{
		position: absolute;
		width: 80px;
	}



	.main-content .month{
		position: relative;
		top: -13px;
		left: 40px;
	}

	.month span{
		position: absolute;
		width: 60px;
		
	}




	.main-content .day{
		position: relative;
		top: -13px;
		left: 85px;
	}

	.day span{
		position: absolute;
		width: 65px;
		
	}




	.main-content .week{
		position: relative;
		top: -13px;
		left: 145px;
	}
	.week span{
		position: absolute;
		width: 65px;
		
	}


	.main-content .shichen{
		position: relative;
		top: -13px;
		left: 200px;
	}
	.shichen span{
		position: absolute;
		width: 125px;
		
	}


	.main-content .hour{
		position: relative;
		top: -13px;
		left: 240px;
	}
	.hour span{
		position: absolute;
		width: 60px;
		
	}


	.main-content .minute{
		position: relative;
		top: -13px;
		left: 300px;
	}
	.minute span{
		position: absolute;
		width: 60px;
		
	}


	.main-content .second{
		position: relative;
		top: -13px;
		left: 370px;
	}
	.second span{
		position: absolute;
		width: 60px;
		
	}



</style>



<body>


    
    <div class="main-content">
        <div class="year">
            <!-- <span>2019</span> -->
        </div> 
        <div class="month"></div>
        <div class="day"></div>
        <div class="week"></div>
        <div class="shichen"></div>
        <div class="hour"></div>
        <div class="minute"></div>
        <div class="second"></div>
    </div>
</body>
</html>

♛人生如戏

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用HTML写了个万花筒时间表具体请看图

<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>动态时钟</title> <meta name="viewport" content="width=device-width, initial-scale=1".
复制链接

扫一扫