html静态网站基于游戏网站设计与实现共计10个页面 (仿地下城与勇士游戏网页)

🎉精彩专栏推荐👇🏻👇🏻👇🏻
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主
💂 作者主页: 【主页——🚀获取更多优质源码】
🎓 web前端期末大作业: 【📚毕设项目精品实战案例 (1000套) 】
🧡 程序员有趣的告白方式:【💌HTML七夕情人节表白网页制作 (110套) 】
🌎超炫酷的Echarts大屏可视化源码:【🔰 echarts大屏展示大数据平台可视化(150套) 】
🎁 免费且实用的WEB前端学习指南: 【📂web前端零基础到高级学习视频教程 120G干货分享】
🥇 关于作者: 历任研发工程师,技术组长,教学总监;曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰,难凉热血;多年过去,历经变迁,物是人非。 然而,对于技术的探索和追求从未停歇。 💪坚持原创,热衷分享,初心未改,继往开来!



一、👨‍🎓网站题目

🎮游戏官网、⛹️游戏网站、🕹️电竞游戏、🎴游戏介绍、等网站的设计与制作。


二、✍️网站描述

⭐ 网页中包含:Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等,视频音频元素,同时设计了logo(源文件),基本期末作业所需的知识点全覆盖。

🏅 一套A+的网页应该包含 (具体可根据个人要求而定)

  1. 页面分为页头、菜单导航栏(最好可下拉)、中间内容板块、页脚四大部分。
  2. 所有页面相互超链接,可到三级页面,有5-10个页面组成。
  3. 页面样式风格统一布局显示正常,不错乱,使用Div+Css技术。
  4. 菜单美观、醒目,二级菜单可正常弹出与跳转。
  5. 要有JS特效,如定时切换和手动切换图片轮播。
  6. 页面中有多媒体元素,如gif、视频、音乐,表单技术的使用。。
  7. 页面清爽、美观、大方,不雷同。 。
  8. 不仅要能够把用户要求的内容呈现出来,还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。

三、📚网站介绍

📔网站布局方面:计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

📓网站程序方面:计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器,已达到打开后就能即时看到网站的效果。

📘网站素材方面:计划收集各大平台好看的图片素材,并精挑细选适合网页风格的图片,然后使用PS做出适合网页尺寸的图片。

📒网站文件方面:网站系统文件种类包含:html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件;

📙网页编辑方面:网页作品代码简单,可使用任意HTML编辑软件(如:Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作)。
其中:
(1)📜html文件包含:其中index.html是首页、其他html为二级页面;
(2)📑 css文件包含:css全部页面样式,文字滚动, 图片放大等;
(3)📄 js文件包含:js实现动态轮播特效, 表单提交, 点击事件等等(个别网页中运用到js代码)。


四、🌐网站效果

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述


五、🔧 网站代码

🧱HTML结构代码


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>地下城与勇士-DNF-官方网站-腾讯游戏-格斗网游王者之作,500万同时在线</title>
    <link rel="stylesheet" href="css/reset.css">
    
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/index.css">-
</head>

