实现上一篇明日方舟官网仿制的代码

最新推荐文章于 2024-03-28 09:53:35 发布
最新推荐文章于 2024-03-28 09:53:35 发布
阅读量6k 收藏 41
点赞数 14
分类专栏： 前端学习 文章标签： html css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43479366/article/details/108579926
版权
本文详细介绍了如何使用HTML和CSS技术来仿制明日方舟官方网站的设计。首先，通过HTML构建了网站的基本结构，包括头部、主体内容和页脚等元素。接着，运用CSS和CSS3对页面进行美化，实现响应式布局、动态效果和视觉一致性。通过这个项目，读者可以深入理解HTML和CSS在网页设计中的应用。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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>&nbsp;|&nbsp;<a href="#" class="a1">注册</a>&nbsp;&nbsp;&nbsp;<a
                    href="#" 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>
                                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                            </span>
                                            <h1>明日方舟制作组通讯#4</h1>
                                            <a href="#" class="more">
                                                READ MORE&nbsp;+&nbsp;
                                            </a>
                            </a></td>
                        <td><a href="#" target="_blank">
                                <span1>新闻</span>
                                    <span2>2020.08.09</span>
                                        <span3>
                                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                            </span>
                                            <h1>[活动预告]SideStory[火蓝之心]复刻即将开启</h1><a href="#" class="more">
                                                READ MORE&nbsp;+&nbsp;
                                            </a>
                            </a></td>
                        <td><a href="#" target="_blank">
                                <span1>活动</span>
                                    <span2>2020.08.08</span>
                                        <span3>
                                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                            </span>
                                            <h1>明日方舟制作组通讯#3</h1><a href="#" class="more">
                                                READ MORE&nbsp;+&nbsp;
                                            </a>
                            </a></td>
                    </tr>
                    <tr>
                        <td><a href="#" target="_blank">
                                <span1>公告</span>
                                    <span2>2020.08.11</span>
                                        <span3>
                                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                            </span>
                                            <h1>[明日方舟]8月12号闪断更新公告</h1><a href="#" class="more">
                                                READ MORE&nbsp;+&nbsp;
                                            </a>
                            </a></td>
                        <td><a href="#" target="_blank">
                                <span1>公告</span>
                                    <span2>2020.08.10</span>
                                        <span3>
                                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                            </span>
                                            <h1>[明日方舟]8月10号封禁名单</h1><a href="#" class="more">
                                                READ MORE&nbsp;+&nbsp;
                                            </a>
                            </a></td>
                        <td><a href="#" target="_blank">
                                <span1>公告</span>
                                    <span2>2020.08.03</span>
                                        <span3>
                                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                            </span>
                                            <h1>[明日方舟]8月4号闪断更新公告</h1><a href="#" class="more">
                                                READ MORE&nbsp;+&nbsp;
                                            </a>

                            </a></td>
                    </tr>
                </table>
            </div>

            <div class="more1"><a>→&nbsp;&nbsp;更多情报</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&#
