原狗狗幣的網站Dogecoin

這個頁面也算是學習html和css做的一個小專案,代碼冗余到爆炸,一個html檔案對應了一個css檔案，但也用jquery強行做了一些動態效果為了看起來不是個靜態頁面，

一共是2個頁面

效果圖

主頁面挖礦程式下載的地方

(這些按鈕的超鏈接還是連接到DogeCoin的下載地址)

貓幣的一些使用教程

(上面的導航欄會根據滾動條位置改變樣式)

指南部分

(選中不同的按鈕下面的文章也會不同)

下面是部分原始碼

主頁面

index.html

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>MurCoin</title>
		<link rel="icon" type="text/css" href="img/murCoin.ico" type="image/x-icon" />
		<link rel="stylesheet" href="css/style.css">
		<link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" />
		<!-- 匯入jquery -->
		<script src="js/jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jq.js"> </script>
	</head>

	<body id="page-top">
		<!-- 標題導航部分 -->
		<div id="navPlaceholder">
			<nav id="nav">
				<div id="nav-div-mainNav" >
					<a href="index.html#page-top" class="navbar-brand" id="nav-a-logo">
						<img id="murCoinLogo" src="img/murCoin.png" alt="MurCoin Logo" />Mur貓幣
					</a>
					<div id="nav-div-body" >
						<ul id="nav-ul-body" >
							<li lang="ch" liposition='first'><a href="index.html#anchor-wallets">錢包</a></li>
							<li lang="ch" liposition='second'><a href="index.html#anchor-whatisMurCoin">什么是mur貓幣?</a>
							</li>
							<li lang="ch" liposition='third'><a href="index.html#anchor-getStarted">開始使用</a></li>
							<li lang="ch" liposition='fourth'><a href="Guide.html">指導教程</a></li>
							<li lang="ch" liposition='fifth'><a href="supportMe.html">支持我們</a></li>

							<li lang="en" liposition='first'><a href="index.html#anchor-wallets">WALLETS</a></li>
							<li lang="en" liposition='second'><a href="index.html#anchor-whatisMurCoin">WHAT IS
									MURCOIN?</a></li>
							<li lang="en" liposition='third'><a href="index.html#anchor-getStarted">GET STARED NOW</a>
							</li>
							<li lang="en" liposition='fourth'><a href="Guide.html">GUIDE</a></li>
							<li lang="en" liposition='fifth'><a href="supportMe.html">SUPPORT ME</a></li>

							<li lang="jp" liposition='first'><a href="index.html#anchor-wallets">ウォレット</a></li>
							<li lang="jp" liposition='second'><a
									href="index.html#anchor-whatisMurCoin">MurCoinとは何ですか？</a></li>
							<li lang="jp" liposition='third'><a href="index.html#anchor-getStarted">今すぐ始めよう</a></li>
							<li lang="jp" liposition='fourth'><a href="Guide.html">ガイド</a></li>
							<li lang="jp" liposition='fifth'><a href="supportMe.html">サポート</a></li>
						</ul>
					</div>
				</div>


			</nav>
		</div>
		<div id="canvasBack"></div>
		<canvas id="canvas" width="1100px" height="550px"></canvas>
		<header>
			<div id="header-div">
				<h2><span>1MurCoin=1MurCoin</span></h2>
				<div id="murImg-div"><img id="MurImage" src="img/mur.png" /></div>
				<div class="f24w300">Murcoin是一種開源的點對點數字貨幣,受到全世界Mur貓的青睞，</div>
				<div id="but-div"><a href="index.html#anchor-getStarted" id="getStarted-but-a"><span>開始使用</span></a>
					<a href="https://github.com/dogecoin/dogecoin" target="_blank" id="soure-but-a"><i class="fab margin-right fa-github"></i><span>原始碼</span></a>
				</div>
				<div id="anchor-wallets"></div>
			</div>
		</header>
		<!-- 選擇你的錢包部分 -->
		<section id="page-wallets">
			<div id="wallets">
				<h2>選擇你的皮夾子</h2>
				<div class="symbol">
					<div></div>
					<img src="img/downArr.png" id="downArr">
					<div></div>
				</div>
				<p>您必須與區塊鏈同步才能使用MurCoin， MultiMur是一個“輕型”錢包， 它通過“瀏覽”區塊鏈與區塊鏈同步,從而提供了快速的同步時間， 另一方面,Mur貓幣核心（Murcoin
					Core）是“完整”錢包， 它通過下載進行同步,從而提供了功能強大的Murcoin錢包，</p>
				<div id="download-div">
					<div id="MultiMur">
						<p>MultiMur</p>
						<img src="img/multidoge.png" />
						<div class="windows">
							<a href="https://multidoge.org/?dl=win" class="but-a windows-a"><span
									class="fab margin-right fa-windows white"></span><span
									class="white">Windows</span></a>
						</div>


						<div class="linux">
							<a href="https://multidoge.org/?dl=lin" class="but-a linux-a"><span
									class="fab margin-right fa-linux white"></span><span class="white">Linux</span></a>
						</div>
						<div class="macOS">
							<a href="https://multidoge.org/?dl=osx" class="but-a macOS-a"><span
									class="fab margin-right fa-apple white"></span><span class="white">macOS</span></a>
						</div>
					</div>
					<div id="MurCoinCore">
						<p>Murcoin Core</p>
						<img src="img/murCoin.png" class="murCoin-150px" />
						<div class="windows">
							<a href="https://github.com/dogecoin/dogecoin/releases/download/v1.14.3/dogecoin-1.14.3-win32-setup-unsigned.exe"
								class="but-a windows-a"><span class="fab margin-right fa-windows white"></span><span
									class="white">Windows 32-bit</span></a>
							<a href="https://github.com/dogecoin/dogecoin/releases/download/v1.14.3/dogecoin-1.14.3-win64-setup-unsigned.exe"
								class="but-a windows-a"><span class="fab margin-right fa-windows white"></span><span
									class="white">Windows 64-bit</span></a>
						</div>
						<div class="linux">
							<a href="https://github.com/dogecoin/dogecoin/releases/download/v1.14.3/dogecoin-1.14.3-i686-pc-linux-gnu.tar.gz"
								class="but-a linux-a"><span class="fab margin-right fa-linux white"></span><span
									class="white">Linux 32-bit</span></a>
							<a href="https://github.com/dogecoin/dogecoin/releases/download/v1.14.3/dogecoin-1.14.3-x86_64-linux-gnu.tar.gz"
								class="but-a linux-a"><span class="fab margin-right fa-linux white"></span><span
									class="white">Linux 64-bit</span></a>
						</div>
						<div class="macOS">
							<a href="https://github.com/dogecoin/dogecoin/releases/download/v1.14.3/dogecoin-1.14.3-osx.dmg"
								class="but-a macOS-a"><span class="fab margin-right fa-apple white"></span><span
									class="white">macOS</span></a>
						</div>
					</div>
				</div>
				<div id="GooglePlay">
					<p>安卓用戶</p>
					<a
						href="https://play.google.com/store/apps/details?id=de.langerhans.wallet&utm_source=global_co&utm_medium=prtnr&utm_content=Mar2515&utm_campaign=PartBadge&pcampaignid=MKT-AC-global-none-all-co-pr-py-PartBadges-Oct1515-1"><img
							src="img/google_play.png" width="150px" /></a>
				</div>
			</div>
			<div id="anchor-whatisMurCoin"></div>
		</section>

		<!-- 什么是MurCoin部分 -->
		<section id="page-WhatIsMurCoin">
			<div id="WhatIsMurCoin">
				<h2>什么是Mur貓幣?</h2>
				<div class="symbol">
					<div></div>
					<img src="img/downArr.png" id="downArr">
					<div></div>
				</div>
				<p>MurCoin是一種開源的點對點數字貨幣,受到全世界Mur貓的青睞，</p>
				<div class="video">
					<video src="video/What%20is%20Dogecoin_.mp4" controls width="1000px"></video>
				</div>
			</div>
			<div id="Introduction">
				<div id="Introduction-left">
					<h3>有趣而友好的互聯網貨幣</h3>
					<p>Murcoin以其驚人的、充滿活力的、由像你一樣友好的人們組成的社區,使自己有別于其他數字貨幣，</p>
					<div>
						<a href="https://www.reddit.com/r/dogecoin" class="but-a reddit-a"><i
								class="fab margin-right fa-reddit"></i><span>Reddit 社區</span></a>
					</div>
					<div>
						<a href="https://discord.gg/dogecoin" class="but-a discord-a"><i
								class="fab margin-right  fa-discord"></i><span>Discord 社區</span></a>
					</div>
					<div>
						<a href="https://www.reddit.com/r/dogeducation" class="but-a reddit-white-a"><i
								class="fab margin-right fa-reddit"></i><span>Murducation Reddit 社區</span></a>
					</div>
				</div>
				<div id="Introduction-right">
					<h3>貓幣和Mur貓為什么有聯系?</h3>
					<p>"Mur"是我們有趣、友好的吉祥物! Mur貓是一只合成出來的貓,作為一個梗流行，并以此來作為貓幣的象征，</p>
					<div>
						<a href="https://knowyourmeme.com/memes/doge" class="but-a aboutMur">了解關于Mur貓</a>
					</div>
					<div>
						<a href="https://en.wikipedia.org/wiki/Shiba_Inu" class="but-a wiki"><i
								class="fab margin-right fa-wikipedia-w"></i>wiki查詢</a>
					</div>
				</div>
			</div>
			<div id="anchor-getStarted"></div>
		</section>

		<!-- 開始使用部分 -->
		<section id="get-started-now">
			<div class="initial-div">
				<h2>如何開始使用MurCoin</h2>
				<div class="symbol">
					<div></div>
					<img src="img/downArr.png" id="downArr">
					<div></div>
				</div>
				<div class="initial-div mobile">
					<img src="img/dogecoin_mobilewallet.png" width="350px">
					<div id="mobile-right-div">
						<h3>1. 選擇你的錢包</h3>
						<p><span>在<a href="#page-wallets" class="sBut but-a">錢包部分</a>里選擇一種錢包</span></p>
						<h3>2. 配置您的錢包</h3>
						<p><span>下載后，你可以根據我們的<a href="Guide.html" class="sBut but-a">指南</a>來配置你的錢包</span></p>
						<h3>3. 獲取一些Murcoin</h3>
						<p>
							<span>獲得Murcoin的方法有很多，你可以購買它們,交易它們,"開采 "它們,賺點小錢等等，最厲害的是,它們是無窮無盡的!</span><br>
							<span>你可以通過參與<a href="http://www.reddit.com/r/dogecoin"
									class="sBut but-a">我們的社區</a>來獲得Murcoin，如果這不是你的風格,另一種擁有你的第一個Murcoin的方法是參與<a
									href="MurCoinfah.html" class="email-a">Murcoin Folding@Home</a>，</span><br>
							<span><a href="MurCoinfah.html"
									class="sBut but-a">folding@Home(FaH)</a>是一個分布式計算專案，你可以加入Murfolders團隊,帶來你的計算能力,幫助尋找疾病的治療方法,并為你的努力獲得一些Murs，</span>

						</p>
					</div>
				</div>
			</div>
		</section>


		<!-- 底部部分 -->
		<footer>
			<div class="footer-left">
				<a class="nomalbut-a" href="index.html#page-wallets">獲取錢包</a>
			</div>
			<div class="footer-mid">
				<a href="https://facebook.com/OfficialDogecoin/" class="footer-but-a" target="_blank"><i
						class="fab fa-facebook-f"></i></a>
				<a href="https://twitter.com/dogecoin" class="footer-but-a" target="_blank"><i
						class="fab fa-twitter"></i></a>
				<a href="https://www.reddit.com/r/dogecoin" class="footer-but-a" target="_blank"><i
						class="fab fa-reddit"></i></a>
				<a href="https://discord.gg/dogecoin" class="footer-but-a" target="_blank"><i
						class="fab fa-discord"></i></a>
			</div>
			<div class="footer-right" >

				<a class="nomalbut-a" onblur="displayN()" onclick="displayB()" id="changeL" href="#changeL">
					切換語言
					<i class="fa fa-arrow-up"></i>
				</a>
				<div id="switchL" style="overflow: visible;">
					<a onm ouseover="changetoCH()">中文</a>
					<a onm ouseover="changetoEN()">English</a>
					<a onm ouseover="changetoJP()">にほんご</a>
				</div>

			</div>
		</footer>

		<!-- 最底部頁面介紹 -->
		<div id="bottom-div">
			<div class="initial-div">
				<p>DKsharx ? The Murcoin Project 2021</p>
				<span>制作者:DKsharx</span><span>網頁設計:DK</span><span>Logo設計:sharx</span>
			</div>
		</div>

		<script src="js/script.js" type="text/javascript" charset="utf-8"></script>
	</body>

