用边框划分区域+实时显示系统时间

用边框划分区域+实时显示系统时间

划分区域

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>用边框划分区域</title>
		<style>
			.main{
				margin: 0 auto;
				width: 800px;
				height: 400px;
				/*background-color: red;*/
				border: 50px solid red;
			}
			.top{
				height: 175px;
				border-bottom:50px solid red ;
			}
			.left{
				width: 300px;
				height: 175px;
				border-right: 50px solid red ;
			}
		</style>
	</head>
	<body>
		<div class="main">
	    <div class="top">
			<div class="left"></div>
		    <div class="right"></div>
				
			</div>
			<div class="botton">
				
			</div>
		</div>
	</body>
</html>

实时显示系统时间

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实时系统时间显示</title>
     <link rel="stylesheet" type="text/css" href="css/style.css"/>
   
</head>
<body>
    <div class="time-container">
        <div class="time-title">当前系统时间</div>
        <div id="timeDisplay" class="current-time"></div>
    </div>

    <!--建立js与主文件的桥梁-->
    <script src="js/js.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
posted @ 2026-07-08 17:10  碰一下猫猫头  阅读(9)  评论(0)    收藏  举报