实现上一篇明日方舟官网仿制的代码
2024-06-05 15:44:14
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;
}
实现上一篇明日方舟官网仿制的代码相关推荐
- 手把手教你上手Git并上传项目到GitHub官网
手把手教你上手Git并上传项目到GitHub官网 Learning Git Branch: 学习 Git 最好的游戏及教程 https://learngitbranching.js.org 这个就是那 ...
- 项目笔记一-----------------iphone官网仿制
项目目录 iphone官网仿制 项目框架(HTML) 头标签 Body标签 顶部广告 导航栏 选购栏 推荐产品 产品分类 项目效果(CSS) 重要代码 全部代码 iphone官网仿制 需求:在不同的设 ...
- html大气网页模板,HTML蓝色大气形式扁平企业官网网页模板代码
模板描述:蓝色 大气 扁平企业官网.HTML蓝色大气形式扁平企业官网网页模板代码HTML模板下载 代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 diversity 4 variant ...
- python爬取千图网_python爬取lol官网英雄图片代码
python爬取lol官网英雄图片代码可以帮助用户对英雄联盟官网平台的皮肤图片进行抓取,有很多喜欢lol的玩家们想要官方的英雄图片当作自己的背景或者头像,可以使用这款软件为你爬取图片资源,操作很简单, ...
- CSS之vertical-align之野史篇（超越官网的教程）
我相信大家一定都在Css的官网上看过这个属性,也看了官网上的一个例子.官网上展示的是一个兔子图片和一行文字对齐的故事.但是,我也相信很多人和我一样,看完官网的例子依然没有彻底弄清这个属性到底该怎么使用 ...
- oppo官网首页html代码里,仿oppo官网手机商城建站模板html源码
OPPO仿建站模板html下载 资源下载此资源下载价格为4D币,请先登录 资源文件列表 codedown123-0802-27/css/base.css , 569 codedown123-0802- ...
- 《方块方舟》自定义服务器工具,新闻-方块方舟官网-ARK正版授权-开放式体素沙盒生存游戏...
自从<方块方舟>上架Steam启动Early Access(抢先体验)以来,我们已深切感受到了大家的热情,同时也深刻认识到做好<方块方舟>的责任与义务.对于<方块方舟&g ...
- 电脑上打不开oracle官网,win10系统oracle监听服务无法打开的详细教程
有关win10系统oracle监听服务无法打开的操作方法想必大家有所耳闻.但是能够对win10系统oracle监听服务无法打开进行实际操作的人却不多.其实解决win10系统oracle监听服务无法打开 ...
- 在AIX上配置infiniband--来自IBM官网
http://www.ibm.com/developerworks/aix/library/au-infiniband/
- 分享一个网址 上面的 python 库比官网还全........ .
来自: http://blog.csdn.net/rav009/article/details/14978419 http://www.lfd.uci.edu/~gohlke/pythonlibs
最新文章
- 同时上哈佛，还一起一作发Nature！这对95后学霸情侣让人慕了……
- 在自定义的数据集上训练YOLOv5详细教程分享
- “金财工程”网络安全 五
- CentOS文件浏览器设置
- ts包、表、子表、section的关系
- [LeetCode] Binary Tree Postorder Traversal 二叉树的后序遍历
- 浏览器左上角的网站图标
- 程序员在未来会变成廉价劳动力（农民工）吗？
- [BZOJ3992]序列统计
- idea 点击右侧栏找不到git或者svngit的基本使用
- 2020FME博客大赛——基于FME的海量数据点高效率抽稀技术及实现
- 运用matlab求黑塞矩阵,用matlab求黑塞矩阵
- PyCharm怎么来更新pip
- cookie用法--抽屉网的自动登录（cookie是通过代码自动获取的）
- php 405错误怎样重现,phpmyadmin出现405错误怎么办？
- 【他来了】云顶之奕 手游账号注册!国服可玩!
- 脑洞文之去火星搞IT!
- 导出到word时，报错，com组件错时，酱紫弄——————从同事那里抄滴
- php7的浮点数,php7.1浮点数运算问题
- excel计算机不准确,Excel排序不准确的解决方法