基于HTML的阴阳师静态网页

败者_食尘

于 2024-04-28 20:15:09 发布

阅读量490

点赞数 18

文章标签： html 前端

本文链接：https://blog.youkuaiyun.com/li3123537691/article/details/138289287

版权

成果展示

仿制的是阴阳师官网，《阴阳师》手游官网神隐寻真

能力有限就做了一页，和官方比起来还差很多，可以看出我还是改了一些地方的，比如 16+ 适龄提醒

效果总览

功能

导航 + 下拉列表

此静态网页有大量跳转，都是官方的

比如下图

源码

源码 + 图片

链接：https://pan.baidu.com/s/14yvtLsAIophXbkLwO4SAXw
提取码：j3g5

HTML（index.html）代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>《阴阳师》手游官网  《阴阳师》手游官网_唯美奇幻 匠心巨制，开启唯美奇幻之旅</title>
        <!-- 引入网页的图标 -->
        <link rel="icon" href="images/favicon.ico">
        <!-- 引入全局样式 -->
        <link rel="stylesheet" href="css/reset.css">
        <!-- 引入首页的样式 -->
        <link rel="stylesheet" href="css/index.css">
    </head>
    <body>
        <!-- 头部开始 -->
        <div class="header">
            <div class="header-left">
                游戏全目录
            </div>
            <img src="./images/nie.1.webp">
            <div class="header-right">
                限时领取免费课程
            </div>
        </div>
        <!-- 头部开始 -->

        <!-- 导航开始 -->
        <div class="nav">
            <div class="wrap">
                <ul>
                    <li class="active">
                        <!-- 游戏福利下拉列表开始 -->
                        <a href="#">游戏福利</a>
                        <div class="nav-yxfl">
                            <ul>
                                <li><a href="#">新区预约</a></li>
                                <li><a href="https://yys.163.com/20231025/hgfl/" target="_blank" data-key="nav-yxfl">回归福利</a></li>
                                <li><a href="https://yys.163.com/2020/gift/" target="_blank" data-key="nav-yxfl">福利兑换</a></li>
                            <ul>
                        </div>
                        <!-- 游戏福利下拉列表结束 -->
                    </li>
                    
                    <li>
                        <!-- 式神录下拉列表开始 -->
                        <a href="#">式神录</a>
                        <div class="nav-ssl">
                            <ul>
                                <li><a href="https://yys.163.com/shishen/index.html?type=sp" target="_blank" data-key="nav-ssl">SP阶式神</a></li>
                                <li><a href="https://yys.163.com/shishen/index.html?type=ssr" target="_blank" data-key="nav-ssl">SSR阶式神</a></li>
                                <li><a href="https://yys.163.com/shishen/index.html?type=sr" target="_blank" data-key="nav-ssl">SR阶式神</a></li>
                                <li><a href="https://yys.163.com/shishen/index.html?type=r" target="_blank" data-key="nav-ssl">R阶式神</a></li>
                                <li><a href="https://yys.163.com/shishen/index.html?type=n" target="_blank" data-key="nav-ssl">N阶式神</a></li>
                                <li><a href="https://yys.163.com/shishen/index.html?type=ld" target="_blank" data-key="nav-ssl">联动式神</a></li>
                                <li><a href="https://yys.163.com/shishen/index.html?type=gt" target="_blank" data-key="nav-ssl">呱太</a></li>
                            </ul>
                        </div>
                        <!-- 式神录下拉列表结束 -->
                    </li>

                    <li>
                        <!-- 视听中心下拉列表开始 -->
                        <a href="#">视听中心</a>
                        <div class="nav-stzx">
                            <ul>
                                <li><a href="https://yys.163.com/media/video.html" target="_blank">动画视频</a></li>
                                <li><a href="https://yys.163.com/media/picture.html" target="_blank">原画壁纸</a></li>
                                <li><a href="https://www.onmyojimusic.com/" target="_blank">音扬师</a></li>
                                <li><a href="https://yys.163.com/dtbz/" target="_blank">动态桌面</a></li>
                            </ul>
                        </div>
                        <!-- 视听中心下拉列表结束 -->
                    </li>

                    <li>
                        <!-- 同人社区下拉列表开始 -->
                        <a href="#">同人社区</a>
                        <div class="nav-trsq">
                            <ul>
                                <li><a href="https://sp.163.com/activity/648840fe5b1aa203c1fbf726" target="_blank">大触觉醒</a></li>
                                <li><a href="https://sp.163.com/game/g37" target="_blank">精彩同人</a></li>
                            </ul>
                        </div>
                        <!-- 同人社区心下拉列表结束 -->
                    </li>

                    <li>
                        <!-- 游戏攻略下拉列表开始 -->
                        <a href="#">游戏攻略</a>
                        <div class="nav-yxgl">
                            <ul>
                                <li><a href="https://yys.163.com/skill/fresh/index.html" target="_blank">萌新上路</a></li>
                                <li><a href="https://yys.163.com/skill/shishen/index.html" target="_blank">式神御魂</a></li>
                                <li><a href="https://yys.163.com/skill/wanfa/index.html" target="_blank">秘闻副本</a></li>
                                <li><a href="https://yys.163.com/skill/douji/index.html" target="_blank">斗技阵容</a></li>
                            </ul>
                        </div>
                        <!-- 游戏攻略下拉列表结束 -->
                    </li>

                    <li>
                        <!-- 主题站下拉列表开始 -->
                        <a href="#">主题站</a>
                        <div class="nav-ztz">
                            <ul>
                                <li><a href="https://yys.163.com/collect/" target="_blank">数字藏品馆</a></li>
                                <li><a href="https://yys.163.com/2022/znqztz/" target="_blank">千年之守</a></li>
                                <li><a href="https://yys.163.com/2022/annals/" target="_blank">阴阳师编年史</a></li>
                                <li><a href="https://yys.163.com/2019/anniversary/" target="_blank">永不关闭的主题站</a></li>
                                <li><a href="https://yys.163.com/2021/tstx/" target="_blank">天魔归来</a></li>
                            </ul>                       
                        </div>
                        <!-- 主题站下拉列表结束 -->
                    </li>

                    <li>
                        <!-- 支持服务下拉列表开始 -->
                        <a href="#">支持服务</a>
                        <div class="nav-zcfw">
                            <ul>
                                <li><a href="https://gamepay.163.com/yys?channel=mkt_yx_cps_dev.gw" target="_blank">道具特惠</a></li>
                                <li><a href="https://gift.163.com/index_yys.html" target="_blank">周边商城</a></li>
                                <li><a href="https://yys.cbg.163.com/?exter=GAMEweb&dm_game=yys" target="_blank">藏宝阁</a></li>
                                <li><a href="https://yys.163.com/2020/zxtsm/" target="_blank">系统转移</a></li>
                            </ul>                 
                        </div>
                        <!-- 支持服务下拉列表结束 -->
                    </li>

                    <li>
                        <!-- 联系我们下拉列表开始 -->
                        <a href="#">联系我们</a>
                        <div class="nav-lxwm">
                            <div style="border: 1;">
                                <a href="#"><img class="contact1" src="./images/contact1.webp"></a>
                            </div>
                                
                        </div>
                        <!-- 联系我们下拉列表结束 -->
                    </li>

                </ul>
            </div>
        </div>
        <!-- 导航结束 -->

        <!-- banner开始 -->
        <div class="banner">
            <img src="./images/page1_f7c1502e.jpg" alt="" >
            <div class="logo">
                <a href="https://yys.163.com/index.html" target="_blank"></a>
            </div>
            <div class="age">
                <a href="./images/yuanshenqidong.webp"></a>
            </div>
            <div class="syxz">
                <a href="https://www.bilibili.com/video/BV1C44y1Q7zR/" target="_blank"></a>
            </div>
            <div class="mnqxz">
                <a href="https://yys.163.com/zmb/" target="_blank"></a>
            </div>
            <div class="sjdwfxz">
                <a href="https://yys.163.com/index.html" target="_blank"></a>
            </div>
            <div class="sl"></div>
            <div class="wyzfzx">
                <a href="https://gamepay.163.com/yys?channel=mkt_yx_cps_dev.gw" target="_blank"></a>
            </div>
            <div class="jrgw">
                <a href="https://yys.163.com/index.html" target="_blank"></a>
            </div>
            <div class="shentu"></div>
            <div class="jiantou">
            </div>
        </div>
        <!-- banner结束 -->

    </body>
