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

news2024/12/27 10:22:25

前言

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

使用技术：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="期末设计.html" target="_top">首页</a></li>
                    <li><a href="角色介绍.html" target="_top">角色介绍</a></li>
                    <li><a href="女武神装甲.html" target="_top">女武神装甲</a></li>
                    <li><a href="动画短片.html" target="_top">动画短片</a></li>
                    <li><a href="最新活动.html" target="_top">最新活动</a></li>
                </ul>
                </div>  
            <div>
                <br><p align="left"><font size="5"><strong>游戏简介</strong></font></p>
                <p><font size="5">《崩坏3》——点燃国创动作游戏之魂！3D全视角卡通渲染、无限可能的分支连招，酣畅淋漓的超强打击感……打造次世代动作游戏！扣人心弦的崩坏系列故事、沉浸感十足的关卡剧情、豪华的声优阵容，更会让你感受到前所未有的代入感。与个性鲜明的女武神们朝夕相处，她们的羁绊将会成为你战斗的力量！</font></p>
            </div>
            <div>
               <img src="images/3.png" alt=""/>
               <img src="images/4.png" alt=""/>
               <img src="images/5.png" alt=""/>
               <dr><p><font size="7" color="#FF0000">「Captain on the bridge.」

从今天起，你就是我们的舰长了。
请和我们一起，为世界上所有的美好而战吧！


建议手机配置：安卓系统4.3以上，cpu4核以上，最佳配置运行内存4GB及以上，剩余存储空间5GB及以上
</font></p>
            </div>
        </dir>  
    </body>
</html>

2、角色介绍

该页面使用p标签和人span标签嵌入许多文本，将关于网站主题的介绍全部写到网页中，文字排版根据字数来进行，使用不会出现不协调的情况。在文字旁边，使用img标签嵌入一些图片，使得网页整体更加的美观。
在这里插入图片描述

代码：

<div>
                <img src="images/11.png" alt=""/>
                <p><font size="6"><strong>琪亚娜·卡斯兰娜</strong></font></p>
                <p><font size="5">生日   12月7日</font></p>
                <p><font size="5">角色背景</font></p>
                <p><font size="4.5">奥托混入第二律者西琳的基因制造的琪亚娜复制人K-423号，按照奥托的计划被齐格飞带走，进入圣芙蕾雅学园，和德丽莎等人接下牵绊。成熟后奥托将其回收，使西琳从其身上觉醒，试图以感情让琪亚娜摆脱西琳的压制，掌握空之律者的力量角色能力。</font></p>
                <p><font size="5">角色能力</font></p>
                <p><font size="4.5">琪亚娜（K-423）作为琪亚娜的复制人，有着卡斯兰娜家族的对崩坏能抗性，并在齐格飞的教导下学会卡斯兰娜祖传的枪斗术   。但是齐格飞并没有将枪斗术完全交给琪亚娜，导致琪亚娜只能靠天生的战斗才能将女武神格斗术生搬硬套进枪斗术中。体内有着西琳的基因，掌握部分空之律者的力量。在经过多次基础训练后，有着与生俱来就可以操纵大量崩坏能的律者的体质的琪亚娜跟着符华学习太虚剑气中的心蕴。</font></p>
              </div>

3、女武神装甲

该页面以img标签嵌入图片+table表格标签嵌入整齐的文字的形式，对图片的内容进行了简要的介绍。
在这里插入图片描述

代码：

<table border="1px" cellspacing="1px">
             <tr>
               <th style="width:20%">装甲名</th>
               <td>天穹游侠 </td>
             </tr>
             <tr>
               <th style="width:20%">角色名</th>
               <td>琪亚娜·卡斯兰娜</td>
             </tr>
             <tr>
               <th style="width:20%">稀有度</th>
               <td>A</td>
             </tr>
             <tr>
               <th style="width:20%">属性 </th>
               <td>机械</td>
             </tr>
             <tr>
               <th style="width:20%">特色</th>
               <td>爆发性物理输出角色</td>
             </tr>
             </table>