实现上一篇明日方舟官网仿制的代码
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
最新文章
- R语言相关性计算及使用ggcorrplot包相关性分析热力图可视化分析实战
- java倒计时自动关闭弹窗,打开页面弹出窗口子窗口定时自动关闭
- 【学术相关】是什么让女性在计算机史上“隐身”了？
- 连续 4 年成为“开发者最喜欢的语言”，这门编程语言你了解过吗？
- 用long类型让我出了次生产事故，写代码还是要小心点
- androidrunnable使用_Android Runnable 运行在那个线程
- 【JVM】第四章 Java内存模型
- 宝塔linux apache怎么部署证书,Linux+Apache部署SSL证书方法步骤
- 计算机可视化仿真技术opengl,基于OpenGL的三维场景可视化仿真
- swift python 性能_Swift 性能探索和优化分析
- 分页插件pagehelper ，在sql server 中是怎么配置的
- Linux for Matlab中文注释乱码（亲测有效）
- 《NX-OS与Cisco Nexus交换技术：下一代数据中心架构（第2版）》一2.9 本章小结...
- LINUX(CENTOS)下载编译nload
- 停车场管理系统软件详细设计说明书
- 李诞是怎么把吐槽变成一门生意的？
- 违反mysql三范式_违反数据库第三范式引发的一个问题
- 科技爱好者周刊：第 90 期
- poi删除带有合并单元格的行的问题
- 我国汽车的电磁辐射与电a磁兼容现状分析
热门文章
- oracle instant client卸载,Oracle Instant Client（即时客户端） 安装与配置
- 8000401a 错误及解决办法
- nsis升级包_NSIS制作软件升级安装包完整教程
- 微型计算机基础知识答案,计算机基础知识授课试题及答案
- 如何彻底删除SQL Server2005
- 苏州计算机应用能力中级办公自动化,苏州市计算机应用能力考核(中级-办公自动化)新系统使用..doc_人人文库网...
- php手机下载功能,phpwind手机客户端1.2版主要功能亮点详解
- phpstudy环境下安装部署moodle平台
- 74hc165C语言程序,单片机驱动74hc165程序
- mysql foxpro_|DBSync for FoxPro and MySQL(数据库同步工具)下载v4.7.1免费版 - 欧普软件下载...