目录
1. 项目搭建
1.1 在项目开始之前，先做好准备工作，创建这样的文件目录。
1.1.1 css文件夹
包含三个css文件，分别是base.css、index.css.
1.1.2 images文件
里面放一些固定的图片
1.1.3 js文件
1.1.4 font
我们的字体图标库。
1.2 HTML结构
1.2.1 头部引入文件
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>阴阳师</title>
<!-- 引入初始化样式 -->
<link rel="stylesheet" href="./css/base.css">
<!-- 引入iconfont图标 -->
<link rel="icon" href="./images/favicon.ico">
<!-- 引入首页样式 -->
<link rel="stylesheet" href="./css/index.css">
<!-- 引入JS -->
<script src="./js/index.js"></script>
<!-- 引入字体图标 -->
<link rel="stylesheet" href="./font/iconfont.css">
</head>
1.2.2 主体结构
1.2.3 index.html代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>阴阳师</title>
<!-- 引入初始化样式 -->
<link rel="stylesheet" href="./css/base.css">
<!-- 引入iconfont图标 -->
<link rel="icon" href="./images/favicon.ico">
<!-- 引入首页样式 -->
<link rel="stylesheet" href="./css/index.css">
<!-- 引入JS -->
<script src="./js/index.js"></script>
<!-- 引入字体图标 -->
<link rel="stylesheet" href="./font/iconfont.css">
</head>
<body>
<!-- 开服倒计时 -->
<section class="countDown">
<span class="hours"></span>
<i class="one">:</i>
<span class="minute"></span>
<i class="one">:</i>
<span class="second"></span>
<em class="tc iconfont icon-xhao"></em>
<div class="count"></div>
</section>
<!-- 头部模块开始 -->
<header class="header">
<div class="left">
游戏全目录
</div>
<div class="center">
<a href="javascript:;"><img src="./images/logo_b5525b7.png" alt=""></a>
</div>
</header>
<!-- 头部模块结束 -->
<!-- 广告模块开始 -->
<section class="banner">
<header class="header_top">
<ul class="header_list">
<Li class="active"><a href="javascript:;">官网首页</a></Li>
<Li><a href="javascript:;">新闻资讯</a></Li>
<Li><a href="javascript:;">式神录</a></Li>
<Li><a href="javascript:;">游戏攻略</a></Li>
<Li><a href="javascript:;">大社区</a></Li>
<Li><a href="javascript:;">泛娱乐</a></Li>
<Li><a href="javascript:;">视听中心</a></Li>
<Li><a href="javascript:;">主题站</a></Li>
<Li><a href="javascript:;">周边商城</a></Li>
<Li><a href="javascript:;">藏宝图</a></Li>
<Li><a href="javascript:;">官方渠道</a></Li>
<Li><a href="javascript:;">数字藏品馆</a></Li>
<Li><a href="javascript:;">福利兑换</a></Li>
<Li><a href="javascript:;">系统转移</a></Li>
<Li><a href="javascript:;">道具优惠</a></Li>
</ul>
<ul class="tab_list">
<li class="active">
<a href="javascript:;">
<img src="./images/top.jpeg" alt="">
</a>
<a href="javascript:;">
<img src="./images/top2 (2).jpeg" alt="">
</a>
<a href="javascript:;">
<img src="./images/top2.jpeg" alt="">
</a>
<a href="javascript:;">
<img src="./images/top3.jpeg" alt="">
</a>
<a href="javascript:;">
<img src="./images/top4.jpeg" alt="">
</a>
<a href="javascript:;">
<img src="./images/top7.jpeg" alt="">
</a>
<a href="javascript:;">
<img src="./images/top6.jpeg" alt="">
</a>
</li>
<li>
<a href="javascript:;">
<img src="./images/1.jpg" alt="" title="《阴阳师》爵士音乐专辑首发，庭院背景音乐功...">
<i>新闻</i>
<em>《阴阳师》爵士音乐专辑 <br>首发，庭院背景音乐功...</em>
</a>
<a href="javascript:;">
<img src="./images/2.jpg" alt="" title="《阴阳师》手游10月26日维护更新公告">
<i>公告</i>
<em>《阴阳师》手游10月26日<br>维护更新公告</em>
</a>
<a href="javascript:;">
<img src="./images/3.jpg" alt="" title="《阴阳师》万圣节糖糖乱斗活动即将开启">
<i>新闻</i>
<em>《阴阳师》万圣节糖糖乱<br>斗活动即将开启</em>
</a>
<a href="javascript:;">
<img src="./images/4.jpg" alt="" title="《阴阳师》全新BOSS特国天即将降临！">
<i>新闻</i>
<em>《阴阳师》全新BOSS特<br>国天即将降临！</em>
</a>
<a href="javascript:;">
<img src="./images/5.jpg" alt="" title="心网缚爱，春茵横生《阴阳师》络新妇新皮肤上线">
<i>新闻</i>
<em>心网缚爱，春茵横生《阴<br>阳师》络新妇新皮肤上线</em>
</a>
</li>
<li>
<a href="javascript:;">
<img src="./images/ss_1_2fa7e81.jpg" alt="" title="联动">
<span>联动</span>
</a>
<a href="javascript:;">
<img src="./images/ss_2_a4916b4.jpg" alt="" title="SP">
<span>SP</span>
</a>
<a href="javascript:;">
<img src="./images/ss_3_017abcd.jpg" alt="" title="SSR">
<span>SSR</span>
</a>
<a href="javascript:;">
<img src="./images/ss_4_645f86e.jpg" alt="" title="SR">
<span>SR</span>
</a>
<a href="javascript:;">
<img src="./images/ss_5_c5d311e.jpg" alt="" title="R">
<span>R</span>
</a>
<a href="javascript:;">
<img src="./images/ss_6_0364095.jpg" alt="" title="N">
<span>N</span>
</a>
<a href="javascript:;">
<img src="./images/ss_7_b15e26d.jpg" alt="" title="呱太">
<span>呱太</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="./images/pic_1_fb5f1d1.jpg" alt="" title="萌新上路">
<span>萌新上路</span>
</a>
<a href="javascript:;">
<img src="./images/pic_2_f1ba243.jpg" alt="" title="式神御魂">
<span>式神御魂</span>
</a>
<a href="javascript:;">
<img src="./images/pic_4_171aa2f.jpg" alt="" title="秘闻副本">
<span>秘闻副本</span>
</a>
<a href="javascript:;">
<img src="./images/pic_4_171aa2f (1).jpg" alt="" title="斗技阵容">
<span>斗技阵容</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="./images/529b56aa-53fb-451c-91d5-d6ec1fda401c.jpg" alt="" title="百绘罗衣式神皮肤设计大赛">
<em class="em">百绘罗衣式神皮肤设计大赛</em>
</a>
<a href="javascript:;">
<img src="./images/ac62dce6-c3f8-4f14-b345-2601be2cc56e.jpg" alt="" title="2022阴阳师大厨觉醒 创新大赛">
<em class="em">2022阴阳师大厨觉醒 创新大赛</em>
</a>
</li>
<li>
<a href="javascript:;">
<img src="./images/47d761fa-3493-4b2c-8c1d-9065c5ac7816.png" alt="" title="泡面番：平安物语">
<span>泡面番：平安物语</span>
</a>
<a href="javascript:;">
<img src="./images/9099e3fb-854b-48b5-ae43-4a7f935c867e.png" alt="" title="动画：百鬼幼儿园">
<span>动画：百鬼幼儿园</span>
</a>
<a href="javascript:;">
<img src="./images/709619be-531e-4c68-ab39-b80492260b56.png" alt="" title="音乐剧：大江山之章">
<span>音乐剧：大江山之章</span>
</a>
<a href="javascript:;">
<img src="./images/7839eb35-7723-433a-86ea-60097c00c481.png" alt="" title="漫画：官方漫画<">
<span>漫画：官方漫画</span>
</a>
<a href="javascript:;">
<img src="./images/8e6605d3-e335-46be-a5be-e1bfd3bd74ef.png" alt="" title="商业街：周边商城">
<span>商业街：周边商城</span>
</a>
<a href="javascript:;">
<img src="./images/ac62dce6-c3f8-4f14-b345-2601be2cc56e.jpg" alt="" title="大事记：线下大事记">
<span>大事记：线下大事记</span>
</a>
<a href="javascript:;">
<img src="./images/b72ed9bd-7507-420a-b270-86c6c11d2b32.png" alt="" title="电台：京都方映厅">
<span>电台：京都方映厅</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="./images/pic_1_fb5f1d1.jpg" alt="" title="视频中心">
<span>视频中心</span>
</a>
<a href="javascript:;">
<img src="./images/pic_2_f1ba243 (1).jpg" alt="" title="原画壁纸">
<span>原画壁纸</span>
</a>
<a href="javascript:;">
<img src="./images/pic_3_6b1c9bd.jpg" alt="" title="游戏原声">
<span>游戏原声</span>
</a>
<a href="javascript:;">
<img src="./images/pic_7_468e31a.png" alt="" title="动态壁纸软件">
<span>动态壁纸软件</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="./images/banner1_51314c4.png" alt="" title="三周年他主题站">
<span>三周年他主题站</span>
</a>
<a href="javascript:;">
<img src="./images/banner2_d3b9424.png" alt="" title="五月编年史">
<span>五月编年史</span>
</a>
<a href="javascript:;">
<img src="./images/banner3_bde2c87.png" alt="" title="千年之守">
<span>千年之守</span>
</a>
<a href="javascript:;">
<img src="./images/banner4_cada9d6.png" alt="" title="天魔归来">
<span>天魔归来</span>
</a>
<a href="javascript:;">
<img src="./images/banner5_282ebc2.png" alt="" title="20年剧情站">
<span>20年剧情站</span>
</a>
<a href="javascript:;">
<img src="./images/banner6_ea57f03.png" alt="" title="山海之战">
<span>山海之战</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="./images/1.jpg" alt="" title="《阴阳师》爵士音乐专辑首发，庭院背景音乐功...">
<i>新闻</i>
<em>《阴阳师》爵士音乐专辑 <br>首发，庭院背景音乐功...</em>
</a>
<a href="javascript:;">
<img src="./images/2.jpg" alt="" title="《阴阳师》手游10月26日维护更新公告">
<i>公告</i>
<em>《阴阳师》手游10月26日<br>维护更新公告</em>
</a>
<a href="javascript:;">
<img src="./images/3.jpg" alt="" title="《阴阳师》万圣节糖糖乱斗活动即将开启">
<i>新闻</i>
<em>《阴阳师》万圣节糖糖乱<br>斗活动即将开启</em>
</a>
<a href="javascript:;">
<img src="./images/4.jpg" alt="" title="《阴阳师》全新BOSS特国天即将降临！">
<i>新闻</i>
<em>《阴阳师》全新BOSS特<br>国天即将降临！</em>
</a>
<a href="javascript:;">
<img src="./images/5.jpg" alt="" title="心网缚爱，春茵横生《阴阳师》络新妇新皮肤上线">
<i>新闻</i>
<em>心网缚爱，春茵横生《阴<br>阳师》络新妇新皮肤上线</em>
</a>
</li>
<li>
<a href="javascript:;">
<img src="./images/ss_1_2fa7e81.jpg" alt="">
<span>联动</span>
</a>
<a href="javascript:;">
<img src="./images/ss_2_a4916b4.jpg" alt="">
<span>SP</span>
</a>
<a href="javascript:;">
<img src="./images/ss_3_017abcd.jpg" alt="">
<span>SSR</span>
</a>
<a href="javascript:;">
<img src="./images/ss_4_645f86e.jpg" alt="">
<span>SR</span>
</a>
<a href="javascript:;">
<img src="./images/ss_5_c5d311e.jpg" alt="">
<span>R</span>
</a>
<a href="javascript:;">
<img src="./images/ss_6_0364095.jpg" alt="">
<span>N</span>
</a>
<a href="javascript:;">
<img src="./images/ss_7_b15e26d.jpg" alt="">
<span>呱太</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="./images/pic_1_fb5f1d1.jpg" alt="">
<span>萌新上路</span>
</a>
<a href="javascript:;">
<img src="./images/pic_2_f1ba243.jpg" alt="">
<span>式神御魂</span>
</a>
<a href="javascript:;">
<img src="./images/pic_4_171aa2f.jpg" alt="">
<span>秘闻副本</span>
</a>
<a href="javascript:;">
<img src="./images/pic_4_171aa2f (1).jpg" alt="">
<span>斗技阵容</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="./images/529b56aa-53fb-451c-91d5-d6ec1fda401c.jpg" alt="">
<em class="em">百绘罗衣式神皮肤设计大赛</em>
</a>
<a href="javascript:;">
<img src="./images/ac62dce6-c3f8-4f14-b345-2601be2cc56e.jpg" alt="">
<em class="em">2022阴阳师大厨觉醒 创新大赛</em>
</a>
</li>
<li>
<a href="javascript:;">
<img src="./images/pic_1_fb5f1d1.jpg" alt="">
<span>视频中心</span>
</a>
<a href="javascript:;">
<img src="./images/pic_2_f1ba243 (1).jpg" alt="">
<span>原画壁纸</span>
</a>
<a href="javascript:;">
<img src="./images/pic_3_6b1c9bd.jpg" alt="">
<span>游戏原声</span>
</a>
<a href="javascript:;">
<img src="./images/pic_7_468e31a.png" alt="">
<span>动态壁纸软件</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="./images/529b56aa-53fb-451c-91d5-d6ec1fda401c.jpg" alt="">
<em class="em">百绘罗衣式神皮肤设计大赛</em>
</a>
<a href="javascript:;">
<img src="./images/ac62dce6-c3f8-4f14-b345-2601be2cc56e.jpg" alt="">
<em class="em">2022阴阳师大厨觉醒 创新大赛</em>
</a>
</li>
<li>
<a href="javascript:;">
<img src="./images/focus2.jpg" alt="">
</a>
<a href="javascript:;">
<img src="./images/focus3.jpg" alt="">
</a>
<a href="javascript:;">
<img src="./images/focus4.jpg" alt="">
</a>
<a href="javascript:;">
<img src="./images/focus5.jpg" alt="">
</a>
<a href="javascript:;">
<img src="./images/focus6.jpg" alt="">
</a>
<a href="javascript:;">
<img src="./images/focus7.jpg" alt="">
</a>
</li>
</ul>
<div class="search">
<input type="text" autofocus placeholder="全站搜索">
<button></button>
</div>
</header>
<div class="header_bottom">
<section class="wap">
<div class="bot">
<!-- 左 -->
<section class="left">
<div class="div1">
<img src="./images/zf_5f19117.png" alt="">
<img src="./images/age_reminder_e7d5046.png" alt="">
</div>
<div class="div2">
<img src="./images/33.png" alt="">
<img src="./images/btn4-1_67d2181.png" alt="">
<img src="./images/line_dd0b705.png" alt="">
</div>
<div class="div3">
<div>
<i>新闻特讯</i>
<br>
<span></span>
</div>
<div>
<img src="./images/new_xinfu_div_87a3b87.png" alt="">
<p>【御香归新区已开启】</p>
<img src="./images/new2_xinfu_div_icon_ffe8c02.png" alt="">
<div>
<em>新区首月 <br>免费符咒</em>
<img src="./images/new3_xinfu_div_text_bg_0971739.png" alt="">
</div>
<span>>>></span>
<span>点击查看更多新区福利</span>
</div>
</div>
</section>
<!-- 中 -->
<section class="center">
<ul>
<Li>
<img src="./images/banner-1_5004adc.png" alt="">
</Li>
<Li>
<img src="./images/banner-2.jpg" alt="">
<span>推荐</span>
</Li>
<Li>
<p>新闻 | 《阴阳师》 爵士音乐 <br>专辑首发，庭院背景音乐功 <br> 能上线！</p>
<p>空气中流淌着爵士的音符，手中的特调轻轻 <br> 一晃便散发迷人的清香。阴...</p>
</Li>
<Li>
<img src="./images/1.jpg" alt="">
</Li>
<Li>
<img src="./images/2.jpg" alt="">
</Li>
<Li>
<img src="./images/3.jpg" alt="">
</Li>
<Li>
<img src="./images/4.jpg" alt="">
</Li>
<Li>
<img src="./images/5.jpg" alt="">
</Li>
</ul>
</section>
<!-- y右 -->
<section class="right">
<img src="./images/11.png" alt="">
</section>
</div>
</section>
</div>
</section>
<!-- 广告模块结束 -->
<!-- 平安世界开始 -->
<section class="w">
<section class="pasj_list">
<div class="pasj"></div>
<div class="btm_list"></div>
<ul class="top_list">
<li class="active">
式神录
</li>
<li>
主角录
</li>
<li>
声优录
</li>
</ul>
<ul class="img_list">
<li class="active">
<img src="./images/391 (1).png" alt="">
</li>
<li>
<img src="./images/389 (1).png" alt="">
</li>
<li>
<img src="./images/388.png" alt="">
</li>
</ul>
<!-- 左侧按钮 -->
<div class="btn_left">
<span>|般若</span>
<div class="btn1">
<img src="./images/loading_057a59b.gif" alt="">
</div>
<img src="./images/333.png" alt="">
</div>
<!-- 右侧按钮 -->
<div class="btn_right">
<span>|天邪</span>
<div class="btn2">
<img src="./images/loading_057a59b.gif" alt="">
</div>
<img src="./images/333.png" alt="">
</div>
</section>
</section>
<!-- 平安世界结束 -->
<!-- 游戏攻略开始 -->
<section class="w">
<section class="youxi">
<!-- 返回顶部 -->
<div class="fh iconfont icon-fanhuidingbu">
<p>返回顶部</p>
</div>
<ul class="gonglue">
<li></li>
<li>
<span>六道之门</span>
<span>速刷攻略</span>
</li>
<li>
<span>寻香行</span>
<span>式神解读</span>
</li>
<li>
<span>左手须佐</span>
<span>斗技阵容</span>
</li>
</ul>
<div class="youxi_tab">
<ul class="tab_top">
<li class="active">
<p>最新</p>
<span></span>
</li>
<li>
<p>萌新上路</p>
<span></span>
</li>
<li>
<p>式神御魂</p>
<span></span>
</li>
<li>
<p>秘闻副本</p>
<span></span>
</li>
<li>
<p>斗技阵容</p>
<span></span>
</li>
</ul>
<ul class="tab_bom">
<div class="active">
<li>
<p>【新手】20分钟上名士，3000以下须佐之男打</p>
<p>作者：靠脸吃饭</p>
</li>
<li>
<p>【新手】双神版本不变阵 全自动挂机上名...</p>
<p>作者：Prince班琦</p>
</li>
<li>
<p>【新手】全自动挂机名士阵容——离荒体系</p>
<p>作者：槐夏三十</p>
</li>
<li>
<p>【玩法】 【地狱鬼王~级】 欧洲塞纳河 （89990...</p>
<p>作者：薛定二甲榨汁机</p>
</li>
<li>
<p>【玩法】结界突破收益最大化教学！卡级的奥...</p>
<p>作者：嘤嘤嘤</p>
</li>
<li>
<p>【玩法】 【式神小课堂】寻香行...</p>
<p>作者：妹酱的小本本</p>
</li>
</div>
<div>
<li>
<p>【新手】【萌新or回坑攻略】现版本式神培养推</p>
<p>作者：靠脸吃饭</p>
</li>
<li>
<p>【新手】双神版本不变阵 全自动挂机上名...</p>
<p>作者：Prince班琦</p>
</li>
<li>
<p>【新手】萌新入门手册</p>
<p>作者：槐夏三十</p>
</li>
<li>
<p>【新手】魂士40S低配萌新阵容 （89990...</p>
<p>作者：薛定二甲榨汁机</p>
</li>
<li>
<p>【新手】萌新开荒指南...</p>
<p>作者：嘤嘤嘤</p>
</li>
<li>
<p>【新手】 【萌新班请神个...</p>
<p>作者：妹酱的小本本</p>
</li>
</div>
<div>
<li>
<p>【式神】【式神小课堂】寻香行</p>
<p>作者：靠脸吃饭</p>
</li>
<li>
<p>【式神】【sp阶式神培养指南】更新至神启荒...</p>
<p>作者：Prince班琦</p>
</li>
<li>
<p>【式神】SSR须佐之男最新版本</p>
<p>作者：槐夏三十</p>
</li>
<li>
<p>【式神】空相面灵气 （89990...</p>
<p>作者：薛定二甲榨汁机</p>
</li>
<li>
<p>【式神】鬼灭3期新SSR，我期善于...</p>
<p>作者：嘤嘤嘤</p>
</li>
<li>
<p>【式神】 心狩鬼女红叶...</p>
<p>作者：妹酱的小本本</p>
</li>
</div>
<div>
<li>
<p>【玩法】【地狱鬼王】寻香行</p>
<p>作者：靠脸吃饭</p>
</li>
<li>
<p>【玩法】【s御灵阵容】更新至神启荒...</p>
<p>作者：Prince班琦</p>
</li>
<li>
<p>【玩法】S寻香最新版本</p>
<p>作者：槐夏三十</p>
</li>
<li>
<p>【玩法】封魔空相面灵气 （89990...</p>
<p>作者：薛定二甲榨汁机</p>
</li>
<li>
<p>【玩法】【六道之门】鬼灭3期新SSR，我期善于...</p>
<p>作者：嘤嘤嘤</p>
</li>
<li>
<p>【玩法】 六周年心狩鬼女红叶...</p>
<p>作者：妹酱的小本本</p>
</li>
</div>
<div>
<li>
<p>【新手】20分钟上名士，3000以下须佐之男打</p>
<p>作者：靠脸吃饭</p>
</li>
<li>
<p>【新手】双神版本不变阵 全自动挂机上名...</p>
<p>作者：Prince班琦</p>
</li>
<li>
<p>【新手】全自动挂机名士阵容——离荒体系</p>
<p>作者：槐夏三十</p>
</li>
<li>
<p>【玩法】 【地狱鬼王~级】 欧洲塞纳河 （89990...</p>
<p>作者：薛定二甲榨汁机</p>
</li>
<li>
<p>【玩法】结界突破收益最大化教学！卡级的奥...</p>
<p>作者：嘤嘤嘤</p>
</li>
<li>
<p>【玩法】 【式神小课堂】寻香行...</p>
<p>作者：妹酱的小本本</p>
</li>
</div>
</ul>
</div>
</section>
</section>
<!-- 游戏攻略结束 -->
<!-- 热门活动开始 -->
<section class="w">
<section class="huodong">
<div class="tr"></div>
<div class="bor">
<div class="beij"></div>
</div>
<!-- 热门活动 -->
<div class="rm">热门活动</div>
<ul class="tab_top">
<li class="active"></li>
<li></li>
<li></li>
</ul>
<div class="tab_bom">
<div class="active">
<img src="./images/0.jpg" alt="">
</div>
<div>
<img src="./images/00.jpg" alt="">
</div>
<div>
<img src="./images/000.jpg" alt="">
</div>
</div>
<!-- 热门作品 -->
<div class="rz">热门作品</div>
<ul class="max">
<Li>
<div class="top"></div>
<div class="bom">
<p>不给糖就捣蛋</p>
<p>作者：库马拉姬</p>
</div>
</Li>
<Li>
<div class="top"></div>
<div class="bom">
<p>古山之神</p>
<p>作者：喵喵还是睡不醒</p>
</div>
</Li>
<Li>
<div class="top"></div>
<div class="bom">
<p>梦见</p>
<p>作者：乱和业务</p>
</div>
</Li>
</ul>
</section>
</section>
<!-- 热门活动结束 -->
<!-- 同人大触开始 -->
<section class="w">
<section class="trdc">
<ul class="top">
<li>
<img src="./images/r2.png" alt="">
</li>
<li>
<img src="./images/r3.png" alt="">
阴阳师手游同人账
</li>
<li>
<img src="./images/r4.png" alt="">
阴阳师友人帐
</li>
<li>
<img src="./images/r5.png" alt="">
阴阳师电子杂志
</li>
</ul>
<div class="max1">
<ul class="tab">
<Li>
<span><img src="./images/s1.jpg" alt=""></span>
<div></div>
</Li>
<Li>
<span><img src="./images/s2.jpg" alt=""></span>
<div></div>
</Li>
<Li>
<span><img src="./images/s3.jpg" alt=""></span>
<div></div>
</Li>
<Li>
<span><img src="./images/s4.jpg" alt=""></span>
<div></div>
</Li>
<Li>
<span><img src="./images/s5.jpg" alt=""></span>
<div></div>
</Li>
</ul>
</div>
</section>
</section>
<!-- 同人大触结束 -->
<!-- 视听盛宴开始 -->
<section class="w">
<section class="stsy">
<div class="left"></div>
<div class="right">
<section class="bj"></section>
<div>
<a href="https://yys.v.netease.com/2022/1018/e783c48f8ce40852d10c62470ca37482qt.mp4"></a>
<span>
<i></i>
寻世香行
</span>
</div>
<div>
<a href="http://yys.v.netease.com/2022/0919/1ddd5dadaee5ac800f423b5231e51335qt.mp4"></a>
<span>
<i></i>
千年之守
</span>
</div>
<div>
<a href=" https://yys.v.netease.com/2022/0728/8d5fae8d998cd99e8aa42c304d7664e2qt.mp4"></a>
<span>
<i></i>
红枫蚀骨，叶烬其心
</span>
</div>
<div>
<a href="https://yys.v.netease.com/2022/0701/7b8a65564ab4ca4a8c8397d202e66b86qt.mp4"></a>
<span>
<i></i>
冥土覆灭，心目不朽
</span>
</div>
</div>
</section>
</section>
<!-- 视听盛宴结束 -->
<!-- 泛娱乐模块开始 -->
<section class="w">
<section class="fyl">
<div class="f"></div>
<ul class="lunbo">
<li>
<img src="./images/q12.gif" alt="">
</li>
<li>
<img src="./images/q11.gif" alt="">
</li>
<li>
<img src="./images/q3.png" alt="">
</li>
<li>
<img src="./images/q4.png" alt="">
</li>
<li>
<img src="./images/q5.png" alt="">
</li>
<li>
<img src="./images/q6.png" alt="">
</li>
<li>
<img src="./images/q7.png" alt="">
</li>
<li>
<img src="./images/q8.jpg" alt="">
</li>
<li>
<img src="./images/q9.jpg" alt="">
</li>
<li>
<img src="./images/q10.jpg" alt="">
</li>
<li>
<img src="./images/q1.png" alt="">
</li>
<li>
<img src="./images/q2.png" alt="">
</li>
</ul>
</section>
</section>
<!-- 泛娱乐模块结束 -->
<!-- 京东商业街模块开始 -->
<section class="w">
<section class="syj">
<div class="s"></div>
<ul class="gd">
<li>
<img src="./images/w1.png" alt="">
<div></div>
<p>阴阳师花与雨主题透明伞-玉藻前</p>
</li>
<li>
<img src="./images/w2.png" alt="">
<div></div>
<p>阴阳师式神L型短抱枕</p>
</li>
<li>
<img src="./images/w3.png" alt="">
<div></div>
<p>阴阳师立绘人形立牌（第一期）</p>
</li>
<li>
<img src="./images/w4.png" alt="">
<div></div>
<p>阴阳师犬神大公仔</p>
</li>
<li>
<img src="./images/w5.png" alt="">
<div></div>
<p>阴阳师结缘吊坠</p>
</li>
<li>
<img src="./images/w6.png" alt="">
<div></div>
<p>阴阳师五芒星手镯</p>
</li>
<li>
<img src="./images/w7.jpg" alt="">
<div></div>
<p>阴阳师器の道式神Q版手办观山海</p>
</li>
<li>
<img src="./images/w8.jpg" alt="">
<div></div>
<p>阴阳师茨球乐队保温杯</p>
</li>
<li>
<img src="./images/w9.jpg" alt="">
<div></div>
<p>阴阳师 · 素纸魂心 Moleskine定制款笔记本</p>
</li>
</ul>
</section>
</section>
<!-- 京东商业街模块结束 -->
<!-- 二维码模块开始 -->
<section class="w">
<section class="ewm">
<div></div>
<ul class="m">
<li>
<a href="javascript:;">
<p>关注官方微博</p>
<p>扫描二维码</p>
<p>官方微博</p>
<span>
<img src="./images/ewm.png" alt="">
</span>
</a>
<em>官方微博：<i>网易阴阳师手游</i></em>
</li>
<li>
<a href="javascript:;">
<p>关注微信公众号</p>
<p>扫描二维码</p>
<p>微信公众号</p>
<span>
<img src="./images/ewm.png" alt="">
</span>
</a>
<em>公众号：<i>yinyangshi163</i></em>
</li>
<li>
<a href="javascript:;">
<div>
<img src="./images/code_role_bg_58d7f15.png" alt="">
<i class="bg"></i>
</div>
</a>
</li>
<li>
<a href="javascript:;">
<p>精灵询问</p>
<p>问题反馈</p>
<p>客户服务</p>
<span>
<img src="./images/pop_6_6fda30b.png" alt="">
</span>
</a>
<em>客服电话：<i>网17770371445</i></em>
</li>
<li>
<a href="javascript:;">
<p>和大神一起玩</p>
<p>扫描二维码</p>
<p>网易大神</p>
<span>
<img src="./images/ewm.png" alt="">
</span>
</a>
<em>大神号：<i>网易阴阳师手游</i></em>
</li>
</ul>
</section>
</section>
<!-- 二维码模块结束 -->
<!-- 底部模块开始 -->
<section class="bottom">
<div class="com">
<div class="logo"></div>
</div>
<section class="w">
<div class="bom">
<span class="one">
分享到：
<i class="iconfont icon-logo-wechat"></i>
<i class="iconfont icon-weibo-copy"></i>
<i class="iconfont icon-QQ"></i>
</span>
<span class="two">
<span class="left">
<img src="./images/bb1.png" alt="">
<img src="./images/bb2.png" alt="">
<img src="./images/bb3.png" alt="">
<img src="./images/bb4.png" alt="">
</span>
<span class="right">
<p>公司简介-客户服务-网易游戏隐私政策及儿童个人信息保护规则-网易游戏-联系我们-商务合作-加入我们-用户协议</p>
<p>网易公司版权所有 ©1997-2022-网络游戏行业防沉迷自律公约</p>
</span>
<span class="three">
<p>积极健康的游戏心态是健康游戏的开端，本游戏故事情节设置紧凑，请您合理控制游戏时间，避免沉溺游戏影响生活，注意自我保护，防范网络陷阱。</p>
<p>《网络游戏管理暂行办法》-文网游备字【2016】M-RPG4708号-《网络文化经营许可证》-浙网文[2022]0506-025号-浙网文[2022]0506-025号-批准文号：新广出审【2017】6710号
</p>
<p>出版物号：ISBN 978-7-7979-9973-1 违法及不良信息举报中心- ICP备案：粤B2-20090191-18</p>
</span>
</span>
<section class="box3">
<div class="b1">
</div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b2">
<div class="b2_1">
<img src="./images/o4.png" alt="">
</div>
</div>
<div class="b3">
<img src="./images/o3.png" alt="">
</div>
</section>
</div>
</section>
</section>
<!-- 底部模块结束 -->
</body>
</html>
1.3 css样式
1.3.1 页面初始化（base)样式
在默认的浏览器中有很多默认的样式，所以我们要对其进行清除并且设置自己的默认样式
代码示例：
* {
box-sizing: border-box;
}
/* 去除常见标签默认的 margin 和 padding */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
dl,
dt,
dd,
input {
margin: 0;
padding: 0;
}
/* 设置网页统一的字体大小、行高、字体系列相关属性 */
body {
box-sizing: border-box;
font: 16px/1.5 "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei",
"Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
color: #333;
}
/* 去除列表默认样式 */
ul,
ol {
list-style: none;
}
/* 去除默认的倾斜效果 */
em,
i {
font-style: normal;
}
/* 去除a标签默认下划线，并设置默认文字颜色 */
a {
text-decoration: none;
color: #333;
}
/* 设置img的垂直对齐方式为居中对齐，去除img默认下间隙 */
img {
vertical-align: middle;
}
/* 去除input默认样式 */
input {
border: none;
outline: none;
color: #333;
}
/* 双伪元素清除浮动 */
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
1.3.2 首页样式（index)样式
body {
width: 100%;
max-width: 1920px;
min-width: 1280px;
}
.w {
width: 1280px;
margin: 0 auto;
}
/* 开服倒计时 */
.countDown {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 99999;
width: 399px;
height: 228px;
background: url(../images/countDown1.png) center no-repeat;
border-radius: 30px;
}
.countDown .count {
position: absolute;
top: -3px;
right: 40px;
font-size: 16px;
color: #fff;
}
.countDown span {
text-align: center;
position: relative;
top: 160px;
left: 125px;
display: inline-block;
width: 40px;
height: 40px;
line-height: 40px;
background-color: #ca314f;
background: url(../images/4444.png) 7px -12px;
color: #fff;
font-size: 20px;
border-radius: 10px;
}
.countDown .one {
position: relative;
top: 160px;
left: 125px;
color: #Fff;
font-size: 25px;
}
.countDown .tc {
position: absolute;
right: 17px;
top: -3px;
cursor: pointer;
color: #f2fceb;
}
.countDown .tc:hover {
color: red;
}
/* 头部样式开始 */
.header {
position: relative;
width: 100%;
height: 54px;
text-align: center;
}
.header .left {
width: 178px;
height: 54px;
line-height: 54px;
background-color: #cf1132;
color: #fff;
font-size: 16px;
}
.header .center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* 头部样式结束 */
/* < !-- 广告模块开始 --> */
.banner {
position: relative;
width: 100%;
height: 1024px;
}
@keyframes back {
0% {
background: url(../images/bcakground.png) no-repeat;
}
30% {
background: url(../images/back3.png) no-repeat;
}
60% {
background: url(../images/2.png) no-repeat;
}
100% {
background: url(../images/backgrounnd2.png) no-repeat;
}
}
.banner .header_top {
width: 100%;
background: url(../images/header_top.jpg) center top no-repeat;
height: 60px;
/* position: sticky;
top: 0;
z-index: 999; */
}
.header_top .header_list {
width: 1200px;
margin: 0 auto;
}
.header_top .header_list li {
float: left;
width: 75px;
height: 70px;
line-height: 60px;
font-size: 14px;
text-align: center;
}
.header_top .header_list li a {
color: #fff;
}
.header_list .active a {
color: black;
}
.banner .search {
position: absolute;
top: 20px;
right: 25px;
}
.search input {
width: 120px;
background-color: transparent;
border-bottom: 1px solid #a98c56;
padding-bottom: 3px;
color: #fff;
}
.search input::placeholder {
color: #ccc;
}
.search button {
position: absolute;
top: 0px;
right: 10px;
width: 18px;
height: 19px;
background: url(../images/search_b180dd5.png) no-repeat;
transition: all .3s;
}
.search button:hover {
transform: rotateY(180deg);
}
/* tob栏样式 */
.tab_list {
position: relative;
top: 60px;
width: 100%;
height: 140px;
background: url(../images/subnav_bg_5cc9309.jpg) no-repeat;
}
.header_list .active {
background: url(../images/nav_bg1_d44f09d.jpg) no-repeat;
}
.tab_list li {
position: absolute;
top: 20px;
left: 50%;
transform: translateX(-50%);
width: 1180px;
height: 140px;
text-align: center;
display: none;
}
.tab_list .active {
display: block;
}
/* .tab_list li:nth-child(1) {
animation: gunD 5s linear infinite alternate;
}
@keyframes gunD {
0% {
transform: translateX(-1000px);
}
100% {
transform: translateX(-100px);
}
} */
.tab_list li a {
position: relative;
float: left;
margin: 0 5px;
width: 149px;
height: 92px;
text-align: center;
transition: all .5s;
}
.tab_list li a:hover {
transform: translateY(-5px);
box-shadow: 0 1px 4px 1px#cf1132;
}
.tab_list li a img {
width: 100%;
height: 100%;
border: 2px solid black;
}
.tab_list li a i {
position: absolute;
top: 0;
left: 3px;
width: 20px;
height: 40px;
background-color: #a98c56;
color: #fff;
padding-top: 3px;
}
.tab_list li a em {
position: absolute;
top: 55px;
left: 5px;
color: #fff;
text-align: left;
width: 149px;
height: 20px;
}
.tab_list li a span {
position: absolute;
right: 0;
bottom: 0;
display: inline-block;
padding: 0 5px;
height: 20px;
background-color: #a98c56;
color: #fff;
}
.tab_list li:nth-child(5) a {
width: 216px;
height: 88px;
}
.tab_list li:nth-child(5) a .em {
position: absolute;
top: 60px;
left: 5px;
width: 216px;
color: black;
}
/* 广告下面 */
.header_bottom {
position: relative;
margin: 140px auto 0;
height: 884px;
width: 100%;
animation: back 15s linear infinite alternate;
}
.header_bottom .wap {
height: 240px;
width: 100%;
background-color: rgba(0, 0, 0, .8);
position: absolute;
bottom: 100px;
left: 0;
}
.header_bottom .bot {
width: 1600px;
margin: 0 auto;
}
.bot section {
float: left;
}
.bot .left .div1 img {
display: block;
}
.bot .left .div1 img {
position: relative;
top: -15px;
left: 30px;
height: 100px;
}
.bot .left .div1 img:nth-child(1) {
height: 110px;
}
.bot .left .div1 img:nth-child(2) {
left: 35px;
height: 130px;
}
.bot .left .div2 {
width: 145px;
height: 255px;
background: url(../images/index_z_9ac8591.png) 0 0;
position: relative;
top: -30px;
left: 35px;
}
.div2 img {
position: relative;
top: 50px;
left: 25px;
width: 96px;
height: 96px;
}
.div2 img:nth-child(2) {
margin-top: 5px;
}
.div2 img:nth-child(3) {
position: absolute;
top: 48px;
left: 18px;
width: 110px;
height: 14px;
animation: sha 3s linear infinite alternate;
}
@keyframes sha {
0% {
transform: translateY(90px);
}
100% {
transform: translateY(0);
}
}
.bot .left div {
float: left;
}
.bot .div3 div:nth-child(1) {
position: relative;
top: -28px;
left: 50px;
width: 145px;
height: 37px;
color: #c2A060;
background-color: #cd3836;
text-align: center;
padding-top: 4px;
}
.bot .div3 div:nth-child(1) span {
display: inline-block;
width: 88px;
height: 12px;
background: url(../images/index_z_9ac8591.png) -725px -725px;
}
.bot .div3 div:nth-child(2) {
position: relative;
top: 30px;
left: -96px;
width: 260px;
height: 160px;
background: url(../images/new_xinfu_div_87a3b87.png);
}
.bot .div3 div:nth-child(2) img:nth-of-type(1) {
width: 100%;
height: 100%;
}
.bot .div3 div:nth-child(2) p {
position: absolute;
top: 15px;
left: 50px;
color: black;
font-size: 16px;
font-weight: 700;
}
.bot .div3 div:nth-child(2) img:nth-of-type(2) {
position: absolute;
left: -7px;
top: 50px;
width: 108px;
height: 108px;
}
.bot .div3 div:nth-child(2) div {
position: absolute;
top: 55px;
left: 130px;
width: 86px;
height: 48px;
}
.bot .div3 div:nth-child(2) div em {
position: absolute;
top: 5px;
left: 18px;
color: black;
}
.bot .div3 div:nth-child(2) div img {
width: 100%;
height: 100%;
}
.bot .div3 div:nth-child(2) span:nth-of-type(1) {
color: black;
position: absolute;
bottom: 35px;
right: 35px;
}
.bot .div3 div:nth-child(2) span:nth-of-type(2) {
position: absolute;
bottom: 18px;
right: 35px;
color: black;
}
.bot .center {
margin-left: -80px;
width: 780px;
height: 179px;
white-space: nowrap;
overflow-x: auto;
margin-top: 30px;
}
.bot .center::-webkit-scrollbar {
width: 5px;
background-color: #ccc;
border-radius: 10px;
}
.bot .center::-webkit-scrollbar-thumb {
border: 1px solid #cb9f5f;
border-radius: 10px;
background: url(../images/111.png) no-repeat center;
}
.bot .center ul li {
display: inline-block;
cursor: pointer;
width: 260px;
height: 160px;
transition: all .5s;
}
.bot .center ul li img {
width: 100%;
height: 100%;
}
.bot .center ul li:nth-child(2) {
position: relative;
}
.bot .center ul li:nth-child(2) span {
position: absolute;
top: 5px;
left: 0;
width: 25px;
height: 18px;
background-color: red;
color: #fff;
}
.bot .center ul li:nth-child(3) {
margin-top: -5px;
background-color: #fff;
color: black;
}
.bot .center ul li:nth-child(3) p:nth-child(1) {
font-weight: 700;
}
.bot .center ul li:nth-child(3) p {
position: relative;
top: 20px;
left: 20px;
}
.bot .center ul li:hover {
transform: translateY(-5px);
box-shadow: 0 1px 4px 1px#cf1132;
}
.bot .right img {
cursor: pointer;
margin-top: 40px;
width: 202px;
transition: all .5s;
}
.bot .right img:hover {
transform: translateY(-5px);
box-shadow: 0 1px 4px 1px #2fabd2;
}
/* < !-- 广告模块结束 --> */
/* 平安世界开始 */
.pasj_list {
position: relative;
height: 558px;
}
.pasj_list .pasj {
position: absolute;
left: 20px;
top: 20px;
width: 60px;
height: 150px;
background: url(../images/index_z_9ac8591.png) no-repeat -835px -530px;
}
.pasj_list .top_list {
position: absolute;
top: 20px;
left: 150px;
width: 300px;
height: 40px;
line-height: 30px;
border: 2px solid #cb9f5f;
padding: 3px;
text-align: center;
cursor: pointer;
}
.pasj_list .top_list li {
float: left;
width: 96px;
height: 30px;
color: black;
}
.pasj_list .top_list .active {
background-color: #cb9f5f;
color: #fff;
}
.pasj_list .img_list {
margin-left: 30px;
height: 558px;
}
.pasj_list .img_list li {
display: none;
}
.pasj_list .img_list .active {
display: block;
}
.btm_list {
position: absolute;
top: 170px;
left: 165px;
width: 940px;
height: 320px;
opacity: .3;
background: url(../images/shishen_bg_000bc91.jpg) no-repeat;
}
.btn_left {
position: absolute;
top: 170px;
left: 45px;
width: 80px;
height: 320px;
border: 1px solid #a98c56;
text-align: center;
opacity: .5;
transition: all .3s;
}
.btn_left:hover,
.btn_right:hover {
opacity: 1;
}
/* .btn_left:hover .btn1,
.btn_right:hover .btn2 {
background-color: #c2A060;
}
*/
.btn_right {
position: absolute;
top: 170px;
right: 55px;
width: 80px;
height: 320px;
border: 1px solid #a98c56;
text-align: center;
opacity: .5;
transition: all .3s;
}
.btn_left span,
.btn_right span {
margin-top: 5px;
display: inline-block;
width: 18px;
height: 30px;
color: #a98c56;
font-size: 20px;
}
.btn_left .btn1,
.btn_right .btn2 {
position: absolute;
top: 120px;
right: -30px;
width: 60px;
height: 60px;
border: 1px solid #a98c56;
background: #FFF;
cursor: pointer;
}
.btn_right .btn2 .btn_right .btn2 {
position: absolute;
top: 120px;
left: -30px;
}
.btn_left .btn1 img,
.btn_right .btn2 img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 37px;
height: 9px;
}
.btn_left img,
.btn_right img {
position: absolute;
bottom: 0;
left: 0;
width: 78px;
height: 60px;
}
/* 平安世界结束 */
/* 游戏攻略模块开始 */
.youxi {
position: relative;
height: 510px;
}
.youxi .fh {
text-align: center;
position: absolute;
top: 50%;
right: 0;
color: #fff;
font-size: 30px;
z-index: 999;
width: 75px;
height: 75px;
background: rgba(0, 0, 0, .8);
cursor: pointer;
transition: all 1S;
transform: translateY(-50%);
}
.youxi .fh p {
font-size: 16px;
}
.youxi .fh:hover {
background-color: RED;
}
.gonglue {
height: 209px;
}
.gonglue li {
position: relative;
float: left;
margin: 0px 5px 0 30px;
}
.gonglue li:hover span {
transform: translateY(-20px);
}
.gonglue li span {
transition: all .5s;
display: inline-block;
width: 27px;
height: 90px;
text-align: center;
background-color: #fff;
font-size: 14px;
color: black;
border: 1px solid #ccc;
}
.gonglue li span:nth-child(1) {
position: absolute;
top: 0;
left: 20px;
}
.gonglue li span:nth-child(2) {
position: absolute;
top: 18px;
left: 55px;
}
.gonglue li:nth-child(1) {
width: 60px;
height: 156px;
background: url(../images/index_z_9ac8591.png) -895px -520px no-repeat;
}
.gonglue li:nth-child(n+2) {
width: 340px;
height: 209px;
}
.gonglue li:nth-child(2) {
background: url(../images/6.png) no-repeat;
}
.gonglue li:nth-child(3) {
background: url(../images/7.png) no-repeat;
}
.gonglue li:nth-child(4) {
background: url(../images/8.png) no-repeat;
}
.youxi_tab {
margin-top: -40px;
height: 265px;
border: 2px solid #65c2a3;
background-color: #2fabd2;
background: url(../images/444.jpg) repeat-x;
}
.youxi_tab .tab_top {
width: 800px;
height: 110px;
margin: 0 auto;
padding: 64px 0 0;
}
.youxi_tab .tab_top li {
position: relative;
text-align: center;
float: left;
width: 154px;
height: 50px;
font-size: 18px;
color: #fff;
cursor: pointer;
transition: all .3s;
}
.youxi_tab .tab_top .active {
background-color: #fff;
color: #65c2a3;
}
.youxi_tab .tab_top li span {
display: inline-block;
width: 75px;
height: 10px;
background: url(../images/index_z_9ac8591.png) no-repeat -642px -724px;
}
.youxi_tab .tab_top li p {
position: relative;
top: 10px;
}
.youxi_tab .tab_bom {
width: 1060px;
margin: 0 auto;
}
.youxi_tab .tab_bom li {
margin-top: 15px;
float: left;
margin-right: 10px;
float: left;
width: 320px;
height: 41px;
border-left: 2px solid #ccc;
padding-left: 15px;
transition: all .3s;
}
.youxi_tab .tab_bom li:hover {
border-left: 10px solid #65c2a3;
}
.youxi_tab .tab_bom li:hover p:nth-child(1) {
color: #65c2a3;
}
.youxi_tab .tab_bom li p:nth-child(1) {
font-size: 14px;
color: black;
font-weight: 700;
}
.youxi_tab .tab_bom li p:nth-child(20) {
font-size: 12px;
color: #ccc;
}
.youxi_tab .tab_bom .active {
display: block;
}
.youxi_tab .tab_bom div {
display: none;
width: 1060px;
position: absolute;
}
/* 游戏攻略模块结束 */
/* 热门活动开始 */
.huodong {
height: 500px;
position: relative;
}
.huodong .tr {
position: absolute;
width: 53px;
height: 144px;
background: url(../images/index_z_9ac8591.png) no-repeat -965px -530px;
}
.huodong .bor {
position: absolute;
bottom: 0;
width: 1280px;
height: 325px;
border: 2px solid #2fabd2;
}
.huodong .bor .beij {
height: 205px;
background: url(../images/tongren_bg_4e00ea2.jpg) repeat-x;
}
.huodong .rm {
position: absolute;
left: 115px;
top: 0;
font-size: 30px;
width: 120px;
height: 20px;
}
.huodong .tab_top {
position: relative;
top: 15px;
left: 350px;
width: 71px;
height: 18px;
border-left: 1px solid #ccc;
padding-left: 4px;
}
.huodong .tab_top li {
cursor: pointer;
float: left;
width: 14px;
height: 19px;
background: url(../images/index_z_9ac8591.png) no-repeat -1154px -235px;
margin: 0 4px
}
.huodong .tab_top .active {
background: url(../images/index_z_9ac8591.png) no-repeat -1161px -297px;
}
.huodong .tab_bom {
position: relative;
top: 45px;
left: 115px;
width: 300px;
height: 415px;
background-color: red;
}
.huodong .tab_bom img {
width: 100%;
height: 100%;
}
.huodong .tab_bom div {
display: none;
position: absolute;
}
.huodong .tab_bom .active {
display: block;
}
.huodong .rz {
position: absolute;
left: 480px;
top: 0;
font-size: 30px;
width: 120px;
height: 20px;
}
.huodong .max {
position: absolute;
top: 62px;
left: 440px;
width: 800px;
height: 422px;
}
.huodong .max li {
float: left;
width: 220px;
height: 422px;
margin-left: 20px;
}
.huodong .max li .top {
cursor: pointer;
width: 220px;
height: 349px;
background-color: #65c2a3;
transition: all 1s;
border: 1px solid transparent;
}
.huodong .max li .top:hover {
border: 1px solid #2fabd2;
box-shadow: 0 5px 10px 12px #fff;
}
.huodong .max li .bom {
margin-left: 20px;
margin-top: 10px;
padding-left: 20px;
border-left: 1px solid black;
}
.huodong .max li .bom p:nth-child(1) {
font-weight: 700;
font-size: 14px;
}
.huodong .max li .bom p:nth-child(2) {
font-size: 12px;
}
.huodong .max li:nth-child(1) .top {
animation: animation1 linear 15s infinite alternate;
}
.huodong .max li:nth-child(2) .top {
animation: animation2 linear 15s infinite alternate;
}
.huodong .max li:nth-child(3) .top {
animation: animation3 linear 15s infinite alternate;
}
@keyframes animation1 {
0% {
background: url(../images/z1.jpg) no-repeat;
}
50% {
background: url(../images/z2.jpg) no-repeat;
}
100% {
background: url(../images/z3.jpg) no-repeat;
}
}
@keyframes animation2 {
0% {
background: url(../images/z4.jpg) no-repeat;
}
50% {
background: url(../images/z5.jpg) no-repeat;
}
100% {
background: url(../images/z6.jpg) no-repeat;
}
}
@keyframes animation3 {
0% {
background: url(../images/z7.jpg) no-repeat;
}
50% {
background: url(../images/z8.jpg) no-repeat;
}
100% {
background: url(../images/z9.jpg) no-repeat;
}
}
/* 热门活动结束 */
/* 同人大促开始 */
.trdc {
height: 228px;
}
.trdc .top {
margin: 0 auto;
width: 500px;
height: 24px;
text-align: center;
padding-top: 40px;
}
.trdc .top li {
width: 124px;
float: left;
color: #65c2a3;
vertical-align: middle;
}
.trdc .max1 {
margin-top: 50px;
height: 205px;
background: url(../images/r6.jpg) center no-repeat;
}
.trdc .max1 .tab {
margin-left: 50px;
}
.trdc .max1 .tab li {
position: relative;
float: left;
width: 208px;
height: 150px;
border-left: 2px solid #7ed0db;
border-right: 2px solid #7ed0db;
margin-right: 36px;
background: url(../images/r1.jpg) center no-repeat;
text-align: center;
}
.trdc .max1 .tab li div {
position: absolute;
top: 0;
left: 47px;
z-index: 99;
display: inline-block;
width: 110px;
height: 110px;
border-radius: 50%;
background: url(../images/index_z_9ac8591.png) -208px -741px no-repeat;
transition: all .5s;
cursor: pointer;
}
.trdc .max1 .tab li div:hover {
transform: rotate(90deg);
}
.trdc .max1 .tab li span img {
width: 100px;
height: 100px;
border-radius: 50%;
margin-top: 5px;
margin-left: 1px;
}
/* 同人大促结束 */
/* 视听盛宴开始 */
.stsy {
margin-top: 70px;
height: 228px;
}
.stsy div {
float: left;
}
.stsy .left {
width: 58px;
height: 147px;
background: url(../images/index_z_9ac8591.png) no-repeat -768px -531px;
}
.stsy .right {
position: relative;
width: 1167px;
margin-left: 55px;
margin-top: 20px;
height: 218px;
}
.stsy .right .bj {
position: absolute;
top: 0;
left: -50px;
height: 208px;
width: 1167px;
background: url(../images/r6.jpg) center no-repeat;
}
.stsy .right div {
cursor: pointer;
text-align: center;
position: relative;
z-index: 999;
}
.stsy .right div:hover i {
background: url(../images/91.png) no-repeat
}
.stsy .right div a {
width: 250px;
height: 141px;
margin-right: 19px;
display: inline-block;
}
.stsy .right div:nth-of-type(1) a {
background: url(../images/1.gif) no-repeat;
}
.stsy .right div:nth-of-type(2) a {
background: url(../images/2.gif) no-repeat;
}
.stsy .right div:nth-of-type(3) a {
background: url(../images/3.gif) no-repeat;
}
.stsy .right div:nth-of-type(4) a {
background: url(../images/4.gif) no-repeat;
}
.stsy .right div span {
font-size: 16px;
position: absolute;
bottom: -5px;
right: 10px;
z-index: 99999;
padding: 5px 10px;
color: #fff;
background-color: black;
}
.stsy .right div i {
display: inline-block;
width: 16px;
height: 12px;
background: url(../images/9.png) no-repeat;
margin-right: 5px;
transition: all .5s;
}
/* 视听盛宴结束 */
/* 泛娱乐模块开始 */
.fyl {
height: 516px;
background: url(../images/b1.jpg) no-repeat left center;
}
.fyl .f {
position: absolute;
width: 60px;
height: 145px;
background: url(../images/index_z_9ac8591.png) -1023px -531px;
}
.fyl .lunbo {
position: relative;
left: 100px;
width: 1100px;
height: 516px;
overflow-x: scroll;
white-space: nowrap;
}
.fyl .lunbo::-webkit-scrollbar {
width: 5px;
background-color: #f3e0d8;
border-radius: 10px;
}
.fyl .lunbo::-webkit-scrollbar-thumb {
border-radius: 10px;
border: 2px solid #cb9f5f;
background: url(../images/111.png) no-repeat center;
}
.fyl .lunbo li {
display: inline-block;
height: 484px;
width: 220px;
background-color: #2fabd2;
margin-right: 10px;
margin-top: 10px;
transition: all .3s;
cursor: pointer;
}
.fyl .lunbo li:hover {
transform: translateY(-15px);
}
.fyl .lunbo li img {
width: 100%;
height: 100%;
}
/* 泛娱乐模块结束 */
/* 京东商业街模块开始 */
.syj {
height: 277px;
margin-top: 50px;
}
.syj .s {
position: absolute;
width: 53px;
height: 189px;
background: url(../images/index_z_9ac8591.png) no-repeat -645px -530px;
}
.syj .gd {
position: relative;
left: 100px;
width: 1100px;
height: 244px;
white-space: nowrap;
overflow-x: scroll;
}
.syj .gd li {
position: relative;
display: inline-block;
width: 250px;
height: 174px;
transition: all .3s;
}
.syj .gd li:hover {
transform: translateY(-15px);
}
.syj .gd::-webkit-scrollbar {
height: 20px;
background-color: #ccc;
border-radius: 10px;
}
.syj .gd::-webkit-scrollbar-thumb {
border-radius: 10px;
border: 2px solid #cb9f5f;
background: url(../images/111.png) no-repeat center;
}
.syj .gd li div {
width: 1px;
height: 41px;
background: #666;
position: absolute;
left: 30px;
bottom: 0;
}
.syj .gd li p {
font-size: 14px;
margin: 7px 0 0 42px;
}
/* 京东商业街模块结束 */
/* 二维码模块开始 */
.ewm {
position: relative;
margin-top: 30px;
height: 310px;
}
.ewm div {
position: absolute;
top: 83px;
width: 1200px;
height: 167px;
background: #f2f2f2;
}
.ewm .m {
position: relative;
left: 0;
top: 50px;
}
.ewm .m li {
position: relative;
float: left;
width: 200px;
height: 146px;
margin: 0 20px;
border: 1px solid #c2A060;
background-color: #fff;
}
.ewm .m li em {
display: inline-block;
position: absolute;
bottom: -30px;
left: 15px;
font-size: 14px;
color: black;
}
.ewm .m li em i {
color: #c2A060;
}
.ewm .m li p {
float: left;
width: 3px;
font-size: 12px;
margin: 10px 13px;
color: black;
}
.ewm .m li p:nth-child(3) {
font-size: 18px;
}
.ewm .m li span {
width: 130px;
height: 130px;
position: absolute;
top: -65px;
right: -25px;
}
.ewm .m li span img {
width: 100%;
height: 100%;
}
.ewm .m li:nth-child(3) {
border: none;
background-color: transparent;
}
.ewm .m li:nth-child(3) div {
position: relative;
top: -60px;
left: 50px;
width: 100px;
height: 239px;
}
.ewm .m li:nth-child(3) div img {
width: 100%;
height: 100%;
}
.ewm .m li:nth-child(3) i {
cursor: pointer;
position: absolute;
top: 0;
right: -40px;
display: inline-block;
height: 233px;
width: 203px;
background: url(../images/p1.png) no-repeat;
animation: se 3s steps(5) infinite alternate;
}
@keyframes se {
0% {
background-position: 0, 0;
}
100% {
background-position: -1015px, 0;
}
}
/* 二维码模块结束 */
/* 底部模块开始 */
.bottom {
width: 100%;
height: 927px;
background: url(../images/bottom_bg_b30cb11.png) center no-repeat;
position: relative;
margin-top: -50px;
}
.bottom .com {
width: 1200px;
height: 100%;
margin: 0 auto;
position: relative;
}
.bottom .com .logo {
width: 71px;
height: 224px;
background: url(../images/75.webp) no-repeat;
position: absolute;
top: 346px;
left: 235px;
}
.bottom .bom {
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-45%);
width: 1280px;
height: 181px;
margin: 0 auto;
text-align: center;
}
.bottom .bom p {
line-height: 25px;
}
.bottom .bom .one {
display: inline-block;
width: 127px;
height: 20px;
line-height: 20px;
text-align: center;
color: #fff;
cursor: pointer;
}
.bottom .bom .one i {
display: inline-block;
width: 20px;
height: 20px;
vertical-align: middle;
transition: all .3s;
}
.bottom .bom .one i:hover {
color: red;
}
.bottom .bom .two {
display: inline-block;
width: 1208px;
height: 48px;
margin-top: 20px;
}
.bottom .bom .two .left {
display: inline-block;
width: 400px;
height: 48px;
vertical-align: middle;
margin-bottom: 10px;
}
.bottom .bom .two .left img:nth-child(1) {
width: 118px;
height: 36px;
}
.bottom .bom .two .left img:nth-child(2) {
width: 149px;
height: 36px;
}
.bottom .bom .two .left img:nth-child(3) {
width: 46px;
height: 36px;
}
.bottom .bom .two .left img:nth-child(4) {
width: 46px;
height: 40px;
}
.bottom .bom .two .right {
display: inline-block;
width: 700px;
height: 48px;
text-align: left;
color: #fff;
}
.bottom .bom .three {
display: inline-block;
width: 1208px;
height: 82px;
text-align: left;
color: #ccc;
}
.bottom .bom .box3 {
position: absolute;
left: 515px;
bottom: 340px;
width: 356px;
height: 354px;
margin: 34px 0 0 320px;
cursor: pointer;
}
.bottom .bom .box3 .b1 {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 276px;
height: 276px;
background: url(../images/o1.png) no-repeat;
overflow: hidden;
}
.bottom .bom .box3 .b2 {
width: 276px;
height: 276px;
border-radius: 50%;
overflow: hidden;
position: absolute;
left: 0px;
top: 0;
}
.bottom .bom .box3 .b2 div {
position: absolute;
left: 40px;
top: 39px;
width: 230px;
height: 230px;
transition: all 2s;
z-index: 3;
}
.bottom .bom .box3 .b3 {
position: absolute;
top: -8px;
left: -8px;
width: 356px;
height: 354px;
opacity: 0;
}
.bottom .bom .box3 .b3 img {
width: 100%;
height: 100%;
}
.bottom .bom .box3 .b1 div img {
width: 100%;
height: 100%;
}
.bottom .bom .box3:hover .b {
display: block;
}
.bottom .bom .box3:hover .b2_1 {
transform: translate(-360px, -360px);
}
.bottom .bom .box3:hover .b3 {
animation: ss linear 1s infinite forwards alternate;
}
@keyframes ss {
0% {
transform: scale(0.1, 0.1);
opacity: 0;
}
25% {
transform: scale(0.25, 0.25);
opacity: 0.25;
}
50% {
transform: scale(0.5, 0.5);
opacity: 0.5;
}
75% {
transform: scale(0.75, 0.75);
opacity: 0.75;
}
100% {
transform: scale(1, 1);
opacity: 1;
}
}
.bottom .bom .box3 .b {
position: absolute;
left: -8px;
top: -8px;
background: url(../images/o2.png) no-repeat;
width: 356px;
height: 354px;
animation: hs 1s infinite alternate;
display: none;
}
.bottom .bom .box3 .b2 .b:nth-child(2) {
animation-delay: .4s;
}
.bottom .bom .box3 .b2 .b:nth-child(3) {
animation-delay: .8s;
}
@keyframes hs {
0% {
width: 50px;
height: 50px;
opacity: 1;
}
100% {
width: 356px;
height: 354px;
opacity: 0;
}
}
/* 底部模块结束 */
1.4 原生javascript
1.4.1 index.js样式
// d开服倒计时特效
window.addEventListener('load', function () {
let hours = this.document.querySelector('.hours')
let minute = this.document.querySelector('.minute')
let second = this.document.querySelector('.second')
var inputDate = +new Date('2023-11-12 23:00:00')
countDown()
setInterval(countDown, 1000)
function countDown() {
var nowDate = new Date()
var timer = (inputDate - nowDate) / 1000
var h = parseInt(timer / 60 / 60 % 24)
h = h < 10 ? '0' + h : h
hours.innerHTML = h
var m = parseInt(timer / 60 % 60)
m = m < 10 ? '0' + m : m
minute.innerHTML = m
var s = parseInt(timer % 60)
s = s < 10 ? '0' + s : s
second.innerHTML = s
}
// 隐藏倒计时
let tc = this.document.querySelector('.tc')
tc.onclick = function () {
this.parentElement.remove()
}
// 5秒后自动关闭开服倒计时
var count = this.document.querySelector('.count')
console.log(count)
let num = 15;
cod()
setInterval(cod, 1000)
function cod() {
if (num == 0) {
count.parentElement.remove()
} else {
count.innerHTML = `${num}s`
num--
}
}
})
// tab栏1开始
window.addEventListener('load', () => {
class Tabs {
constructor(header_top, type) {
var header_top = document.querySelector(header_top)
this.list1 = header_top.querySelectorAll('.header_list>li')
this.list2 = header_top.querySelectorAll('.tab_list>li')
this.type = type
this.chang()
}
chang() {
for (let i = 0; i < this.list1.length; i++) {
this.list1[i].addEventListener(this.type, () => {
var index = i
for (var m = 0; m < this.list1.length; m++) {
this.list1[m].classList.remove("active")
this.list2[m].classList.remove("active")
}
this.list1[index].classList.add("active")
this.list2[index].classList.add("active")
})
}
}
}
new Tabs(".header_top", "click")
})
// tab栏1结束
// tab2开始
window.addEventListener('load', () => {
class Tab {
constructor(header_top, type) {
var header_top = document.querySelector(header_top)
this.list1 = header_top.querySelectorAll('.top_list>li')
this.list2 = header_top.querySelectorAll('.img_list>li')
this.type = type
this.chang()
}
chang() {
for (let i = 0; i < this.list1.length; i++) {
this.list1[i].addEventListener(this.type, () => {
var index = i
for (var m = 0; m < this.list1.length; m++) {
this.list1[m].classList.remove("active")
this.list2[m].classList.remove("active")
}
this.list1[index].classList.add("active")
this.list2[index].classList.add("active")
})
}
}
}
new Tab(".pasj_list", "click")
})
// tab栏2结束
// tab3开始
window.addEventListener('load', function () {
class Ta {
constructor(header, type) {
var header = document.querySelector(header)
this.list1 = header.querySelectorAll('.tab_top li')
this.list2 = header.querySelectorAll('.tab_bom div')
this.type = type
this.chang()
}
chang() {
for (let i = 0; i < this.list1.length; i++) {
this.list1[i].addEventListener(this.type, () => {
var index = i;
for (var m = 0; m < this.list1.length; m++) {
this.list1[m].classList.remove("active")
this.list2[m].classList.remove("active")
}
this.list1[index].classList.add("active")
this.list2[index].classList.add("active")
})
}
}
}
new Ta('.youxi_tab', 'mouseover')
new Ta('.huodong', 'click')
})
// tab3结束
// 返回顶部
window.addEventListener('load', function () {
var fh = this.document.querySelector('.fh')
var yx = this.document.querySelector('.pasj_list')
var yxTop = yx.offsetTop;
this.document.addEventListener('scroll', function () {
if (window.pageYOffset > yxTop) {
fh.style.position = 'fixed'
fh.style.display = 'block'
} else {
fh.style.display = 'none'
}
// 点击返回顶部
fh.addEventListener('click', function () {
var timer = setInterval(function () {
if (document.documentElement.scrollTop <= 0) {
clearInterval(timer);
}
document.documentElement.scrollTop = document.documentElement.scrollTop - 10
}, 3)
})
})
})
// ES5面向对象写法
/* window.addEventListener('load', () => {
function Tabs(header_top, type) {
var header_top = document.querySelector(header_top)
this.list1 = document.querySelectorAll('.header_list>li')
this.list2 = document.querySelectorAll('.tab_list>li')
this.type = type
this.chang()
}
Tabs.prototype.chang = function () {
for (let i = 0; i < this.list1.length; i++) {
this.list1[i].addEventListener(this.type, () => {
var index = i
for (var m = 0; m < this.list1.length; m++) {
this.list1[m].classList.remove("active")
this.list2[m].classList.remove("active")
}
this.list1[index].classList.add("active")
this.list2[index].classList.add("active")
})
}
}
new Tabs(".header_top", "click")
})
*/
// ES6面向对象写法
2. 页面效果展示
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由半码博客整理，本文链接：https://www.bmabk.com/index.php/post/144075.html
