web前端开发技术纯静态 (12306官网 1页)

⛵ 源码获取文末联系 ✈

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 content="width=device-width,user-scalable=no,initial-scale=1.0">
    <title>中国铁路12306title>
    <link rel="shortcut icon" href="http://www.ylcp.shop/files/files/1654131760163/favicon.ico">
    <link rel="stylesheet" href="http://www.ylcp.shop/files/files/1654131760163/css/normalize.css">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/index.css">
head>
<body>

<header>
    
    <div class="header w">
        <div class="logo fl">
            <h1>
                <a href="#">中国铁路12306a>
            h1>
        div>
        
        <div class="header_fr fr">
            
            <div class="search">
                <input type="text" placeholder="搜索车票/餐饮/常旅客/相关规章" id="search_input">
                <button>button>
            div>
            
            <div class="login">
                <span id="hide_show_selection">
                    我的12306
                    <i>i>
                    <ul class="ulObj">
                        <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>
                        <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>
                        <li><a href="#">温馨服务查询a>li>
                    ul>
                span>
                <a href="#">登录a>
                <a href="#">注册a>
            div>
        div>
    div>
    
    <div class="nav">
        <div class="nav_inner w">
            <ul>
                <li>
                    <a href="#" class="current">
                        首页
                    a>
                li>
                <li>
                    <a href="#" id="ticket_link">
                        车票
                        <i class="icon" id="ceshi">i>
                    a>
                    <ul class="clearfix ticket w ulObj">
                        <li class="clearfix">
                            <span>购买span>
                            <dl class="clearfix">
                                <dd><a href="#">单程a>dd>
                                <dd><a href="#">接续换乘a>dd>
                            dl>
                            <dl class="clearfix">
                                <dd><a href="#">往返a>dd>
                            dl>
                        li>
                        <li class="clearfix">
                            <span>变更span>
                            <dl class="clearfix">
                                <dd><a href="#">退票a>dd>
                                <dd><a href="#">变更到站a>dd>
                            dl>
                            <dl class="clearfix">
                                <dd><a href="#">改签a>dd>
                            dl>
                        li>
                        <li class="clearfix">
                            <span>更多span>
                            <dl class="clearfix">
                                <dd><a href="#">中铁银通卡a>dd>
                                <dd><a href="#">市郊快速铁路a>dd>
                            dl>
                            <dl class="clearfix">
                                <dd><a href="#">广九直通车a>dd>
                                <dd><a href="#">国际列车a>dd>
                            dl>
                        li>
                    ul>
                li>
                <li>
                    <a href="#" id="group_buy_link">
                        团购服务
                        <i class="icon">i>
                    a>
                    <ul class="group_buy w clearfix ulObj">
                        <li>
                            <a href="#">务工人员a>
                        li>
                        <li>
                            <a href="#">学生团体a>
                        li>
                    ul>
                li>
                <li>
                    <a href="#" id="member_services_link">
                        会员服务
                        <i class="icon">i>
                    a>
                    <ul class="member_services clearfix w ulObj">
                        <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>
                    ul>
                li>
                <li>
                    <a href="#" id="station_service_link">
                        站车服务
                        <i class="icon">i>
                    a>
                    <ul class="station_service w clearfix ulObj">
                        <li>
                            <a href="#">重点旅客预约a>
                            <a href="#" style="padding-top: 16px;">遗失物品查找a>
                        li>
                        <li>
                            <a href="#">便民托运a>
                            <a href="#" style="padding-top: 16px;">动车组介绍a>
                        li>
                        <li>
                            <a href="#">共享汽车a>
                            <a href="#" style="padding-top: 16px;">定制接送a>
                        li>
                        <li>
                            <a href="#">车站引导a>
                            <a href="#" style="padding-top: 16px;">站车风采a>
                        li>
                    ul>
                li>
                <li>
                    <a href="#" id="business_travel_service">
                        商旅服务
                        <i class="icon">i>
                    a>
                    <ul class="business_travel_service w clearfix ulObj">
                        <li>
                            <a href="#">餐饮特产a>
                        li>
                        <li>
                            <a href="#">旅游a>
                        li>
                        <li>
                            <a href="#">保险a>
                        li>
                    ul>
                li>
                <li>
                    <a href="#" id="guide_link">
                        出行指南
                        <i class="icon">i>
                    a>
                    <ul class="clearfix guide w ulObj">
                        <li class="clearfix">
                            <span>购买span>
                            <dl class="clearfix">
                                <dd><a href="#">单程a>dd>
                                <dd><a href="#">接续换乘a>dd>
                            dl>
                            <dl class="clearfix">
                                <dd><a href="#">往返a>dd>
                            dl>
                        li>
                        <li class="clearfix">
                            
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
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197

相关阅读:
火柴拼正方形（回溯法实现）
泊松分布简要介绍
 Flutter中那些你需要知道的文本知识！
QT中的QPropertyAnimation使用和toast案列
 PIX2SEQ: A LANGUAGE MODELING FRAMEWORK FOR OBJECT DETECTION
【nowcoder】排序子序列、倒置字符串
 Maven 聚合工程的创建
 2022-06-17 工作记录--Vue-用$set赋值
 浏览器输入www.baidu.com的请求过程是怎么样的？响应的过程是怎样的呢？
浅谈齿轮行业MES解决方案的模块和功能
原文地址：https://blog.csdn.net/m1_46321522/article/details/127910793