</html>

style.css

* {
	padding: 0;
	margin: 0;
	font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; 
	overflow-x: hidden;
}
html {
    scroll-behavior: smooth;
}
p{
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; 
}

#canvas{
	background-color: #f2ede0;
	position: absolute;
	left: 0;
	right: 0;
	margin: 0px auto;
	z-index: -1;
}
#canvasBack{
	background-color: #f2ede0;
	width: 100%;
	height: 570px;
	position: absolute;
	left: 0;
	right: 0;
	margin: 0px auto;
	z-index: -10;
}
#navPlaceholder,nav,header,section,footer,#bottom-div,#page-WhatIsMurCoin{
	width: 100%;
	margin: 0px auto;
	position: relative;
}
#header-div{
	width: 1100px;
	margin: 0px auto;
}
.margin-right{
	margin-right: 8px;
}
.white{
	color: white;
}
.initial-div{
	width: 1140px;
	margin: 0px auto;
}
.initial-p{
	font-size: 16px;
	height: 24px;
	line-height: 24px;
	color: #54547D;
}
#navPlaceholder{
	
	width: 1440px;
	height: 54px;
}
nav {
	background-color: #54547d;
	position: fixed;
	top: 0px;
	left: 0px;
	right: 0px;
	z-index: 50;
}

