css3 - 技术栈

基础

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>style</title>
		<!-- link（外部样式）和style（内部样式）优先级相同，重复写会覆盖 -->
		<link rel="stylesheet" href="main.css"/>
		<style>
			/* 标签选择器 */
			h1 {
				background-color: aquamarine;
				/* !important 表示优先级最高 */
				color: black !important;
			}
			/* 类选择器 */
			.class1{
				color: red;
			}
			/* id选择器 */
			#id1{
				color: blue;
			}
			/* 后代选择器：#id2内所有的p标签 */
			#id2 p{
				color: royalblue;
			}
			/* 子代选择器：#id2的第一级子标签 */
			#id2 > p{
				text-decoration-line: underline;
			}
			/* 伪类选择器：需要有a的选择器 */
			a{
				
			}
			/* 鼠标置于a标签，颜色改变 */
			a:hover {
				color: red;
			}
			a:link{
				color: yellow;
			}
			a:visited{
				color: green;
			}
			a:active{
				color: blue;
			}
			body{
				background-color: aliceblue;
				background-image: url("../img/demo2.png");
				background-repeat: no-repeat;
				background-size: 200px 200px;
				/* 背景固定 */
				background-attachment: fixed;
				/* 背景随滚动条滚动 */
				/* background-attachment: scroll; */
				background-position-x: center;
				background-position-y: center;
				/* xy轴占比 */
				background-position: 10% 10%;
			}
			span{
				/* font-size: 20px;
				font-family: "Microsoft YaHei UI";
				font-weight: bold;
				font-style: italic; */
				/* 连写要注意顺序 */
				font: italic bold 30px "Microsoft YaHei UI";
			}
			p{
				font-size: 16px;
				width: 120px;
				color: crimson;
				line-height: 24px;
				/* 缩进 */
				text-indent: 1em;
			}
		</style>
	</head>
	<body>
		<!-- 行内样式优先级高于内部样式 -->
		<h1 style="background-color: aqua; text-align: center;">111</h1>
		<h1 class="class1">222</h1>
		<h1 id="id1">333</h1>
		<div id="id2">
			<p>p1</p>
			<div>
				<p>p2</p>
			</div>
		</div>
		<a href="">百度</a>
	</body>
</html>

计时器

html 复制代码

<h1 id="clock"></h1>
<script>
	const formatTime = n => n < 10 ? '0' + n : n;
	function updateClock(){
		const date = new Date();
		const hours = formatTime(date.getHours());
		const minutes = formatTime(date.getMinutes());
		const seconds = formatTime(date.getSeconds());
		const clock = document.getElementById("clock");
		clock.textContent = `${hours}:${minutes}:${seconds}`;
	}
	setInterval(updateClock,1000);
</script>