最低0.47元/天 解锁文章
仿明日方舟网页html,《明日方舟》干员列表实现
weixin_39978350的博客
06-18 1819
各位朋友们！W 的活动快要结束了，各位抽到了吗？刚刚又来了一次十连，又歪了，感觉跟 W 要无缘了????。这次分享一个布局小技巧，在网页中实现元素的横向排版。@ARKNIGHTS这是《明日方舟》的干员列表页面。仔细观察一下，会发现元素排版从上倒下，如果空间不够，会挤到第二列。而正常的元素排版是从左到右，如果空间不够，会挤到第二行。再来个图演示一下效果。虽然在平时开发中很少会遇到，但是还是有的，比如 bi...
JSP+ssm计算机毕业设计明日方舟游戏资料网站的设计与实现wf949【源码、数据库、LW、部署】
嘉人Java毕设程序源码
01-26 679
Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX（Webstorm也行）+ Eclispe（IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持）。SSM + mybatis + Maven + JSP 等等组成，B/S模式 + Maven管理等等。1. 使用Navicat或者其它工具，在mysql中创建对应名称的数据库，并导入项目的sql文件；其他版本理论上也可以。2. 使用IDEA/Eclipse/MyEclipse导入项目，修改配置，运行项目；
明日方舟官网主页的粗糙仿制【HTML+CSS作业2】
weixin_43479366的博客
09-14 3830
因为我自己是手游明日方舟的爱好玩家 所以在老师让我们自己找一些官网仿照去实现的时候毫不犹豫地选择了明日方舟的官网 最后仿制了一点点，发现原来实现这些前端页面没有想象中的容易 下面是尝试仿制的实现结果 和官网的差别还是很明显的，也更加清楚的认识到了自己的不足。 ...
2023 明日方舟本地一键端源码 无需虚拟机 自带gm后台
10-23 1620
02、点开启动器（点开前确认自己安装了手机模拟器，比如雷电），服务端输入自己的 ip+:38660（不要忘了前面的 http://，之前以为不需要提呢~），就是 config.json 那一行。03、重要，输入完新的服务端 ip 之后，退出游戏，关闭数据库和服务端那两个文件，全部重新开一次，这个修改才会生效！config.json 文件里的是”url”:”http://192.168.2.101:38660″,网络连接不上的原因，最主要的是 IP 格式不对。没有装环境的记得先安装，装过的就不用了。
2021年明日方舟[限定寻访·春节]【月隐晦明】限时寻访抽卡模拟器源代码（自制）
see_you_codes的博客
02-03 2761
这是我自己编写的源代码，本人属于菜鸟，代码编写不好，请多包涵，也欢迎来讨论！ 卡池描述： 活动时间：02月05日 16:00 - 02月19日 03:59 活动说明：活动期间【限定寻访·春节】系列寻访【月隐晦明】寻访开启，该寻访中以下干员出现率上升 ★★★★★★：夕[限定] \ 嵯峨（占6★出率的70%） ★★★★★：乌有（占5★出率的50%） ★★★★★★：年[限定] （在6★剩余出率【30%】中以5倍权值出率提升） 寻访数据契约交换所开启时间：02月05日 16:00 - 02月19日 03:59
仿明日方舟网页html,明日方舟【仿临光家客厅】主题系列家具上线
weixin_42465885的博客
06-18 388
新系列家具即将上线，博士们可以通过活动奖励及兑换(部分)，家具商店限时贩售(部分)来获取这全新的【仿临光家客厅】系列家具。仿临光家客厅/佐菲娅资助玛莉娅的客厅。和从前的家还是有所区别。不得不说鞭刃佐菲娅出售阔绰，建造的客厅一看充满了贵族风格，从灯饰到装饰品再到陈列的各种家具，都属于价值不菲的那种类型。整体布局出了贵族风范还搭配了现代化风格的布局和家具艺术。衣柜中摆放了一整套的盔甲，鉴于这是玛莉娅的...
仿明日方舟网页html,明日方舟仿临光家客厅家具怎么获得_明日方舟仿临光家客厅家具图文一览_玩游戏网...
weixin_39926678的博客
06-18 187
《明日方舟》2021年劳动节礼包兑换码明日方舟2021年春节礼包兑换码是什么？怎么获得？小编今天带来了明日方舟2021年春节礼包兑换码获得方法，想要领取奖励的玩家们可不要错过了哦！>>>《明日方舟》礼包码大全明日方舟2021年春节礼包兑换码TKNHX44ZBREQISR2奖励：门币*20000、寻访凭证*1兑换码使用方法：礼包码兑换使用请前往官网-个人中心进行兑换，玩家在兑换完礼...
明日方舟收菜脚本 autojsPro9、nodejs、typescript、vue2、vant
qq_42339350的博客
11-25 594
明日方舟收菜脚本 autojsPro9、nodejs、typescript、vue2、vant
前端实例——明日方舟PRTS时装回廊
re_uzume1的博客
08-02 783
前端练习
arknights-react:Arknights 明日方舟复刻（React）
05-14
Arknights 明日方舟复刻（React） 地址 npm i npm run start 技术选择 react 套餐 react-hook typescript less css 预处理 howler 音频管理 Live2dHelper live2d parallax-js 视差动效 界面预览 页面布局 首页 :check_mark_button: 作战 章节选择 :check_mark_button: 关卡选择 编队 干员 :check_mark_button: 采购中心 可露希尔的推荐 :check_mark_button: 源石交易所 组合包 时装商店 凭证交易所 家具商店 信用交易所 公开招募 :check_mark_button: 干员寻访 任务 基建 仓库 :check_mark_button: 道具详情 :check_mark_button: 干员加入（抽卡） :check_mark_button: 数据来源 来源 数据类型 明细 明日方舟WIKI 图片、数据 道具列表、干员列表、干员立绘... 明日方舟官网 图标、纹理、音频、音效 -
基于python的明日方舟护肝助手源码.zip
06-06
基于python的明日方舟护肝助手源码.zip
明日方舟抽卡模拟器.exe
05-29
自己写了一个明日方舟抽卡模拟器。含新干员，没有50抽之后逇概率up。
Auto.Js_Arknights:我的《明日方舟》收菜日常-自用脚本-安卓手机-Auto.Js
03-21
AutoJs_Arknights 我的《明日方舟》收菜日常-自用脚本-安卓手机-Auto.Js 说明：大部分为识图点击，小部分是固定坐标点击， mrfz文件夹内为图片压缩包 修改时间：2021年3月21日20:38:24 作战 彩6联动期间，周一，周四，周六，周日刷OD-8，其他时间刷OD-7 基建换班（固定干员） 分两批换班（早班，晚班）（早晚可互换），约12小时换一次（以中午12点为中间线，超过12点就是晚班）控制中枢，会客室，发电站为一班（共10个干员，刚好填满2、3号宿舍） 早班： 控制中枢： A组：阿米娅，闪击，战车，红，霜华 B组：诗怀雅，灰喉，清道夫，杜宾，陈 会客室： A组：暗索，安洁丽娜 B组：极境，梅 发电厂1号：伊芙利特<->格雷伊 发电厂2号：阿消<-> THRM-EX 发电厂3号：雷蛇<-> Lancet-2 晚班： 制造站1号（经验）： A组：霜叶，断罪者
AutoArknights:全图形化，可远程的自动明日方舟工具
04-24
项目主功能暂时不好使。。又是个有生之年。。 我要开始干了 我咕了 AutoArknights 自动明日方舟 图形化界面 基础设置简单操作，一键启动 无限多开 想几个号就几个号，一个程序，N 个多开(只要你电脑受得了 远程多开 随时随地，想肝就肝，边工作边肝 多设备 模拟器/手机，随时用，连上就能用 多平台 Python3 语言，PyQt5 新版图形界面，全平台兼容 天adb只做了windows的 基于 scrcpy 在 Windows 中显示界面 目前已停用 添加企鹅物流数据统计 api 数据汇报 刷图规划 只有手动，更复杂的功能没做 按照 GPLv3 协议开源 任何以此为名的付费商业应用或服务均为假的 有什么问题 bug 请添加 issue 未来准备实现的功能 OCR 自动确认日常任务 定位其他快捷关卡
ArknightsGameData:《明日方舟》游戏数据
03-30
ArknightsGameData 《明日方舟》游戏数据 3.26：因更新用服务器位于本地，正在解决Github被屏蔽的问题，解决前可能出现无法及时更新的情况，敬请谅解。
从零开始的明日方舟python脚本创作（二）UI模块
hailoneko的博客
05-14 1147
引入的包 import tkinter as tk #python自带的 import threading#python自带的 import time#python自带的 import Core#概述中提到的自己写的核心模块，不涉及到相关功能可移除 import math#python自带的 import random#python自带的 tkinter主要用来绘制UI界面 threading开启一个新线程，主要用来刷新功能模块信息。 time开启线程睡眠时间 Core连接UI模块和功能模块 math主要
探索《明日方舟》游戏资源库：ArknightsGameResource
最新发布
gitblog_00041的博客
03-28 747
探索《明日方舟》游戏资源库：ArknightsGameResource ArknightsGameResource明日方舟客户端素材项目地址:https://gitcode.com/gh_mirrors/ar/ArknightsGameResource 项目简介 是一个开放源代码的项目，旨在为《明日方舟》(Arknights) 的玩家和开发者提供一个全面的游戏资源集合。在这里，你可以找到游戏中各...
web期末设计 自选3 明日方舟网站
人生当苦无妨
08-20 4601
web设计 自选3 明日方舟网站 首页 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>关于</title> <link rel="stylesh
明日方舟抽卡数据库UI重大更新
瑾辞的博客
10-15 8683
没错，这次更新主要针对的是网页的风格化，原先是用的“vueadmin”的默认风格，虽然也很好看，但是所有网站都长这样也不太好吧，于是我借鉴了《明日方舟》的UI风格做了款新UI，并且整合了两个组件，一个是ArkVoice，代替原来的通告栏。网页版其实是针对电脑用户开发的，即使也适配了手机端，但是操作逻辑，和一些页面的布局和正常手机操作还有些偏差，所以建议习惯使用手机的用户可以用我们的小程序版本，账号是和网页版互通的。不知道大家有没有发现网页版的方舟抽卡数据库的UI发生变化了呢，首先来看下新版的登录页封面。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值