a {
	text-decoration: none;
}
#murCoinLogo {
	width: 42px;
	height: 42px;
	padding-right: 10px;
}
#nav-a-logo {
	color: #FFF;
	width: 200px;
	line-height: 22px;
	font-weight: bold;
	font-size: 28px;
	padding-top: 5px;
	padding-bottom: 5px; 
	padding-left: 30px;
	
}
#nav-a-logo>img {
	vertical-align: middle;
}
#nav-div-body{
	position: absolute;
	right: 0px;
	overflow: visible;
}
#nav-div-mainNav {
	width: 1440px;
	overflow: visible;
	display: flex;
	padding: 8px 16px;
	justify-content: space-between;
	
}
#nav-ul-body {
	padding-right: 30px;
	height: 54px;
	line-height: 54px;
	list-style-type: none;
	padding-right: 100px;
	overflow: visible;
}
#nav-ul-body li {
	display: inline-block;
}
#nav-ul-body li a{
	font-size: 18px;
	font-weight: bold;
	color: #FFF;
	padding: 8px 30px 8px 30px;
}
header {
	position: relative;
	padding: 50px 0px;
}
header div{
	text-align: center;
}
#murImg-div {
	margin-bottom: 4px;
	margin-top: -10px;
}
header h2{
	font-size: 32px;
	font-weight: bold;
	color: #54547d;
	text-align: center;
	margin-bottom: 0px;
}
.f24w300 {
	font-size: 24px;
	font-weight: 300;
	color: #54547D;
}
#getStarted-but-a {
	display: inline-block;
	margin-left: 5px;
	margin-right: 5px;
	padding-left: 30px;
	padding-right: 30px;
	height: 48px;
	line-height: 48px;
	border-radius: 8px;
	background-color: #54547d;
	font-size: 20px;
	color: white;
	text-align: center;
}
#getStarted-but-a:hover {
	background-color: rgba(0,0,0,0.6);
	transition: all 0.5s;
}
#soure-but-a {
	display: inline-block;
	margin-left: 5px;
	margin-right: 5px;
	padding-left: 30px;
	padding-right: 30px;
	height: 48px;
	line-height: 48px;
	font-size: 20px;
	color: #54547d;
	border-radius: 8px;
	border: 1px solid #54547d;
	text-align: center;
}
#soure-but-a:hover {
	background-color: rgba(0,0,0,0.3);
}
#soure-but-a span {
	padding-left: 2px;
	padding-right: 2px;
}
#but-div {
	margin-top: 24px;
}
section{
	padding: 70px 0px;
}
section h2 {
	text-align: center;
	font-size: 32px;
	line-height: 44px;
	height: 44px;
	color: #54547d;
}
#wallets{
	width: 1140px;
	margin: 0px auto;
}
.symbol {
	line-height: 50px;
	height: 50px;
	text-align: center;
	margin: 20px 0px 24px 0px;
}
.symbol>div {
	display: inline-block;
	vertical-align: middle;
}
.symbol>div:nth-of-type(1) {
	height: 4px;
	line-height: 24px;
	width: 112px;
	background-color: #54547D;
}
.symbol>div:nth-of-type(2) {
	height: 4px;
	line-height: 24px;
	width: 112px;
	background-color: #54547D;
}
#downArr {
	display: inline-block;
	width: 20px;
}
#page-wallets p:first-of-type{
	font-size: 20px;
	font-weight: 300;
}
#download-div {
	width: 1140px;
	margin: 0px auto;
	margin-top: 30px;
}
#download-div>div {
	display: inline-block;
	box-sizing: border-box;
	width: 560px;
	text-align: center;
}
#download-div>div>p{
	
	margin-bottom: 20px;
}
.murCoin-150px {
	width: 150px;
}
.windows{
	text-align: center;
	margin: 8px;
}
.but-a{
	display: inline-block;
	border-radius: 3px;
	padding: 5px 15px;
	line-height: 24px;
	height: 24px;
}
.but-a:hover{
	opacity: 0.6;
	transition: all 0.5s;
}
.windows-a {
	background-color: #128193;
}
.linux{
	text-align: center;
	margin: 8px;
}
.linux-a{
	background-color: #1a6c2c;
}
.macOS{
	text-align: center;
	margin: 8px;
}
.macOS-a{
	background-color: #1e4151;
}
#GooglePlay{
	width: 1140px;
	text-align: center;
	margin-top: 40px;
}
#page-WhatIsMurCoin{
	background-color: #F2EDE0;
}
#WhatIsMurCoin{
	width: 1140px;
	margin: 0px auto;
	text-align: center;
}
#WhatIsMurCoin p{
	font-size: 20px;
	font-weight: 300;
}
.video {
	margin: 0px auto;
	position: relative;
	/* left: 0px; */
	
}
#Introduction{
	width: 1140px;
	margin: 0px auto;
}
#Introduction h3{
	margin: 8px 0px;
	color: #54547D;
	text-align: center;
	font-size: 28px;
	font-weight: bold;
}
#Introduction p{
	font-size: 20px;
	font-weight: 300;
	margin-bottom: 16px;
	padding: 0px 30px;
}
.reddit-a{
	background-color: #54547D;
	color: white;
	font-size: 16px;
}
.discord-a{
	background-color: #54547D;
	color: white;
	font-size: 16px;
}
.reddit-white-a{
	color: #54547D;
	border: 1px solid #54547D;
}
#Introduction-left,#Introduction-right{
	vertical-align: middle;
	display: inline-block;
	box-sizing: border-box;
	width: 565px;
	height: 320px;
}
#Introduction-left div,#Introduction-right div{
	text-align: center;
	margin-bottom: 8px;
}
.reddit{
	color: #54547D;
}
.aboutMur{
	background-color: #54547D;
	color: white;
	font-size: 16px;
}
.wiki{
	color: #54547D;
	border: 1px solid #54547D;
}
.mobile{
	vertical-align: top;
}