</html>

CSS样式（index.css）代码：

/* 头部样式开始 */
.header{
    width: 100%;
    height: 55px;
    background-color: #fff;
    font-size: 15px;
    /* 行高等于高 一行文字垂直居中 行高具有继承性 */
    line-height: 55px;
}

.header-left{
    float: left;
    width: 179px;
    height: 55px;
    background-color:#cf1132;
    color: #fff;
}

.header-right{
    float: right;
    width: 138px;
    height: 54px;
    border-left: 1px solid #dadada;
    color: #333;
}

/* 头部样式结束 */


/* 导航样式开始 */
.nav{
    position: relative;
    width: 100%;
    height: 60px;
    line-height: 60px;
    /* 背景图片不平铺 位置是水平居中垂直居上 */
    background: url(../images/nav_bg_69230d91.webp) no-repeat center top;
    text-align: center;
}

/* 水平居中的容器  不设置高度 高度由内容撑开 因为整个页面水平居中使用同一个class*/
.wrap{
    width: 50%;
    margin: 0 auto;
    text-align: center;
}

.nav li{
    float: left;
    width: 84.3px;
    height: 70px;
}

.nav a{
    color: #d4bf9a;
    font-size: 14px;
}

.nav li:hover>a{
    color: #fff;
}

/* 下拉列表 */
/* 
核心思路：
1）下拉列表绝对定位
2）合适的父类元素相对定位
3）下拉列表display:none;隐藏
4）鼠标悬停时下拉列表display:block;显示
*/