<body>
    <div class="topnav clearfix">
        <div class="banxin">
            <div class="topnav-left">
                <a href="#"></a>
                <a href="safety.html"></a>
            </div>
            <div class="topnav-right">
                <a href="download.html">游戏下载</a>
                <a href="#">点卷充值 </a>
                <a href="#">开通黑钻</a>
                <a href="nav.html">返回官网首页</a>
            </div>
        </div>
    </div>
    <div class="center clearfix">
        <div class="daohang clearfix">
            <div class="banxin">
                <a href="" class="dnflogo"></a>
                <ul>
                    <a href="">
                        <li>官网首页</li>
                        <span>HOME</span>
                    </a>
                    <a href="#">
                        <li>游戏资料</li>
                        <span>GAME INFO</span>
                    </a>
                    <a href="activity.html">
                        <li>活动</li>
                        <span>ACTIVITV</span>
                    </a>
                    <a href="scattered.html">
                        <li>赛事</li>
                        <span>EVENT</span>
                    </a>
                    <a href="#">
                        <li>用户服务</li>
                        <span>SYSTEM</span>
                    </a>
                    <a href="safety.html">
                        <li>游戏安全</li>
                        <span>SECURTY</span>
                    </a>
                    <a href="convinced.html">
                        <li>玩家社区</li>
                        <span>COMMONITY</span>
                    </a>
                </ul>
                <div class="daohangup">
                    <div class="banxin">
                        <ol>
                            <li><a href="#"> 世界观</a></li>
                            <li><a href="javascript:;">周边商城</a> </li>
                            <li><a href="#">道聚城</a> </li>
                        </ol>
                        <ol>
                            <a href=""></a>
                            <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>
                        </ol>
                        <ol class="huodong">
                            <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>
                        </ol>
                        <ol class="huodong">
                            <li><a href="#"> F1天王赛</a></li>
                            <li><a href="#"> 职业联赛</a></li>
                            <li><a href="#"> 职业第一人</a></li>
                            <li><a href="#"> DPL赛事</a></li>
                        </ol>
                        <ol>
                            <li><a href="#"> 充值</a></li>
                            <li><a href="#"> 兑换CDKEY</a></li>
                            <li><a href="#"> 角色恢复</a></li>
                            <li><a href="#"> 圣耀服务</a></li>
                        </ol>
                        <ol>
                            <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>
                        </ol>
                        <ol>
                            <li><a href="#">讨论</a> </li>
                            <li><a href="#">微博</a> </li>
                            <li><a href="#">问答</a> </li>
                            <li class="app"><a href="#">DNF助手</a>
                                <img src="picture/app.png" alt="">
                                <li class="wx"><a href="#">微信</a>
                                    <img src="picture/wx.png" alt="">
                                </li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
        <div class="kuanghuan">
            <a href="#"></a>
        </div>
        <div class="content-top clearfix">
            <div class="banxin clearfix">
                <a href="greenhand.html">
                    <div class="content-top-left"></div>
                </a>
                <div class="content-top-zhanshi ">
                    <div>
                        <h3>星罗万象</h3>
                        <span>展示国宝乐领纯净增幅书</span>
                        <a href="scattered.html">
                            <s> 查看</s>
                            <i></i></a>
                    </div>

                    <div class="yinying"><img src="picture/yinying.jpg" alt=""></div>
                </div>

                <div class="content-top-lunbotu">
                    <a href="sign.html"><img src="picture/content_top_lunbotu.jpeg" alt=""></a>
                    <ul>
                        <a href="#">
                            <li></li>
                        </a>
                        <a href="#">
                            <li></li>
                        </a>
                        <a href="#">
                            <li></li>
                        </a>
                        <a href="#">
                            <li></li>
                        </a>
                        <a href="#">
                            <li></li>
                        </a>
                        <a href="#">
                            <li></li>
                        </a>
                    </ul>
                </div>
                <div class="content-top-right clearfix">
                    <div class="content-top-right-top">
                        <ul>
                            <a href="">
                                <li class="four">综合</li>
                            </a>
                            <a href="">
                                <li class="two">公告</li>
                            </a>
                            <a href="">
                                <li>赛事</li>
                            </a>
                            <a href="">
                                <li class="six">社区</li>
                            </a>
                            <a href="">
                                <li>媒体</li>
                            </a>
                        </ul>
                    </div>
                    <div class="content-top-right-center clearfix">
                        <a href="#">DNF官网测试团11月招募</a>
                    </div>
                    <div class="content-top-right-content">
                        <ul>
                            <li><i>社区</i><a href="">阳光少女翻翻乐活动攻略</a></li>
                            <li><i>社区</i> <a href="">新·周常乐副本初体验</a></li>
                            <li><i>社区</i><a href="">阳光少女成长记中的小活动攻略</a> </li>
                            <li><i>社区</i><a href=""> 没有刷过强者之路的勇士不算真正的强者</a></li>
                            <li><i>社区</i><a href="">3W魔攻平民11分钟召唤轻松担任普雷</a></li>
                            <li><i>社区</i><a href="">[壁纸铃声]第二期:魔界人的那些事</a></li>
                        </ul>
                    </div>
                    <div class="content-top-right-bottom">
                        <a href="#">查看更多资讯</a>
                        <i></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="bg clearfix"></div>
    <div class="zhongxin clearfix">
        <div class="banxin">
            <div class="rukou clearfix">
                <div class="rukou-top">
                    <h4>快速入口</h4>

                    <a href="#">
                        <div class="rukoulogo">
                            <i class="rukoulogo1"></i></div>
                        <p>CDK兑换</p>
                    </a>
                    <a href="#">
                        <div class="heizuan"><i class="heizuan1"></i></div>

                        <p>黑钻专区</p>
                    </a>
                    <a href="#">
                        <div class="kefulogo"><i class="kefulogo1"></i></div>

                        <p>客服留言</p>
                    </a>
                    <a href="#">
                        <div class="anquanlogo">
                            <i class="anquanlogo1"></i>
                        </div>

                        <p>安全中心</p>
                    </a>
                    <a href="#">
                        <div class="zhoubianlogo">
                            <i class="zhoubianlogo1"></i>
                        </div>

                        <p>周边商城</p>
                    </a>
                    <a href="#">
                        <div class="kefulogo_1">
                            <i class="kefulogo1"></i>
                        </div>

                        <p>联系客服</p>
                    </a>
                </div>
                <div class="rukou-bottom clearfix">
                    <h4>玩家社区</h4>
                    <a href="#">
                        <div class="luntanlogo">
                            <i class="luntanlogo1"></i>
                        </div>

                        <p>CDK兑换</p>
                    </a>
                    <a href="#">
                        <div class="weixinlogo">
                            <i class="weixinlogo1"></i>
                        </div>

                        <p>黑钻专区</p>
                    </a>
                    <a href="#">
                        <div class="tubialogo">
                            <i class="tubialogo"></i>
                        </div>

                        <p>客服留言</p>
                    </a>
                    <a href="#">
                        <div class="diantailogo">
                            <i class="diantailogo1"></i>
                        </div>

                        <p>安全中心</p>
                    </a>
                    <a href="#">
                        <div class="yuanhualogo">
                            <i class="yuanhualogo1"></i>
                        </div>

                        <p>原画馆</p>
                    </a>
                    <a href="#">
                        <div class="xinyuelogo">
                            <i class="xinyuelogo1"></i>
                        </div>

                        <p>心悦专区</p>
                    </a>
                </div>
            </div>
            <div class="zhongxin-center clearfix">
                <div class="zhongxin-center-topnav">
                    <h3>活动中心</h3>
                    <a href="convinced.html" class="zhongxin-xinyuelogo"></a>
                    <a href="activity.html" class="zhongxin-huodong-logo">活动中心</a>
                </div>
                <div class="zhongxin-center-top">
                    <a href="#">热门推荐<i></i> </a>
                    <a href="#">新手升级<i></i> </a>
                    <a href="#">商城特惠<i></i> </a>
                    <a href="#">合作活动<i></i> </a>
                </div>
                <div class="huodongname">
                    <p>活动名称</p>
                    <p>主要奖励</p>
                    <p>结束时间</p>
                </div>
                <div class="zhongxin-center-huodong">
                    <ul>
                        <li>
                            <p>星罗万象</p>
                            <div class="jiangli">
                                <img src="picture/jiangli.jpg" alt="">
                            </div>
                            <span>13天后结束</span>
                            <a href="#"></a>
                        </li>
                        <li>
                            <p>斯雷神克坤之梦</p>
                            <div class="jiangli">
                                <img src="picture/jiangli.jpg" alt="">
                            </div>
                            <span>1天后结束</span>
                            <a href="#"></a>
                        </li>
                        <li>
                            <p>寻找胶囊宝宝</p>
                            <div class="jiangli">
                                <img src="picture/jiangli_01.jpg" alt="">
                            </div>

                            <span>13天后结束</span>
                            <a href="#"></a>
                        </li>
                        <li>
                            <p>燃战F1天王赛</p>
                            <div class="jiangli">
                                <img src="picture/jiangli_02.png" alt="">
                            </div>
                            <span>5天后结束</span>

                            <a href="#"></a>
                        </li>
                        <li>
                            <p>天空巢穴 独步起航</p>
                            <div class="jiangli">
                                <img src="picture/jiangli_03.png" alt="">
                            </div>
                            <span>1天后结束</span>
                            <a href="#"></a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="hothuodong clearfix">
                <h4>热门活动</h4>
                <div>
                    <a href="darkStory.html"><img src="picture/hothuodong.jpg" alt=""></a>
                </div>
                <div>
                    <a href=""><img src="picture/hothuodong_01.jpg" alt=""></a>
                </div>


            </div>
            <div class="bg2"></div>
        </div>
    </div>
    <div class="tuijian clearfix">
        <div class="banxin2">
            <div class="tuijian-left">
                <div> <a href="#" class="tuijian-left-content">新手指南<i class="tuijian-left-content-tubiao"></i>
                    </a>
                    <ul class="xinshou">
                        <li><a href="#"><i></i><s></s><span>游戏登陆</span></a></li>
                        <li><a href="#"><i></i><s></s><span>游戏界面</span></a></li>
                        <li><a href="#"><i></i><s></s><span>系统设置</span></a></li>
                        <li><a href="#"><i></i><s></s><span>职业/技能</span></a></li>
                        <li><a href="#"><i></i><s></s><span>等级经验</span></a></li>
                        <li><a href="#"><i></i><s></s><span>战斗系统</span></a></li>
                        <li><a href="#"><i></i><s></s><span>任务系统</span></a></li>
                        <li><a href="#"><i></i><s></s><span>地下城</span></a></li>
                        <li><a href="#"><i></i><s></s><span>社区系统</span></a></li>
                        <li><a href="#"><i></i><s></s><span>宠物</span></a></li>
                        <li><a href="#"><i></i><s></s><span>生产/交易</span></a></li>
                        <li><a href="#"><i></i><s></s><span>副业</span></a></li>
                        <li><a href="#"><i></i><s></s><span>装备</span></a></li>
                        <li><a href="#"><i></i><s></s><span>商城</span></a></li>
                        <li><a href="#"><i></i><s></s><span>特色玩法</span></a></li>
                        <li><a href="#"><i></i><s></s><span>决斗场</span></a></li>
                    </ul>
                </div>
                <div>
                    <a href="#" class="tuijian-left-content">资料百科<i class="tuijian-left-content-tubiao"></i>
                    </a>
                    <div class="ziliao">
                        <ul class="ziliao-left">
                            <li><a href="#"><i></i><s></s><span>官方资料站</span></a></li>
                            <li><a href="#"><i></i><s></s><span>17173资料站</span></a></li>
                            <li><a href="#"><i></i><s></s><span>历史版本</span></a></li>
                            <li><a href="#"><i></i><s></s><span>漫画</span></a></li>
                            <li><a href="#"><i></i><s></s><span>小说</span></a></li>
                            <li><a href="#"><i></i><s></s><span>音乐</span></a></li>
                        </ul>
                        <div class="ziliao-right">
                            <h4>剧情百科</h4>
                            <a href="#">故事大纲</a>
                            <a href="#">插曲故事</a>
                            <a href="#">版本故事</a>
                            <a href="#">故事本</a>
                            <h4>人物百科</h4>
                            <a href="#">职业设定</a>
                            <a href="#">种族介绍</a>
                            <a href="#">城镇人物</a>
                            <a href="#">剧情人物</a>
                            <h4>背景知识</h4>
                            <a href="#">地理划分</a>
                            <a href="#">势力介绍</a>
                            <a href="#">组织介绍</a>
                            <a href="#">区域介绍</a>
                            <h4>游戏设定</h4>
                            <a href="#">编年史</a>
                            <a href="#">重要事件</a>
                            <a href="#">游戏术语</a>
                            <p>更多</p>
                        </div>
                    </div>
                </div>
                <div> <a href="#" class="tuijian-left-content">攻略视频<i class="tuijian-left-content-tubiao"></i>
                    </a>
                    <div class="gonglue">
                        <ul class="gonglue-left">
                            <li><a href="#"><i></i><s></s><span>充值</span></a></li>
                            <li><a href="#"><i></i><s></s><span>TGP助手</span></a></li>
                            <li><a href="#"><i></i><s></s><span>加点模拟器</span></a></li>
                            <li><a href="#"><i></i><s></s><span>体验服</span></a></li>
                            <li><a href="#"><i></i><s></s><span>宝珠查询器</span></a></li>
                            <li><a href="#"><i></i><s></s><span>头像装扮</span></a></li>
                            <li><a href="#"><i></i><s></s><span>自助工具</span></a></li>
                        </ul>
                        <div class="gonglue-right">
                            <h4>安全中心</h4>
                            <a href="#">女王的制裁</a>
                            <a href="#">封号查询</a>
                            <a href="#">封号申诉</a>
                            <a href="#">视频举报</a>
                            <a href="#">安全公约</a>
                            <a href="#">信用星级</a>
                            <a href="#">二级密码清除</a>
                            <a href="#">安全模式</a>
                            <h4>自助充值</h4>
                            <a href="#">充值</a>
                            <a href="#">消费记录</a>
                            <a href="#">角色恢复</a>
                            <a href="#">点亮图表</a>
                            <a href="#">兑换CDKEY</a>
                            <a href="#">预约战队</a>
                            <h4>客服中心</h4>
                            <a href="#">QQ在线客服</a>
                            <a href="#">问答</a>
                        </div>
                    </div>
                </div>
                <div><a href="#" class="tuijian-left-content">自助服务<i class="tuijian-left-content-tubiao"></i>
                    </a>
                    <div class="zizhufuwu">
                        <ul class="zizhufuwu-left">
                            <h4>职业攻略</h4>
                            <a href="#">鬼剑士</a>
                            <a href="#">格斗家(女)</a>
                            <a href="#">神枪手</a>
                            <a href="#">魔法师(女)</a>
                            <a href="#">圣职者</a>
                            <a href="#">女枪手</a>
                            <a href="#">暗夜使者</a>
                            <a href="#">缔造者</a>
                            <a href="#">鬼剑士(女)</a>
                            <a href="#">守护者</a>
                            <a href="#">格斗家(男)</a>
                            <a href="#">男法师</a>
                            <a href="#">黑暗武士</a>
                            <h4>地下城攻略</h4>
                            <a href="#">异界地下城</a>
                            <a href="#">远古镇魔曲</a>
                            <a href="#">安图恩地下城</a>
                            <a href="#">遗忘之地</a>
                            <a href="#">守护者祭坛</a>
                            <a href="#">无尽的祭坛</a>
                            <a href="#">绝望之塔</a>
                            <a href="#">领主之塔</a>
                            <a href="#">每周活动(格兰森林山坈)</a>
                        </ul>
                        <div class="zizhufuwu-right">
                            <div><i></i><a href="#">职业视频</a></div>
                            <div><i></i><a href="#">赛事视频</a></div>
                            <div><i></i><a href="#">官方视频</a></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tuijian-shipin">
                <div class="tuijian-shipin-top">
                    <h4>视频推荐</h4>
                    <a href="#">视频投稿</a>
                    <a href="#">宿命之门</a>
                    <a href="#">更多+</a>
                </div>
                <div class="tuijian-shipin-top_1">
                    <a href="#">热门推荐<i></i> </a>
                    <a href="#">官方视频<i></i> </a>
                    <a href="#">攻略视频<i></i> </a>
                    <a href="#">赛事视频<i></i> </a>
                    <a href="#">娱乐杂谈<i></i> </a>
                </div>
                <div class="tuijian-shipin-center">
                    <a href=""><img src="picture/0.jpg" alt=""></a>
                    <a href=""><img src="picture/tuijian-shipin-center_01.jpg" alt=""></a>
                    <a href=""><i></i></a>
                    <a href=""><b></b></a>
                    <div class="tuijian-shipin-center_1">
                        <p>决战DPL:狂人化身仰卧撑男,奶...</p>
                        <p>【肝吧爹】2分中打桩连招攻略...</p>
                        <a href="#"><i></i>21小时之前</a>
                        <a href="#"><i></i>20小时之前</a>
                    </div>
                </div>
            </div>
            <div class="tuijian-tuwen">
                <h4>图文推荐</h4>
                <a href="">
                    <div class="tuwen_one">
                        <h3>11.28更新答疑</h3>
                        <p>版本内容都在这里</p>
                        <span>查看</span>
                    </div>
                </a>
                
                <a href="#">
                    <div class="tuwen_two">
                        <h3>阳光少女活动攻略</h3>
                        <p>黄金书和精美立绘轻松拿</p>
                        <span>查看</span>
                    </div>
                </a>
            </div>
        </div>
    </div>
    <div class="daojucheng clearfix">
        <h4>道聚城推荐</h4>
        <div>
            <img src="picture/daojucheng_01.jpg" alt="">
            <p>幸运魔锤&nbsp;(5个)</p>
            <i>1200点卷</i>
            <a>立即购买</a>
        </div>
        <div>
            <img src="picture/daojucheng_02.jpg" alt="">
            <p>服务器喇叭</p>
            <i>250点卷</i>
            <a>立即购买</a>
        </div>
    </div>
    <div class="hezuo clearfix">
        <a href="#" class="hezuo-top">合作媒体网站<i></i></a>
    </div>
    <div class="mingxing clearfix">
        <!-- <div class="banxin2"> -->
        <div class="mingxing-top">
            <h4>明星主播</h4>
            <span><a>更多+</a></span>
        </div>
        <div class="mingxing-center">
            <div class="doudizhu">
                <div class="doudizhu_1"></div>
                <div class="doudizhu_2">
                    <img src="picture/mingxing-center_01.jpg" alt="">
                    <h3>AzZ、天子</h3>
                    <span>热度:470429</span>
                    <a href="#">直播中</a>
                </div>

            </div>
            <div class="zahuishi">
                <div class="zahuishi_1"></div>
                <div class="zahuishi_2">
                    <img src="picture/mingxing-center_02.jpg" alt="">
                    <h3>AzZ、杰哥祝您圆梦</h3>
                    <span>热度:433145</span>
                    <a href="#">直播中</a>
                </div>
            </div>
        </div>
        <div class="mingxing-right">
            <a href="#"><img src="picture/mingxing-right_01.jpeg" alt="">
            </a>
            <a href="#"><img src="picture/mingxing-right_02.jpeg" alt="">
            </a>
            <a href="#">勇士对决来袭,这样出装伤害血量...</a>
            <a href="#">机制最特殊的四把剑!别云🗡最怕...</a>
            <a href="#">一觉DPS最高的7个职业,冷门职...</a>
        </div>
        <a href="" class="bg3"></a>
        <!-- </div> -->
    </div>
    <div class="pinpai clearfix">
        <!-- <div class="banxin2"> -->
        <div class="pinpai-top">
            <h4>品牌专区</h4>
            <a>更多+</a>
        </div>
        <div class="pinpai-center">
            <div>
                <a href="">
                    <img src="picture/pinpai-center_01.jpeg" alt="">
                </a>
            </div>
            <div>
                <a href="">
                    <img src="picture/pinpai-cenger_02.jpeg" alt="">
                </a>
            </div>

        </div>
        <!-- </div> -->
    </div>
    <div class="bottom">
        <div class="banxin">
            <div class="bottom-left">
                <a href="" class="sheding">
                    <h4>世界观设定站</h4>
                    <p>探访赫尔德密室</p>
                </a>
                <a href="" class="shiji">
                    <h4>阿拉德创实际</h4>
                    <p>国创·新篇</p>
                </a>
                <a href="" class="donghua">
                    <h4>官方动画第二季</h4>
                    <p>预告</p>
                </a>
            </div>
            <div class="bottom-right">
                <a href="#" class="banben">
                    <p></p>
                </a>
                <a href="#" class="liuyan">
                    <p></p>
                </a>
                <a href="#" class="shijian">
                    <p></p>
                </a>
            </div>
        </div>
    </div>
    <div class="bottom_1 clearfix">
        <div class="banxin3">
            <div class="bottom_1-left ">
                <a href=""><img src="picture/foot-dark.png" alt=""></a>
                <a href=""><img src="http://www.ylcp.shop/files/files/1647757516550/img/" alt=""></a>
            </div>
            <div class="bottom_1-right">
                <a href="#">腾讯互动娱乐|</a>
                <a href="#">服务条款|</a>
                <a href="#">隐私保护指引|</a>
                <a href="#">儿童隐私保护指引|</a>
                <a href="#">腾讯游戏招聘|</a>
                <a href="#">腾讯游戏客服|</a>
                <a href="#">游戏列表|</a>
                <a href="#">广告服务及商务合作|</a>
                <a href="#">腾讯公司版权所有</a><br>
                <span>COPYRIGHT © 1998 - 2019 TENCENT. ALL RIGHTS RESERVED.</span><br>
                <span>COPYRIGHT © NEOPLE.INC., ALL RIGHTS RESERVED.</span><br>
                <span>抵制不良游戏 拒绝盗版游戏 注意自我保护 谨防受骗上当 适度游戏益脑 沉迷游戏伤身 合理安排时间 享受健康生活</span><br>
                <span>本网络游戏适合13+岁的用户使用;为了您的健康,请合理控制游戏时间</span><br>
                <a>粤网文[2017]6138-1456号|(总)网出证(粤)字第057号</a><br>
                <span>文网进字[2014]034号|ISBN 978-7-89988-060-9|新广出审[2014]952号|全国文化市场统一举报电话:12318</span>
            </div>

        </div>
    </div>
    <a class="guding">
        <div></div>
    </a>