#get-started-now h3{
	font-size: 20px;
	font-weight: 300;
	height: 40px;
	line-height: 40px;
}
#get-started-now span{
	display: block;
	margin: 10px 0px;
	font-size: 16px;
	line-height: 24px;
}
#mobile-right-div{
	padding: 0px 15px;
	display: inline-block;
	width: 750px;
	vertical-align: top;
}
.email-a{
	color: #007bff;
}
.email-a:hover{
	text-decoration: underline;
}
i,span{
	vertical-align: center;
	overflow: visible;
}
.sBut{
	border: 1px solid #54547D;
	margin: 0px 5px;
	padding: 4px 8px;
	color: black;
	overflow: visible;
}
.sBut:hover{
	background-color: rgba(0,0,0,0.4);
}
footer{
	padding: 80px 0px;
	background-color: #54547D;
	text-align: center;
}
footer>div{
	width: 380px;
	display: inline-block;
	
}
footer>.footer-right{
	position: relative;
	top: -20px;
}
.nomalbut-a{
	font-size: 20px;
	width: 52px;
	height: 52px;
	line-height: 52px;
	color: white;
	border-radius: 8px;
	padding: 8px 16px;
	border: 1px solid white;
	text-align: center;
	margin: 0px 4px;
}
.nomalbut-a:hover{
	background-color: white;
	transition: all 0.5s;
	color: black;
}
.footer-but-a{
	display: inline-block;
	font-size: 20px;
	width: 52px;
	height: 52px;
	line-height: 52px;
	color: white;
	border-radius: 50%;
	border: 1px solid white;
	text-align: center;
	margin: 0px 4px;
}
.footer-but-a:hover{
	background-color: white;
	transition: all 0.5s;
}
.footer-but-a:hover i{
	color: black;
	transition: all 0.5s;
}
#bottom-div{
	background-color: #232334;
	text-align: center;
}
#bottom-div p,#bottom-div span{
	color: white;
	font-size: 12px;
	height: 24px;
	line-height: 24px;
}
#bottom-div span{
	padding: 0px 20px;
}
#switchL{
	position: absolute;
	background-color: white;
	bottom: 48px;
	left: 120px;
	border: 1px solid #666666;
	border-radius: 4px;
	display: none;
}
.footer-right{
	position: relative;
	overflow: visible;
}
#switchL{
	overflow: visible;
}
#switchL a{
	text-decoration: none;
	color: black;
	box-sizing: border-box;
	width: 165px;
	height: 30px;
	line-height: 30px;
	text-indent: 2em;
	text-align: left;
	display: block;
}
#switchL a:hover{
	background-color: rgba(0,0,0,0.1);
}
	
