实现上一篇明日方舟官网仿制的代码
生活随笔
收集整理的這篇文章主要介紹了
实现上一篇明日方舟官网仿制的代码
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
HTML部分
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="icon" href="./方舟/favicon.ico" type="image/x-icon"><title>明日方舟-Arknights</title><link rel="stylesheet" href="./Arknight.css" type="text/css"> </head><body><div class="ALL"><div class="DH"><div class="CD"><button href="#" class="a1 CD">菜單</button><div class="nav"><nav><a href="#">1</a><a href="#">2</a><a href="#">3</a></nav></div></div><div class="DL"><a href="#" class="a1">登陸</a> | <a href="#" class="a1">注冊</a> <ahref="#" class="a1">聯系客服</a></div></div><div class="GG" id="top"><div class="change"><a href="#" class="gg a1">最新</a><a href="#" class="gg a1">公告</a><a href="#" class="gg a1">活動</a><a href="#" class="gg a1">新聞</a></div><a href="#" target="_blank"><div class="mainbody1"></div></a><div class="mainbody2"><table class="tab"><tr><td><a href="#" target="_blank"><span1>最新</span><span2>2020.08.10</span><span3> </span><h1>明日方舟制作組通訊#4</h1><a href="#" class="more">READ MORE + </a></a></td><td><a href="#" target="_blank"><span1>新聞</span><span2>2020.08.09</span><span3> </span><h1>[活動預告]SideStory[火藍之心]復刻即將開啟</h1><a href="#" class="more">READ MORE + </a></a></td><td><a href="#" target="_blank"><span1>活動</span><span2>2020.08.08</span><span3> </span><h1>明日方舟制作組通訊#3</h1><a href="#" class="more">READ MORE + </a></a></td></tr><tr><td><a href="#" target="_blank"><span1>公告</span><span2>2020.08.11</span><span3> </span><h1>[明日方舟]8月12號閃斷更新公告</h1><a href="#" class="more">READ MORE + </a></a></td><td><a href="#" target="_blank"><span1>公告</span><span2>2020.08.10</span><span3> </span><h1>[明日方舟]8月10號封禁名單</h1><a href="#" class="more">READ MORE + </a></a></td><td><a href="#" target="_blank"><span1>公告</span><span2>2020.08.03</span><span3> </span><h1>[明日方舟]8月4號閃斷更新公告</h1><a href="#" class="more">READ MORE + </a></a></td></tr></table></div><div class="more1"><a>→ 更多情報</a></div><div class="top"><a href="#top" class="top">TOP</a></div><div class="photowall"><div class="photo img2"><a href="#"><img src="./方舟/塔露拉.png" alt=""></a></div><div class="photo img2 kaidie"><a href="#"><img src="./方舟/凱爹.png" alt=""></a></div><div class="photo img2 banzi"><a href="#"><img src="./方舟/板子.png" alt=""></a></div><div class="photo img2 kelage"><a href="#"><img src="./方舟/克拉格.png" alt=""></a></div><div class="photo img2"><a href="#"><img src="./方舟/心院.png" alt=""></a></div><div class="photo img2 qie"><a href="#"><img src="./方舟/企鵝.png" alt=""></a></div><div class="photo img2"><a href="#"><img src="./方舟/黑兔.png" alt=""></a></div><div class="photo img2"><a href="#"><img src="./方舟/杜賓.png" alt=""></a></div><div class="photo img2"><a href="#"><img src="./方舟/整合.png" alt=""></a></div><div class="photo img2 yaxin"><a href="#"><img src="./方舟/崖心.png" alt=""></a></div><div class="photo img2"><a href="#"><img src="./方舟/隕星.png" alt=""></a></div><div class="photo img2 chuxue"><a href="#"><img src="./方舟/初雪.png" alt=""></a></div><div class="photo img2 aneng"><a href="#"><img src="./方舟/阿能.png" alt=""></a></div><div class="photo img2 xiaoyang"><a href="#"><img src="./方舟/小羊.png" alt=""></a></div><div class="photo img2 chuxue2"><a href="#"><img src="./方舟/初雪2.png" alt=""></a></div><div class="photo img2 longm"><a href="#"><img src="./方舟/龍門.png" alt=""></a></div></div></div></div><div class="map"><br><br><br><br><br><br><ul><li><a href="#" class="a3"><img src="./方舟/源石.png" alt="" class="list stone"><div class="exp exp1">源石<br>Originiums</div></a></li></ul><ul><li><a href="#" class="a3"><img src="./方舟/整合運動.png" alt="" class="list zhenghe"><div class="exp exp2">整合運動<br>Reunion</div></a></li></ul><ul><li><a href="#" class="a3"><img src="./方舟/感染者.png" alt="" class="list ganran"><div class="exp exp3">感染者<br>Infected</div></a></li></ul><ul><li><a href="#" class="a3"><img src="./方舟/源石技藝.png" alt="" class="list skill"><div class="exp exp4">源石技藝<br>Originiums Arts</div></a></li></ul><ul><li><a href="#" class="a3"><img src="./方舟/移動城邦.png" alt="" class="list city"><div class="exp exp5">移動城邦<br>Nomadic city</div></a></li></ul><ul><li><a href="#" class="a3"><img src="./方舟/羅德島.png" alt="" class="list Rode"><div class="exp exp6">羅德島<br>Rhodes Island</div></a></li></ul></div> </body></html>CSS部分
@charset”utf-8”;* {margin: 0;padding: 0;/* background-color: black; */ }.DL {float: right;color: white;margin-right: 50px;margin-top: 10px;font-family: cursive,Bender;display: inline-block; }.ALL {z-index: 5;background-color: black;height: 2000px;widows: 800px;/* background-image: url(./方舟/c10a501b88fdc388bdab953e8bba8946.png); */background-size: 100% 100%;background-repeat: no-repeat; }.DH {/* background-color: black; */height: 100px;background-color: black; }a {text-decoration: none;color: azure;line-height: 50px;cursor: pointer; }.a1:hover {color: #0aaff0; }.CD {text-decoration: none;color: azure;margin-top: 10px;margin-left: 30px;font-family: cursive,Bender;float: left;position: fixed;font-size:16px;background-color: rgba(255, 255, 255, 0);border: none;line-height: 50px;height: 50px; }.nav {display: none;z-index: 100;background-color: gainsboro;width: 100px;height: 100px;border: 1px solid red;position: absolute;top: 10px; } .CD:hover .nav{display: block; /* z-index: 100; */ }.GG {width: 990px;height: 700px;margin: 0 auto; }.change {height: 50px;border: 1px solid #c0c0c0;text-align: right;width: 990px; }.change a {margin-right: 20px; }.mainbody1 {height: 170px;width: 990px;border: 1px solid #c0c0c0;/* margin-top: 10px; *//* background-image: url(./方舟/1.png); */background-size: 100% 100%;animation-name: exchange;animation-duration: 5s;animation-iteration-count: infinite; }@keyframes exchange{0%{background-image: url(./方舟/2.png);}25%{background-image: url(./方舟/2.png);}50%{background-image: url(./方舟/3.png);}75%{background-image: url(./方舟/3.png);}100%{background-image: url(./方舟/2.png); } }.mainbody2 {/* display: inline-block; */height: 461px;width: 990px;border: 1px solid #c0c0c0;margin-left: 0px;border-collapse: collapse; }.more {margin-top: 10px;border: 1px solid #1591da;height: 30px;width: 150px;float: right; }.tab {color: white;border: 1px solid snow;border-collapse: collapse; }td {border: 1px solid snow;border-bottom: none;width: 330px;height: 230px;border-collapse: collapse; }td:hover {background-color: #1591da; }td:hover span1{color: black; }td:hover span2{color: black;}td:hover span3{background-color: black; } td:hover h1{color: black;} td:hover a{background-color: black;color: white;} span1 {position: relative;bottom: 30px;left: 30px;color: #2bf;font-size: large; }span2 {position: relative;left: 140px;font-size: large;color: #bbbebe;font-family: Bender,-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; }span3 {background-color: #2bf;position: relative;top: 30px;right: 270px;font-size: x-small; }h1 {position: relative;left: 140px;top: 10px;color: #f6f7f8;font-size: small;word-break: break-all;width: 280px; }.more {float: right;position: relative;top: 10px;background-color: #2bf;height: 25px;width: 120px;line-height: 25px;font-size: small;margin-right: 20px;text-align: right;color: black;font-family: Bender,'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; }.more1{float: right;position: relative;top: 10px;background-color: rgb(8, 14, 17);height: 35px;width: 120px;color:#f6f7f8;text-align: center;border: 1px solid #2bf; } .more1 a{line-height: 35px; }.more1:hover{background-color: #2bf; } .more1:hover a{color: black; }.photowall{height: 756px;width: 1400px;max-width: 1400px;position: relative;right: 200px;margin-top: 20%;font-size: 16px;overflow: hidden; } .wall{width: 1400px;height: 756px; } .photo{/* height: 100%; */float: left;display: block;margin-top: -20px;/* margin-left: 0; */overflow: hidden; } .img2{/* transition: all 0.5s; */transition: width 1s, height 1s, transform 1s; } .img2:hover{animation-name: big;animation-iteration-count: 1;animation-duration: 0.5s;animation-fill-mode:forwards;overflow: hidden;transform: scale(1.1, 1.1); }/* @keyframes big{to{transform: scale(1.1, 1.1);} } */ .photowall a{text-decoration: none;cursor: pointer; } .kaidie{position: absolute;top: 480px; } .qie{position: absolute;left: 280px;top:160px } .yaxin{position: absolute;top: 274px;right: 280px; } .chuxue{position: absolute;right: 0;top: 320px; } .kelage{position: absolute;left: 280px;top: 594px; } .banzi{position: absolute;left: 280px;top: 434px; } .aneng{position: absolute;right: 560px;top: 480px; } .xiaoyang{position: absolute;top: 434px;right: 280px; } .chuxue2{position: absolute;top: 594px;right: 280px; } .longm{position: absolute;top: 480px;right: 0px; } .map{background-image: url(./方舟/bk.jpg);z-index: 10;width: 100%;height: 1100px;background-repeat: no-repeat;background-size: 100% 100%; } ul{list-style: none; } .list{width: 35%;height: 35%;float: left;animation-name: float;animation-iteration-count: infinite;animation-duration: 3s;transition: all 1s; }.list:hover{transform: scale(1.1, 1.1); }.exp{animation-name: float;animation-iteration-count: infinite;animation-duration: 3s; }@keyframes float{50%{transform:translate(0px,3px);} }.stone{margin-top: -30px;} .zhenghe{width: 15%;height: 15%;margin-left: 60px;margin-top: -20px; } .ganran{width: 20%;height: 20%;margin-top: 200px;margin-left: -100px;/* margin-left: -150px; */ } .skill{width: 25%;height: 25%;margin-top: 150px;margin-left: -900px; } .city{width: 30%;height: 30%;margin-top: -900px;margin-left: 300px; } .Rode{width: 30%;height: 30%;margin-left: 450px;margin-top: -400px;overflow: hidden; }.exp1{position: relative;top: 580px;left: -480px;color: black;font-size: 40px;font-family: 宋體; } .exp2{position: relative;top:250px;left: -250px;color: black;font-size: 40px;font-family: 宋體; } .exp3{position: relative;top:520px;left: -250px;color: black;font-size: 40px;font-family: 宋體; } .exp4{position: relative;top:550px;left: -900px;color: black;font-size: 40px;font-family: 宋體; } .exp5{position: relative;top:-50px;/* left: -900px; */color: black;font-size: 40px;font-family: 宋體; } .exp6{position: relative;top:250px;/* left: 50px; */color: black;font-size: 40px;font-family: 宋體; } .top{border:1px solid #2bf;width: 60px;height: 25px;line-height: 25px;text-align: center;color: #fff;float: right;position: fixed;bottom: 10px;right: 30px;z-index: 15; } .top:hover{background-color: #2bf;color: black; }總結
以上是生活随笔為你收集整理的实现上一篇明日方舟官网仿制的代码的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： GNU C 、ANSI C、标准C、标准
- 下一篇： C++远征之封装篇——类和封装、实例化和