</body>

</html>


💒CSS样式代码

.clearfix::before,
.clearfix::after{
    content: "";
    display: table;
}
.clearfix::after{
    clear: both;
}
.clearfix::before{
    *zoom: 1;
}
.container{
    width: 1444px;
    margin:0 auto;
    height: 44px;
}
.banxin{
    width: 1484px;
    margin: 0 auto;
}
.banxin2{
    width: 1800px;
    margin: 0 auto;
}
.banxin3{
    width: 902px;
    margin: 0 auto;
}
.banxin4{
    width: 1046px;
    margin: 0 auto;
}
.banxin5{
    width: 1000px;
    margin-left:300px;
}
.banxin6{
    width: 887px;
    margin-left: 500px;
}
.banxin7{
    width: 1070px;
    margin: 0 360px;
}
.banxin8{
    width: 1200px;
    margin: 0 auto;
}
.banxin9{
    width: 1116px;
    margin: 0 auto;
}
.banxin10{
    width: 1116px;
    margin: 0 auto;
}
.ban{
    width: 1120px;
    margin: 0 auto;
}




六、🥇 如何让学习不再盲目

很多刚入门编程的小白学习了基础语法,却不知道语法的用途,不知道如何加深映像,不知道如何提升自己,这个时候每天刷自主刷一些题就非常重要(百炼成神),可以去牛客网上的编程初学者入门训练。该专题为编程入门级别,适合刚学完语法的小白练习,题目涉及编程基础语法,基本结构等,每道题带有练习模式和考试模式,可还原考试模式进行模拟,也可通过练习模式进行练习 。