.nav-li-style{
	background-color: #F2EDE0;
	border-radius: 4px;
	color: #54547D;
}
#payMe div{
	display: inline-block;
	margin: 0px 20px;
	
}
#payMe img{
	width: 300px;
	height: 400px;
}

貓幣指南頁面

Guide.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Murcoin|help</title>
		<link rel="icon" type="text/css" href="img/murCoin.ico" type="image/x-icon" />
		<link rel="stylesheet" href="css/style.css">
		<link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" />
		<link rel="stylesheet" type="text/css" href="css/all.css"/>
		<!-- 匯入jquery -->
		<script src="js/jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jq.js"> </script>
		<link rel="stylesheet" type="text/css" href="css/Guide.css" />
	</head>
	</head>
	<body>
		<!-- 標題導航部分 -->
		<div id="navPlaceholder">
			<nav>
				<div id="nav-div-mainNav">
					<a href="index.html" id="nav-a-logo">
						<img id="murCoinLogo" src="img/murCoin.png" alt="MurCoin Logo" />Mur貓幣
					</a>
					<div id="nav-div-body">
						<ul id="nav-ul-body">
							<li lang="ch" liposition='first'><a href="index.html#anchor-wallets">錢包</a></li>
							<li lang="ch" liposition='second'><a href="index.html#anchor-whatisMurCoin">什么是mur貓幣?</a>
							</li>
							<li lang="ch" liposition='third'><a href="index.html#anchor-getStarted">開始使用</a></li>
							<li lang="ch" liposition='fourth'><a href="Guide.html">指導教程</a></li>
							<li lang="ch" liposition='fifth'><a href="supportMe.html">支持我們</a></li>

							<li lang="en" liposition='first'><a href="index.html#anchor-wallets">WALLETS</a></li>
							<li lang="en" liposition='second'><a href="index.html#anchor-whatisMurCoin">WHAT IS
									MURCOIN?</a></li>
							<li lang="en" liposition='third'><a href="index.html#anchor-getStarted">GET STARED NOW</a>
							</li>
							<li lang="en" liposition='fourth'><a href="Guide.html">GUIDE</a></li>
							<li lang="en" liposition='fifth'><a href="supportMe.html">SUPPORT ME</a></li>

							<li lang="jp" liposition='first'><a href="index.html#anchor-wallets">ウォレット</a></li>
							<li lang="jp" liposition='second'><a
									href="index.html#anchor-whatisMurCoin">MurCoinとは何ですか？</a></li>
							<li lang="jp" liposition='third'><a href="index.html#anchor-getStarted">今すぐ始めよう</a></li>
							<li lang="jp" liposition='fourth'><a href="Guide.html">ガイド</a></li>
							<li lang="jp" liposition='fifth'><a href="supportMe.html">サポート</a></li>
						</ul>
						</ul>
					</div>
				</div>

			</nav>
		</div>
		<!-- 頭部 -->
		<div id="canvasBack"></div>
		<canvas id="canvas" width="1430px" height="550px"></canvas>
		<header>

			<div id="murImg-div"><img id="MurImage" src="img/mur.png" /></div>
			<div class="f24w300">開始使用Murcoin就像1、2、3一樣<strong>簡單</strong>!</div>
			<div class="initial-p">選擇一種型別的錢包來開始</div>
			<div>
				<a onclick="showwindows()" class="but-a windows-a"><span
						class="fab margin-right fa-windows white"></span><span class="white">Windows</span></a>
				<a onclick="showLinux()" class="but-a linux-a"><span
						class="fab margin-right fa-linux white"></span><span class="white">Linux</span></a>
				<a onclick="showMas()" class="but-a macOS-a"><span class="fab margin-right fa-apple white"></span><span
						class="white">macOS</span></a>
				<a onclick="showAndroid()" class="but-a macOS-a" style="background-color: #c10003;"><span
						class="fab margin-right fa-android white"></span><span class="white">Android</span></a>
			</div>
		</header>

		<!-- windows指導部分 -->
		<section id="section-windows">
			<div class="guide-div">
				<ul class="guide-ul">
					<li class="guide-li">
						<div class="guide-div-left">
							<img src="img/guide/windows01.jpg">
						</div>

						<div class="guide-div-right">
							<p class="lead">1. 下載錢包</p>
							<p>
								<span>點擊下面的鏈接，下載MultiMur，一個本地Murcoin錢包，
									如果你被要求接受下載，請接受下載，一旦檔案完成下載，點擊（.exe）檔案，</span>
							</p>
							<p><a href="https://multidoge.org/?dl=win" target="_blank" class="guide-a-but">Download
									MultiMur for Windows</a></p>
						</div>


					</li>
					<li class="guide-li">
						<div class="guide-div-left">
							<img src="img/guide/windows02.jpg">
						</div>

						<div class="guide-div-right">
							<p class="lead">2. 安裝錢包</p>
							<p>
								<span>
									通過安裝程序，一旦你到達許可協議，接受它以繼續安裝，
									一旦你完成了安裝，找到MultiMur的快捷方式并打開它，
								</span>
							</p>
						</div>

					</li>
					<li class="guide-li">

						<div class="guide-div-left">
							<img src="img/guide/windows03.jpg">
						</div>

						<div class="guide-div-right">
							<p class="lead">3. 使用你的錢包!</p>
							<p>
								<span>
									啟動時，你的錢包將在左下方有一個加載條，你將不得不等待1-5分鐘來同步錢包，
									在它與網路同步后，你現在可以使用你的Murcoin錢包了!
									您剛剛完成了Murcoin錢包的設定!
								</span>
							</p>
						</div>

					</li>
				</ul>
			</div>
		</section>

		<!-- Linux指導部分 -->
		<section id="section-linux">
			<div class="guide-div">
				<ul class="guide-ul">
					<li class="guide-li">

						<div class="guide-div-left">
							<img src="img/guide/linux01.jpg">
						</div>

						<div class="guide-div-right">
							<p class="lead">1. 下載錢包</p>
							<p>
								<span>點擊下面的鏈接，下載MultiMur，一個本地Murcoin錢包，
									保存檔案以下載該檔案，
									找到（.jar）檔案，用你選擇的檔案管理器打開該檔案，</span>
							</p>
							<p><a href="https://multidoge.org/?dl=win" target="_blank" class="guide-a-but">Download
									MultiMur for Linux</a></p>
						</div>
					</li>
					<li class="guide-li">

						<div class="guide-div-left">
							<img src="img/guide/linux02.jpg">
						</div>

						<div class="guide-div-right">
							<p class="lead">2. 設定權限</p>
							<p>
								<span>在（.jar）檔案上點擊右鍵，點擊 "屬性"， 進入 "權限 "選項卡，勾選 "執行 "旁邊的復選框，允許將該檔案作為程式執行，關閉屬性視窗，</span>
							</p>
						</div>
					</li>
					<li class="guide-li">

						<div class="guide-div-left">
							<img src="img/guide/linux_03.jpg">
						</div>

						<div class="guide-div-right">
							<p class="lead">3. 以OpenJDK Java的名義啟動!</p>
							<p>
								<span>再次右擊(.jar)檔案，將滑鼠懸停在 "Open With "上，然后選擇OpenJDK Java 6或7 Runtime，</span>
							</p>
						</div>
					</li>
					<li class="guide-li">

						<div class="guide-div-left">
							<img src="img/guide/linux_04.jpg">
						</div>

						<div class="guide-div-right">
							<p class="lead">4. 安裝錢包</p>
							<p>
								<span>通過安裝程序，一旦你看到許可協議，接受它以繼續安裝，
									一旦你完成了安裝，找到MultiMur的快捷方式并打開它，</span>
							</p>
						</div>
					</li>
					<li class="guide-li">

						<div class="guide-div-left">
							<img src="img/guide/linux05.jpg">
						</div>

						<div class="guide-div-right">
							<p class="lead">5. 使用你的錢包!</p>
							<p>
								<span>在啟動時，你的錢包將在左下方有一個加載條，你將不得不等待1-5分鐘來同步錢包，
									在它與網路同步后，你現在就可以使用你的Murcoin錢包了!
									您剛剛完成了Murcoin錢包的設定!</span>
							</p>
						</div>
					</li>
				</ul>

			</div>
		</section>
		<!-- masOS指導部分 -->
		<section id="section-masOS">
			<div class="guide-div">
				<ul class="guide-ul">
					<li class="guide-li">

						<div class="guide-div-left">
							<img src="img/guide/macOS01.jpg">
						</div>

						<div class="guide-div-right">
							<p class="lead">1. 下載錢包</p>
							<p>
								<span>點擊下面的鏈接，下載MultiMur，一個本地Murcoin錢包，
									一旦下載完成，在 "下載 "下拉選單中雙擊該檔案，</span>
							<p><a href="https://multidoge.org/?dl=win" target="_blank" class="guide-a-but">Download
									MultiMur for macOS</a></p>
							</p>
						</div>
					</li>
					<li class="guide-li">

						<div class="guide-div-left">
							<img src="./img/guide/masOS02.jpg">
						</div>

						<div class="guide-div-right">
							<p class="lead">2. 安裝 "錢包"</p>
							<p>
								<span>當你點擊檔案時，應打開一個新視窗，點擊并拖動 "MultiDoge "圖示到 "應用程式 "檔案夾，
									這將使錢包進入你的應用程式選單，</span>
							</p>
						</div>
					</li>
					<li class="guide-li">

						<div class="guide-div-left">
							<img src="img/guide/masOS03.jpg">
						</div>

						<div class="guide-div-right">
							<p class="lead">3. 使用你的錢包!</p>
							<p>
								<span>
									啟動時，你的錢包將在左下方有一個加載條，你將不得不等待1-5分鐘來同步錢包，
									在它與網路同步后，你現在可以使用你的Murcoin錢包了!
									您剛剛完成了Murcoin錢包的設定!
								</span>
							</p>
						</div>
					</li>

				</ul>
			</div>
		</section>
		<!-- Android指導部分 -->
		<section id="section-android">
			<div class="guide-div">
				<ul class="guide-ul">
					<li class="guide-li">

						<div class="guide-div-left">
							<img src="img/guide/Android01.jpg" height="260">
						</div>

						<div class="guide-div-right">
							<p class="lead">1. 下載 "錢包"</p>
							<p>
								<span>到Play Store搜索 "Murcoin Wallet"，或點擊 "在Google Play上獲取 "按鈕，
									按 "安裝 "按鈕，在應用程式許可請求面板上按下 "接受 "按鈕，
									等待應用程式的下載和安裝，</span>
							</p>
							<p><a href="https://multidoge.org/?dl=win" target="_blank"><img
										src="img/guide/google_play.png" width="150px"></a></p>
						</div>
					</li>
					<li class="guide-li">

						<div class="guide-div-left">
							<img src="img/guide/Android02.jpg" height="260">
						</div>

						<div class="guide-div-right">
							<p class="lead">2. 啟動 "錢包"</p>
							<p>
								<span>在同一頁面上，按下 "打開 "按鈕，你將被引導到Murcoin錢包，
									你也可以在你的Android?智能手機的應用抽屜里訪問Murcoin錢包，</span>
							</p>
						</div>
					</li>
					<li class="guide-li">

						<div class="guide-div-left">
							<img src="img/guide/Android03.jpg" height="260">
						</div>

						<div class="guide-div-right">
							<p class="lead">3. 使用你的錢包!</p>
							<p>
								<span>現在你有一個完整的Murcoin錢包在你手中！在頂部有你的地址簿和設定，
									在頂部，你有你的地址簿和設定，
									在它下面，左邊是你的Murcoin地址，右邊是QR碼中的Murcoin地址，以及你的Murcoin余額，
									在底部，你有你的交易歷史，在最下面，你可以 "申請硬幣"，"發送硬幣"，或用你的相機掃描QR碼，</span>
							</p>
						</div>
					</li>

				</ul>
			</div>
		</section>


		<!-- 底部部分 -->
		<footer>
			<div class="footer-left">
				<a class="nomalbut-a" href="index.html#page-wallets">獲取錢包</a>
			</div>
			<div class="footer-mid">
				<a href="https://facebook.com/OfficialDogecoin/" class="footer-but-a" target="_blank"><i
						class="fab fa-facebook-f"></i></a>
				<a href="https://twitter.com/dogecoin" class="footer-but-a" target="_blank"><i
						class="fab fa-twitter"></i></a>
				<a href="https://www.reddit.com/r/dogecoin" class="footer-but-a" target="_blank"><i
						class="fab fa-reddit"></i></a>
				<a href="https://discord.gg/dogecoin" class="footer-but-a" target="_blank"><i
						class="fab fa-discord"></i></a>
			</div>
			<div class="footer-right">

				<a class="nomalbut-a" onblur="displayN()" onclick="displayB()" id="changeL" href="#changeL">
					切換語言
					<i class="fa fa-arrow-up"></i>
				</a>
				<div id="switchL">
					<a onm ouseover="changetoCH()">中文</a>
					<a onm ouseover="changetoEN()">English</a>
					<a onm ouseover="changetoJP()">にほんご</a>
				</div>

			</div>
		</footer>

		<!-- 最底部頁面介紹 -->
		<div id="bottom-div">
			<div class="initial-div">
				<p>DKsharx ? The Murcoin Project 2021</p>
				<span>制作者:DKsharx</span><span>網頁設計:DK</span><span>Logo設計:sharx</span>
			</div>
		</div>


		<script src="js/script.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>

