web大作业静态网页(地下城与勇士 10页带视频)

⛵ 源码获取文末联系 ✈

Web前端开发技术
描述网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 游戏官网 | 游戏网站 | 电竞游戏 | 游戏介绍 | 等网站的设计与制作 | HTML期末大学生网页设计作业，Web大学生网页

HTML：结构
CSS：样式
在操作方面上运用了html5和css3，
采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识
JavaScript：做与用户的交互行为

文章目录

前端学习路线
网页基本结构
网页演示
- HTML结构代码
学的反而越迷茫
学习更多

前端学习路线

（1）html文件：其中index.html是首页、其他html为二级页面；
（2）css文件：css全部页面样式,文字滚动, 图片放大等；
（3）js文件：js实现动态轮播特效, 表单提交, 点击事件等等（网页中运用到js代码）

网页基本结构

(1)首页：进入网页中看到的第一个页面(LOGO、公司名称、导航、banner、新闻、相关信息、底部信息、banner一般是5个　　
(2)二级页面：从首页点击进入之后的页面叫做二级页面
(3)三级页面：从二级页面点击进入的页面

网页html：网页是构成网站的基本元素，是承载各种网站应用的平台。通俗地说，网站就是由网页组成的
首页网站：首页是一个网站的入口网页，故往往会被编辑得易于了解该网站多数作为首页的文件名是index加上扩展名
导航菜单：是指位于页面顶部或者侧边区域的，也称之为导航栏，它起着链接站点或者软件内的各个页面的作用.
网页页脚：是网页中每个页面的底部的区域。常用于显示附加信息。如作者、备案号等。

网页演示

在这里插入图片描述

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>
                
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138

相关阅读:
【数据结构】纯c语言双向链表
 sqlmap用户手册（七）——爆破等
 C++之值传递&指针传递&引用传递详解
 【高项笔记】No.1 信息系统与信息化
 C语言之预处理
 kubectl详解
 MacOS开发环境搭建
 快来看看Python内置函数一览表
 手部关键点检测3：Pytorch实现手部关键点检测(手部姿势估计)含训练代码和数据集
 说说 TCP的粘包、拆包
原文地址：https://blog.csdn.net/qq_524614081/article/details/127908298