h5
/
index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="./css/public.css" />
		<link rel="stylesheet" type="text/css" href="./css/index.css" />
		<link rel="stylesheet" href="./css/animate.css">
		<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
		<link rel="stylesheet" href="bootstrap-4.4.1-dist/css/bootstrap.min.css">
		<script src="bootstrap-4.4.1-dist/js/bootstrap.min.js"></script>
	</head>
	<body>
		<article class="main_art">
			<header>
				<div id="color">
					<ul>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
					</ul>
				</div>
				<h1><span class="a1"><i class="iconfont">&#xe74e;</i></span><span class="a2">唐茂的个人博客网站</span></h1>
			</header>
			<nav class="navbar navbar-expand-md bg-dark navbar-dark">
				<a class="navbar-brand" href="index.html">首页</a>
				<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
					<span class="navbar-toggler-icon"></span>
				</button>
				<div class="collapse navbar-collapse" id="collapsibleNavbar">
					<ul class="navbar-nav">
						<li class="nav-item">
							<a class="nav-link" href="#">我的相册</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#">技术博文</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#">休息娱乐</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#">其他信息</a>
						</li>
					</ul>
				</div>
			</nav>
			<article class="art1">
				<section class="sec1">
					<figure>
						<figcaption>
							<h2><i class="iconfont">&#xe6ef;</i>个人简介</h2>
						</figcaption>
						<img src="img/head.jpg" class="fl" />
						<p>&nbsp;&nbsp;&nbsp;我是唐茂</p>
						<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;来自潼南，喜欢骑车，旅行</p>
						<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;做一个热爱生活的自己</p>
						<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
					</figure>
					<article>
						<header>
							<h2>疫情下的中国周边！</h2>
						</header>
						<details open="open">
							<summary>显示详情
								<hr />
							</summary>
							<time datetime="2020-02-28">2020年2月28日</time>
							<p>&nbsp;&nbsp;&nbsp;今天全国新增确诊<mark>三百二十九</mark>人，其中湖北<mark>三百一十八</mark>人，
								而武汉确诊<mark>三百一十三</mark>人。这个数据意味中国的疫情基本上已经被控制，目前需要做的就是继续加强全社会防范，
								包括省际人员流动，国际通道入境隔离等。更要做好复工期间的安全防护工作。再坚持一下下，我们就要<cite>开足马力生产</cite>了。</p>
						</details>
					</article>
					<article>
						<header>
							<h2>中国人均GDP破万，日本人怎么看？</h2>
						</header>
						<details open="open">
							<summary>显示详情
								<hr />
							</summary>
							<time datetime="2020-02-28">2020年2月28日</time>
							<p>&nbsp;&nbsp;&nbsp;2020年1月17日，中国公布2019年经济“成绩单”，达到了<mark>99.0865万亿元</mark>，稳居世界第二。
								跟我出国的1988年相比，31年间稳步上升，翻了50倍不止。而日本就没有如此“好运”， 按照OECD的预测，2019年日本的GDP预计在5万亿美元左右。
								也就是说，同样是31年间，日本经历了几起几落，也没能翻上一番.</p>
						</details>
					</article>
				</section>
				<aside>
					<h1><i class="iconfont">&#xe6f2;</i>学习网站</h1>
					<ul class="ul2">
						<li><a href="www.baidu.com">H5作业</a>
						<li><a href="www.xinlang.com">新浪网</a></li>
						<li><a href="www.souhu.com">搜狐网</a></li>
						<li><a href="www.souhu.com">知网</a></li>
						<li><a href="#">知乎</a></li>
					</ul>
				</aside>
			</article>
			<div class="PF">
				<p>本站博客评分：<meter value="90" max="100">90</meter></p>
				<p>博客文章点评分：<meter value="70" max="100" high="50">70</meter></p>
			</div>
			<div class="clear" class="animated slideInDown"></div>
			<footer>@Copyright : Made By Tangmao</footer>

		</article>
		<script type="text/javascript">
			// var nav1 = document.querySelectorAll(".nav1>ul>li");
			// for (let i = 0; i < nav1.length; i++) {
			// 	nav1[i].className = "animated bounceInLeft";
			// }
			// var ul = document.querySelectorAll(".ul>li");
			// for (let i = 0; i < ul.length; i++) {
			// 	ul[i].addEventListener("mouseover", function() {
			// 		ul.className = "animated flipInX";
			// 	})
			// }

			var dh = document.getElementById("dh");
			var nav = document.getElementById("nav");
			let i = 1;
			dh.addEventListener("click", function() {
				if (i) {
					nav.style.display = "block";
					i = 0;
				} else {
					nav.style.display = "none";
					i = 1;
				}
			})

			let Colorli = document.querySelectorAll("#color li");
			var root = document.querySelector(':root');
			for (let i = 0; i <= Colorli.length; i++) {
				Colorli[i].addEventListener("click", function() {
					if (i == 0) {
						root.style.setProperty("--bgheader", "#63f579");
						root.style.setProperty("--bgmain", "#8fbc8f");
						root.style.setProperty("--bgside", "#99e39f");
						root.style.setProperty("--bgpinfen", "#55aa00");
					}
					if (i == 1) {
						root.style.setProperty("--bgheader", "#02d5ff");
						root.style.setProperty("--bgmain", "#38aaaa");
						root.style.setProperty("--bgside", "#a4ffe9");
						root.style.setProperty("--bgpinfen", "#1394cb");
					}
					if (i == 2) {
						root.style.setProperty("--bgheader", "#ffd810");
						root.style.setProperty("--bgmain", "#bca625");
						root.style.setProperty("--bgside", "#ffff7f");
						root.style.setProperty("--bgpinfen", "#ffd810");
					}
					if (i == 3) {
						root.style.setProperty("--bgheader", "#bdb76b");
						root.style.setProperty("--bgmain", "#818161");
						root.style.setProperty("--bgside", "#a8a87e");
						root.style.setProperty("--bgpinfen", "#bdb76b");
					}
				})
			}
		</script>
	</body>
</html>