明日方舟官网主页的粗糙仿制【HTML+CSS作业2】

最新推荐文章于 2023-12-25 15:11:08 发布
最新推荐文章于 2023-12-25 15:11:08 发布
阅读量3.2k 收藏 8
点赞数 5
分类专栏： 前端学习 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43479366/article/details/108579708
版权

因为我自己是手游明日方舟的爱好玩家
所以在老师让我们自己找一些官网仿照去实现的时候毫不犹豫地选择了明日方舟的官网
最后仿制了一点点，发现原来实现这些前端页面没有想象中的容易
下面是尝试仿制的实现结果
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

和官网的差别还是很明显的，也更加清楚的认识到了自己的不足。

想睡懒觉的鱼
关注
  • 5
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
实现上一篇明日方舟官网仿制的代码
weixin_43479366的博客
09-14 5173
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">
仿明日方舟网页html,《明日方舟》干员列表实现
weixin_39978350的博客
06-18 1526
各位朋友们！W 的活动快要结束了，各位抽到了吗？刚刚又来了一次十连，又歪了，感觉跟 W 要无缘了????。这次分享一个布局小技巧，在网页中实现元素的横向排版。@ARKNIGHTS这是《明日方舟》的干员列表页面。仔细观察一下，会发现元素排版从上倒下，如果空间不够，会挤到第二列。而正常的元素排版是从左到右，如果空间不够，会挤到第二行。再来个图演示一下效果。虽然在平时开发中很少会遇到，但是还是有的，比如 bi...
明日方舟游戏资料网站的设计与实现(JSP+java+springmvc+mysql+MyBatis)
最新发布
sryue02的博客
12-25 412
这种网站可以提供丰富的游戏攻略、角色资料、活动公告等信息，帮助玩家更好地了解游戏内容和玩法。+ Maven +mysql5.7或8.0+html+css+js等等组成，B/S模式 + Maven管理等等。用户发送请求：用户通过浏览器或其他客户端向系统发送请求，请求访问特定的页面或执行特定的操作。前端展示结果：前端接收到后端返回的数据，根据需要进行展示。可以是渲染页面、显示提示信息等。数据返回给前端：后端程序处理完业务逻辑后，将结果数据返回给前端。后端程序接收到请求后，根据请求的类型和参数进行相应的处理。
web期末设计 自选3 明日方舟网站
人生当苦无妨
08-20 3988
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
仿明日方舟网页html,明日方舟【仿临光家客厅】主题系列家具上线
weixin_42465885的博客
06-18 295
新系列家具即将上线，博士们可以通过活动奖励及兑换(部分)，家具商店限时贩售(部分)来获取这全新的【仿临光家客厅】系列家具。仿临光家客厅/佐菲娅资助玛莉娅的客厅。和从前的家还是有所区别。不得不说鞭刃佐菲娅出售阔绰，建造的客厅一看充满了贵族风格，从灯饰到装饰品再到陈列的各种家具，都属于价值不菲的那种类型。整体布局出了贵族风范还搭配了现代化风格的布局和家具艺术。衣柜中摆放了一整套的盔甲，鉴于这是玛莉娅的...
JSP+ssm计算机毕业设计明日方舟游戏资料网站的设计与实现wf949【源码、数据库、LW、部署】
嘉人Java毕设程序源码
01-26 622
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导入项目，修改配置，运行项目；
前端实例——明日方舟PRTS时装回廊
re_uzume1的博客
08-02 508
前端练习
前端代码+HTML+CSS+苏宁易购仿制H5首页+仅供参考
09-21
前端代码+HTML+CSS+苏宁易购仿制H5首页+仅供参考，前端代码+HTML+CSS+苏宁易购仿制H5首页+仅供参考前端代码+HTML+CSS+苏宁易购仿制H5首页+仅供参考前端代码+HTML+CSS+苏宁易购仿制H5首页+仅供参考前端代码+HTML+CSS+...
拼多多项目，网站仿照官网 使用html+css
05-26
在本项目中，我们主要关注的是使用HTML、CSS和JavaScript技术来仿制拼多多官方网站的界面。这个项目旨在提升开发者在前端开发方面的技能，通过实际操作理解网页构建的基本流程和细节。 首先，HTML（HyperText ...
web前端 html+css+js+jquery 网易云音乐官网模仿
06-27
前端培训时自己参照网易云音乐官网仿制的网站
ArknightsGameData:《明日方舟》游戏数据
03-30
ArknightsGameData 《明日方舟》游戏数据 3.26：因更新用服务器位于本地，正在解决Github被屏蔽的问题，解决前可能出现无法及时更新的情况，敬请谅解。
仿王者荣耀官网(HTML+CSS).rar
02-03
在"王者荣耀.html"这个文件中，我们可以预见到HTML代码被用来构建了一个类似于王者荣耀官方网站的页面结构。HTML文档通常由头部（head）、主体（body）两部分组成，头部包含元信息如标题，而主体则包含了用户在...
html+css仿小米商城首页搜索页和商品详情页
12-30
在这个“html+css仿小米商城首页搜索页和商品详情页”的作业中，我们将深入探讨如何利用这两种语言来创建类似于小米商城的页面设计。 首先，HTML（HyperText Markup Language）是用于创建网页内容的标记语言。它...
仿华为主页HTML+CSS+JavaScript
07-01
本项目"仿华为主页HTML+CSS+JavaScript"旨在通过实际操作，学习和理解这三者的协同工作原理，以及如何利用它们来创建一个类似于华为官方网站的页面。接下来，我们将深入探讨这些知识点。 首先，HTML（HyperText ...
明日方舟页面球体动画
虚青海的博客
07-15 1180
对球体网格动画名称的一次搜索过程
【Canvas实战】仿明日方舟 Logo 粒子动画
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
12-02 961
输出内容才能更好的理解学习的知识对于Canvas不够了解的同学，欢迎查阅前文《一文入坑【Canvas】多图与案例详解》[1]前言????如果你是明日方舟玩家肯定对游戏官网[2]有深刻的印象，不得不说鹰角的前端很厉害。作为前端开发者肯定是第一时间F12开始审查元素????不难发现页面中不少特效都是通过<canvas>标签实现的。例如这个阵营Logo的粒子动画：很明显使用了 canvas2d 中的 像...
html+css+网页设计简单仿OPPO官网
12-16
以下是一个简单的HTML+CSS网页设计仿OPPO官网的例子： ```html <!DOCTYPE html> <html> <head> <title>OPPO官网仿制</title> <style type="text/css"> body { margin: 0; padding: 0; font-family: Arial, sans-serif; } .header { background-color: #fff; height: 80px; border-bottom: 1px solid #ccc; display: flex; justify-content: space-between; align-items: center; padding: 0 50px; } .logo { font-size: 30px; font-weight: bold; color: #333; } .nav { display: flex; align-items: center; } .nav li { list-style: none; margin-left: 20px; } .nav a { text-decoration: none; color: #333; font-size: 16px; font-weight: bold; } .banner { background-image: url(https://cdn.pixabay.com/photo/2016/11/29/05/45/astronomy-1867616_960_720.jpg); background-size: cover; height: 500px; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #fff; text-align: center; } .banner h1 { font-size: 60px; margin: 0; line-height: 1.2; } .banner p { font-size: 24px; margin: 20px 0 0; } .content { padding: 50px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } .card { width: 30%; background-color: #fff; box-shadow: 0 0 10px rgba(0,0,0,0.1); margin-bottom: 50px; transition: all 0.3s ease-in-out; } .card:hover { transform: translateY(-10px); box-shadow: 0 15px 20px rgba(0,0,0,0.3); } .card img { width: 100%; height: 200px; object-fit: cover; } .card h2 { font-size: 24px; margin: 20px 0 10px; } .card p { font-size: 16px; margin: 0; color: #666; } .card button { background-color: #f00; color: #fff; border: none; padding: 10px 20px; font-size: 16px; margin-top: 20px; cursor: pointer; transition: all 0.3s ease-in-out; } .card button:hover { background-color: #fff; color: #f00; border: 1px solid #f00; } .footer { background-color: #333; color: #fff; padding: 50px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } .footer p { margin: 0; font-size: 16px; } .footer a { color: #fff; text-decoration: none; font-size: 16px; margin-left: 20px; } </style> </head> <body> <header class="header"> <div class="logo">OPPO</div> <ul class="nav"> <li><a href="#">首页</a></li> <li><a href="#">产品</a></li> <li><a href="#">服务</a></li> <li><a href="#">社区</a></li> <li><a href="#">关于我们</a></li> </ul> </header> <section class="banner"> <h1>Find X3 Pro</h1> <p>探索更多，发现更多</p> </section> <section class="content"> <div class="card"> <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg"> <h2>OPPO Find X3 Pro</h2> <p>全新一代旗舰，探索更多，发现更多</p> <button>了解更多</button> </div> <div class="card"> <img src="https://cdn.pixabay.com/photo/2016/11/29/05/45/astronomy-1867616_960_720.jpg"> <h2>OPPO Find X3 Pro</h2> <p>全新一代旗舰，探索更多，发现更多</p> <button>了解更多</button> </div> <div class="card"> <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg"> <h2>OPPO Find X3 Pro</h2> <p>全新一代旗舰，探索更多，发现更多</p> <button>了解更多</button> </div> </section> <footer class="footer"> <p>版权所有 © 2021 OPPO</p> <div> <a href="#">关于我们</a> <a href="#">联系我们</a> <a href="#">加入我们</a> <a href="#">服务中心</a> </div> </footer> </body> </html> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值