/* 游戏福利下拉列表 */
.nav-yxfl{
    z-index: 666;
    position: absolute;
    /* 隐藏 */
    display: none;
    width: 0px;
    height: 20px;
}
.nav-yxfl li{
    background: url(../images/henxian.webp) 50% 0 no-repeat;
    background-color:rgb(35,23,12);
}
.nav-yxfl a{
    background-size: .77rem;
    font-size: .14rem;
    text-align: center;
}
.nav li:hover>.nav-yxfl{
    /* 显示 */
    display: block;
}

/* 式神录下拉列表 */
.nav-ssl{
    z-index: 666;
    position: absolute;
    /* 隐藏 */
    display: none;
    width: 70px;
    height: 70px;
}
.nav-ssl li{
    background: url(../images/henxian.webp) 50% 0 no-repeat;
    background-color:rgb(35,23,12);
}
.nav-ssl a{
    background-size: .77rem;
    font-size: .14rem;
    text-align: center;
}
.nav li:hover>.nav-ssl{
    /* 显示 */
    display: block;
}

/* 视听中心下拉列表 */
.nav-stzx{
    z-index: 666;
    position: absolute;
    /* 隐藏 */
    display: none;
    width: 70px;
    height: 70px;
}
.nav-stzx li{
    background: url(../images/henxian.webp) 50% 0 no-repeat;
    background-color:rgb(35,23,12);
}
.nav-stzx a{
    background-size: .77rem;
    font-size: .14rem;
    text-align: center;
}
.nav li:hover>.nav-stzx{
    /* 显示 */
    display: block;
}

/* 同人社区下拉列表 */
.nav-trsq{
    z-index: 666;
    position: absolute;
    /* 隐藏 */
    display: none;
    width: 70px;
    height: 70px;
}
.nav-trsq li{
    background: url(../images/henxian.webp) 50% 0 no-repeat;
    background-color:rgb(35,23,12);
}
.nav-trsq a{
    background-size: .77rem;
    font-size: .14rem;
    text-align: center;
}
.nav li:hover>.nav-trsq{
    /* 显示 */
    display: block;
}

/* 游戏攻略下拉列表 */
.nav-yxgl{
    z-index: 666;
    position: absolute;
    /* 隐藏 */
    display: none;
    width: 70px;
    height: 70px;
}
.nav-yxgl li{
    background: url(../images/henxian.webp) 50% 0 no-repeat;
    background-color:rgb(35,23,12);
}
.nav-yxgl a{
    background-size: .77rem;
    font-size: .14rem;
    text-align: center;
}
.nav li:hover>.nav-yxgl{
    /* 显示 */
    display: block;
}

/* 主题站下拉列表 */
.nav-ztz{
    z-index: 666;
    position: absolute;
    /* 隐藏 */
    display: none;
    width: 70px;
    height: 70px;
}
.nav-ztz li{
    background: url(../images/henxian.webp) 50% 0 no-repeat;
    background-color:rgb(35,23,12);
}
.nav-ztz a{
    background-size: .77rem;
    font-size: .14rem;
    text-align: center;
}
.nav li:hover>.nav-ztz{
    /* 显示 */
    display: block;
}

