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

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


文章目录

  • 一、‍网站题目
  • 二、✍️网站描述
  • 三、网站介绍
  • 四、网站效果
  • 五、 网站代码
    • HTML结构代码
    • CSS样式代码
  • 六、 如何让学习不再盲目
  • 七、更多干货


一、‍网站题目

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


二、✍️网站描述

⭐ 网页中包含: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静态网站基于游戏网站设计与实现共计10个页面 (仿地下城与勇士游戏网页)_第1张图片
html静态网站基于游戏网站设计与实现共计10个页面 (仿地下城与勇士游戏网页)_第2张图片



五、 网站代码

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>HOMEspan>
                    a>
                    <a href="#">
                        <li>游戏资料li>
                        <span>GAME INFOspan>
                    a>
                    <a href="activity.html">
                        <li>活动li>
                        <span>ACTIVITVspan>
                    a>
                    <a href="scattered.html">
                        <li>赛事li>
                        <span>EVENTspan>
                    a>
                    <a href="#">
                        <li>用户服务li>
                        <span>SYSTEMspan>
                    a>
                    <a href="safety.html">
                        <li>游戏安全li>
                        <span>SECURTYspan>
                    a>
                    <a href="convinced.html">
                        <li>玩家社区li>
                        <span>COMMONITYspan>
                    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="#"> 兑换CDKEYa>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="#">兑换CDKEYa>
                            <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>幸运魔锤 (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="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>热度:470429span>
                    <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>热度:433145span>
                    <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 class="pinpai clearfix">
        
        <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 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号|全国文化市场统一举报电话:12318span>
            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.

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

你可能感兴趣的:(网页设计与制作,html5期末大作业,html静态网页,html网页作业,javascript大作业,web课程与设计)