Guide.css

.guide-div{
	width: 1140px;
	margin: 0px auto;
}
section{
	width: 1430px;
	margin: 0px auto;
	vertical-align: top;
}
section .guide-ul{
	list-style: none;
	display: inline-block;
	width: 1200px;
	margin: 0px auto;
	
}
section .guide-li{
	height: 260px;
	text-align: center;
}
section .guide-div-left{
	display: inline-block;
	width: 560px;
	vertical-align: middle;
}
section .guide-div-right{
	display: inline-block;
	width: 560px;
}
section .guide-a-but{
	display: inline-block;
	background-color: #54547D;
	color: white;
	padding: 4px 8px;
	font-size: 14px;
	border-radius: 8px;
}
.lead{
	font-size: 20px;
	line-height: 30px;
	height: 30px;
	font-weight: lighter;
	margin: 8px 0px;
}
section span{
	font-size: 16px;
	line-height: 24px;
	height: 24px;
	color: #54547D;
}
#section-windows,#section-linux,#section-masOS,#section-android{
	display: none;
}

這個專案其實是有四個頁面,有需要原始碼的兄弟可以私信我，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/301057.html

標籤：其他

上一篇：uniapp 封裝的插件集合包括：無限級選擇器，TAB滑動切換，圓形進度條，上拉加載影片，影片使用，通用彈窗等。

下一篇：匠心打造多tab自動吸頂下的多滾動容器（詳細）

HTML+CSS 仿狗狗幣(Dogecoin)制作的貓幣網站

效果圖

主頁面

貓幣指南頁面