/* 支持服务下拉列表 */
.nav-zcfw{
    z-index: 666;
    position: absolute;
    /* 隐藏 */
    display: none;
    width: 70px;
    height: 70px;
}
.nav-zcfw li{
    background: url(../images/henxian.webp) 50% 0 no-repeat;
    background-color:rgb(35,23,12);
}
.nav-zcfw a{
    background-size: .77rem;
    font-size: .14rem;
    text-align: center;
}
.nav li:hover>.nav-zcfw{
    /* 显示 */
    display: block;
}

/* 联系我们下拉列表 */
.nav-lxwm{
    z-index: 666;
    position: absolute;
    /* 隐藏 */
    display: none; 
    margin-top: 0;
}

.nav li:hover>.nav-lxwm{
    /* 显示 */
    display: block;
}

/* 导航样式结束 */


/* banner样式开始 */
.banner{
    position: relative;
    top: -10px;
    width: 100%;
    height: 650px;
    /* 溢出部分隐藏 */
    overflow: hidden;
}

.banner>img{
    /* 子元素在父元素中水平居中 */
    position: absolute;
    left: 50%;
    margin-left: -960px;
}

/* 阴阳师logo */
.logo{
    position: absolute;
    left: 40px;
    width: 310px;
    height: 112px;
    top: -15px;
}

.logo>a{
    width: 310px;
    height: 112px;
    display: block;
    background: url(../images/logo_df3d0675.webp) no-repeat;
    background-size: 100%;
}

/* 适龄提醒 */
.age{
    position: absolute;
    width: 75.2px;
    height: 98.4px;
    top: 500px;
    left: 90%;
}
.age>a{
    display: block;
    width: 75.2px;
    height: 98.4px;
    background: url(../images/16.png) no-repeat;
    background-size: 100%;
}

/* 神隐寻真 */
.syxz{
    position: absolute;
    width: 550px;
    height: 300px;
    top: 350px;
    left: 30px;
}
.syxz>a{
    width: 550px;
    height: 300px;
    display: block;
    background: url(../images/slogan_fc36d2b5.webp) no-repeat;
    background-size: 100%;
    z-index: 300;
}

/* 模拟器下载 */
.mnqxz{
    position: absolute;
    width: 200px;
    height: 53.6px;
    top: 550px;
    left: 520px;
}
.mnqxz>a{
    display: block;
    width: 200px;
    height: 53.6px;
    background: url(../images/mumu_d54c2825.webp) no-repeat;
    background-size: 100%;
}

/* 手机端官服下载 */
.sjdwfxz{
    position: absolute;
    width: 200px;
    height: 53.6px;
    top: 550px;
    left: 730px;
}
.sjdwfxz>a{
    display: block;
    width: 200px;
    height: 53.6px;
    background: url(../images/sjd_7e039529.webp) no-repeat;
    background-size: 100%;
}

/* 十连 */
.sl{
    top: 560px;
    left: 64%;
    z-index: 600;
    background: url(../images/jltxt_ff323c5b.webp) no-repeat;
    background-size: auto;
    background-size: 100% 100%;
    height: 46.4px;
    position: absolute;
    width: 356px;
}

/* 网易支付中心 */
.wyzfzx{
    position: absolute;
    width: 196.8px;
    height: 75.2px;
    left: 73%;
    top: -15px;
}
.wyzfzx>a{
    display: block;
    width: 196.8px;
    height: 75.2px;
    background: url(../images/pay_9466b6a3.webp) no-repeat;
    background-size: 100%;
}

/* 进入官网 */
.jrgw{
    position: absolute;
    width: 196.8px;
    height: 75.2px;
    left: 88%;
    top: -15px;
}
.jrgw>a{
    display: block;
    width: 155.8px;
    height: 72.2px;
    background: url(../images/gw_f8b6390d.webp) no-repeat;
    background-size: 100%;
}

/* 浮动箭头 */
.jiantou{
    background: url(../images/slide_ef394b70.webp) no-repeat;
    background-size: 100% 100%;
    bottom: 100px;
    height: 128.8px;
    left: 44%;
    margin-left: -1.42rem;
    position: absolute;
    width: 208.4px;
}

/* 申屠子夜 */
.shentu{
    background: url(../images/mp_a9903245.webp) no-repeat;
    background-size: 100% 100%;
    height: 160.1px;
    left: 25%;
    position: absolute;
    top: 250px;
    width: 70.6px;
}

/* banner样式结束 */

CSS样式（reset.css）代码

body,div,dl,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,legend,
input,textarea,button,p,blockquote,th,td{margin: 0;padding: 0;}
li{list-style-type:none ;}
a{text-decoration: none;}
img{vertical-align: middle;}
body{text-align: center;}
li{align-items: center;}