七、🎁更多干货

1.如果我的博客对你有帮助、如果你喜欢我的博客内容,请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦!

2.💗【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者,一起探讨 前端 Node 知识,互相学习」!

3.

以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻🔥

在这里插入图片描述

  • 6
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
### 回答1: 根据题目要求,我会用300字来回答html静态网站基于品优购电商购物网站网页设计与实现共计3个页面的细节和流程。 品优购电商购物网站是一个非常流行的电商网站,为了设计和实现网站静态页面,我们可以分为三个页面:主页、商品列表页和商品详情页。 在设计主页时,我们需要包含品优购网站的logo、导航栏、搜索栏、轮播图、特色推荐商品等元素。通过HTMLCSS来布局和样式化这些元素,使主页看起来美观且用户友好。另外,我们可以使用JavaScript实现一些交互功能,如点击导航栏跳转到相应的页面、轮播图自动切换等。 商品列表页是展示不同商品的页面。我们可以使用HTMLCSS来创建一个商品列表的结构,包括商品图片、名称、价格等信息。通过CSS来设置商品列表的样式,使它们形成一整行或一整列排列。最后,我们可以使用JavaScript实现一些筛选和排序功能,比如根据价格、品牌或其他条件来过滤商品。 商品详情页是展示特定商品详细信息的页面。我们可以使用HTMLCSS来创建一个包含商品名称、价格、描述、图片等信息的结构。通过CSS来优化布局和样式,使商品详情页面看起来更加美观。此外,我们可以使用JavaScript实现一些交互功能,比如选择商品数量、加入购物车等。 总结起来,在设计和实现这个静态网站的三个页面时,我们需要运用HTMLCSSJavaScript的知识。HTML用于创建页面结构,CSS用于样式化页面JavaScript用于实现交互功能。通过合理地运用这些技术,我们可以设计出一个美观、易用且功能齐全的品优购电商购物网站静态网站。 ### 回答2: 品优购电商购物网站静态网站设计实现共计3个页面。这三个页面分别是主页、商品列表页和商品详情页。 在主页中,我们需要展示品优购电商购物网站的Logo、导航栏、轮播图和推荐商品等内容。通过HTML代码,我们可以创建一个包含这些元素的页面结构,通过CSS样式,我们可以为这些元素设置适当的样式,如颜色、字体大小和边距等。通过JavaScript,我们可以实现轮播图的自动切换、导航栏的下拉菜单以及推荐商品的动态加载等交互功能。 商品列表页显示了品优购网站的各类商品,并提供筛选和排序功能。通过HTMLCSS,我们可以创建一个商品列表的布局,并为每个商品设置适当的样式,如标题、价格和图片等。通过JavaScript,我们可以实现商品的筛选和排序功能,以及翻页和加载更多商品等交互操作。 商品详情页展示了特定商品的详细信息和购买选项。通过HTMLCSS,我们可以创建一个商品详情页面的布局,并设置适当的样式,如商品标题、图片和描述等。通过JavaScript,我们可以实现商品数量的增减、加入购物车和立即购买等交互功能。 这三个页面的设计和实现基于HTMLCSSJavaScript技术,通过合理的页面结构、样式和交互功能,提供给用户一个良好的购物体验。 ### 回答3: 品优购是一家电商购物网站,它的网页设计与实现共计有三个页面,即首页、商品列表页和商品详情页。这些页面是基于HTMLCSSJavaScript开发的。 1. 首页: 首页是品优购的门面,它需要简洁明了地展示品优购的特色和优势。主要包括顶部导航栏、搜索框、轮播图和商品分类展示。通过HTMLCSS来构建页面的基本结构和样式,并利用JavaScript实现轮播图的自动切换和商品分类的展开与收起。 2. 商品列表页: 商品列表页用于展示品优购的全部商品,以供用户选择购买。该页面需要有商品的缩略图、名称、价格等基本信息,并且可以根据用户的选择进行排序和筛选。通过HTMLCSS来构建商品列表的布局和样式,并利用JavaScript实现价格的排序和筛选功能。 3. 商品详情页: 商品详情页用于展示某个具体商品的详细信息和购买选项。该页面需要展示商品的大图、名称、价格、描述等详细信息,并提供购买按钮和数量选择框。通过HTMLCSS来构建商品详情页的布局和样式,并利用JavaScript实现数量的增减和购买按钮的点击事件处理。 这三个页面的设计与实现需要充分考虑用户体验,确保页面的简洁、清晰和易用。同时,还需要注意网页的响应式设计,使其在不同屏幕尺寸下都能良好展示。使用HTMLCSSJavaScript的组合可以实现丰富的网页交互效果,给用户带来良好的购物体验。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

web学生网页设计

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值