静态网页设计——崩坏3（HTML+CSS+JavaScript）

关注

VIP免费原创最新推荐文章于 2026-11-02 16:07:16 发布 1.1k 阅读 AI 写同款· GEO 优化 ›

Chrome DevTools 移动端调试全攻略：从模拟器到真机性能优化在移动Web开发、混合应用和响应式设计中，高效定位和解决移动端特有问题是核心挑战。Chrome DevTools提供了一套完整的调试工作流，其原理在于通过设备模拟和真机远程调试，实现对移动端页面网络、渲染、脚本执行和性能的深度透视。这项技术的价值在于极大提升了开发效率，使开发者能在不依赖频繁真机部署的情况下精准排查问题。其应用场景广泛覆盖了移动端页面样式调试、JavaScript异常捕获、网络性能分析和内存泄漏排查。本文聚焦于利用Chrome DevTools进行移动端调试，特别是通过深入解读Network 阅读详情

前言

声明：该文章只是做技术分享，若侵权请联系我删除。！！
感谢大佬的视频：

使用技术：HTML+CSS+JS（静态网页设计）
主要内容：对游戏崩坏3进行简单介绍。
https://www.bilibili.com/video/BV1uN4y1q74P/?vd_source=5f425e0074a7f92921f53ab87712357b

主要内容

1、首页

首页用html标签分割成多个区域，每个区域都是用子div标签继续进行更加细致的分割，并且使用css设置样式，将每个区域想显示的效果用css设计出来，最后根据px单位进行划分，精准的分割页面格式化。
在这里插入图片描述

代码：


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>崩坏3</title>
        <link href="css.css" rel="stylesheet" type="text/css"/>
    </head>
    <body>
        <dir style="border-style:solid;border-width:1px;padding-right: 200px;padding-left: 200px;margin:0 auto">
            <hr color="grey"/>
            <div id="nav_bg">
                <div class="jj">
                <h2><img src="images/logo_bh3.png" alt=""/></h2>
                <ul>
                    <li><a href=