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

news2025/7/20 9:42:37

源码获取 文末联系

Web前端开发技术
描述 网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 公司官网网站 | 企业官网 | 酒店官网 | 等网站的设计与制 | HTML期末大学生网页设计作业,Web大学生网页

  1. HTML:结构

  2. CSS:样式
    在操作方面上运用了html5和css3,
    采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识

  3. 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>中国铁路12306</title>
    <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>
<!-- 头部 start-->
<header>
    <!--标志-->
    <div class="header w">
        <div class="logo fl">
            <h1>
                <a href="#">中国铁路12306</a>
            </h1>
        </div>
        <!--header right-->
        <div class="header_fr fr">
            <!--搜索框-->
            <div class="search">
                <input type="text" placeholder="搜索车票/餐饮/常旅客/相关规章" id="search_input">
                <button></button>
            </div>
            <!--login-->
            <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">
                            <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="information_service_link">
                        信息查询
                        <i class="icon"></i>
                    </a>
                    <ul class="information_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>
            </ul>
        </div>
    </div>
</header>
<!-- 头部 end-->
<!--横幅 start-->
<div class="banner">
    <!--轮播-->
    <div class="fullSlide">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <!--小圆点-->
        <div class="circle">
            <span class="active"></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
    <!--查询框-->
    <div class="banner_search">
        <!--查询框左边-->
        <div class="search_left">
            <ul>
                <li style="background:#FFFFFF;">
                    <a style="color: rgb(51, 153, 255)">
                        车票
                        <i></i>
                    </a>
                </li>
                <li>
                    <a>
                        常用查询
                        <i></i>
                    </a>
                </li>
                <li>
                    <a>
                        订餐
                        <i></i>
                    </a>
                </li>
            </ul>
        </div>
        <!--查询框右边-->
        <div class="search_right_he">
            <div class="search_right">
                <!--查询框右边头部-->
                <div class="search_tab_hd">
                    <ul>
                        <li><a href="javascript:void(0)" target="_self" style="border-color: #3399FF">单程<i></i></a></li>
                        <li><a href="javascript:void(0)" target="_self">往返<i></i></a></li>
                        <li><a href="javascript:void(0)" target="_self">接续换乘<i></i></a></li>
                        <li><a href="javascript:void(0)" target="_self">退改签<i></i></a></li>
                    </ul>
                </div>
                <!--查询框右边底部-->
                <div class="search_item_bd_arr">
                    <div class="search_item_bd">
                        <div class="from_chu_fa from_item">
                            <label>出发地1</label>
                            <input type="text" placeholder="简拼/全拼/汉字">
                            <i></i>
                        </div>
                        <div class="from_mu_de from_item">
                            <label>到达地1</label>
                            <input type="text" placeholder="简拼/全拼/汉字">
                            <i></i>
                        </div>
                        <div class="from__time from_item">
                            <label>出发日期1</label>
                            <input type="text" placeholder="简拼/全拼/汉字">
                            <i></i>
                        </div>
                        <div class="city-change">
                            <i> </i>
                        </div>
                        <div class="from_bd">
                            <ul>
                                <li>学生1<i></i></li>
                                <li>高铁/动车1<i></i></li>
                            </ul>
                        </div>
                        <button class="query">查询1</button>
                    </div>
                    <div class="search_item_bd" style="display: none;">
                        <div class="from_chu_fa from_item">
                            <label>出发地2</label>
                            <input type="text" placeholder="简拼/全拼/汉字">
                            <i></i>
                        </div>
                        <div class="from_mu_de from_item">
                            <label>到达地2</label>
                            <input type="text" placeholder="简拼/全拼/汉字">
                            <i></i>
                        </div>
                        <div class="from__time from_item">
                            <label>出发日期2</label>
                            <input type="text" placeholder="简拼/全拼/汉字">
                            <i></i>
                        </div>
                        <div class="city-change">
                            <i> </i>
                        </div>
                        <div class="from_bd">
                            <ul>
                                <li>学生2<i></i></li>
                                <li>高铁/动车2<i></i></li>
                            </ul>
                        </div>
                        <button class="query">查询2</button>
                    </div>
                    <div class="search_item_bd" style="display: none;">
                        <div class="from_chu_fa from_item">
                            <label>出发地3</label>
                            <input type="text" placeholder="简拼/全拼/汉字">
                            <i></i>
                        </div>
                        <div class="from_mu_de from_item">
                            <label>到达地3</label>
                            <input type="text" placeholder="简拼/全拼/汉字">
                            <i></i>
                        </div>
                        <div class="from__time from_item">
                            <label>出发日期3</label>
                            <input type="text" placeholder="简拼/全拼/汉字">
                            <i></i>
                        </div>
                        <div class="city-change">
                            <i> </i>
                        </div>
                        <div class="from_bd">
                            <ul>
                                <li>学生3<i></i></li>
                                <li>高铁/动车3<i></i></li>
                            </ul>
                        </div>
                        <button class="query">查询3</button>
                    </div>
                    <div class="search_item_bd" style="display: none;">
                        <div class="from_chu_fa from_item">
                            <label>出发地4</label>
                            <input type="text" placeholder="简拼/全拼/汉字">
                            <i></i>
                        </div>
                        <div class="from_mu_de from_item">
                            <label>到达地4</label>
                            <input type="text" placeholder="简拼/全拼/汉字">
                            <i></i>
                        </div>
                        <div class="from__time from_item">
                            <label>出发日期4</label>
                            <input type="text" placeholder="简拼/全拼/汉字">
                            <i></i>
                        </div>
                        <div class="city-change">
                            <i> </i>
                        </div>
                        <div class="from_bd">
                            <ul>
                                <li>学生4<i></i></li>
                                <li>高铁/动车4<i></i></li>
                            </ul>
                        </div>
                        <button class="query">查询4</button>
                    </div>
                </div>
            </div>
            <div class="search_right" style="display: none;">
                <!--查询框右边头部-->
                <div class="search_tab_hd">
                    <ul>
                        <li><a href="javascript:void(0)" target="_self" style="border-color: #3399FF">正晚点<i></i></a>
                        </li>
                        <li><a href="javascript:void(0)" target="_self">检票口<i></i></a></li>
                        <li><a href="javascript:void(0)" target="_self">起售时间<i></i></a></li>
                        <li><a href="javascript:void(0)" target="_self">天气查询<i></i></a></li>
                    </ul>
                </div>
                <!--查询框右边底部-->
                <div class="search_item_bd_arr">
                    <div class="search_item_bd">
                        <div class="from_chu_fa from_item">
                            <label>出发地1</label>
                            <input type="text" placeholder="简拼/全拼/汉字">
                            <i></i>
                        </div>
                        <div class="from_mu_de from_item">
                            <label>到达地1</label>
                            <input type="text" placeholder="简拼/全拼/汉字">
                            <i></i>
                        </div>
                        <div class="from__time from_item">
                            <label>出发日期1</label>
                            <input type="text" placeholder="简拼/全拼/汉字">
                            <i></i>
                        </div>
                        <div class="city-change">
                            <i> </i>
                        </div>
                        <div class="from_bd">
                            <ul>
                                <li>学生1<i></i></li>
                                <li>高铁/动车1<i></i></li>
                            </ul>
                        </div>
                        <button class="query">查询1</button>
                    </div>
                    <div class="search_item_bd" style="display: none">
                        <div class="from_chu_fa from_item">
                            <label>出发地2</label>
                            <input type="text" placeholder="简拼/全拼/汉字">
                            <i></i>
                        </div>
                        <div class="from_mu_de from_item">
                            <label>到达地2</label>
                            <input type="text" placeholder="简拼/全拼/汉字">
                            <i></i>
                        </div>
                        <div class="from__time from_item">
                            <label>出发日期2</label>
                            <input type="text" placeholder="简拼/全拼/汉字">
                            <i></i>
                        </div>
                        <div class="city-change">
                            <i> </i>
                        </div>
                        <div class="from_bd">
                            <ul>
                                <li>学生2<i></i></li>
                                <li>高铁/动车2<i></i></li>
                            </ul>
                        </div>
                        <button class="query">查询2</button>
                    </div>
                    <div class="search_item_bd" style="display: none">
                        <div class="from_chu_fa from_item">
                            <label>出发地3</label>
                            <input type="text" placeholder="简拼/全拼/汉字">
                            <i></i>
                        </div>
                        <div class="from_mu_de from_item">
                            <label>到达地3</label>
                            <input type="text" placeholder="简拼/全拼/汉字">
                            <i></i>
                        </div>
                        <div class="from__time from_item">
                            <label>出发日期3</label>
                            <input type="text" placeholder="简拼/全拼/汉字">
                            <i></i>
                        </div>
                        <div class="city-change">
                            <i> </i>
                        </div>
                        <div class="from_bd">
                            <ul>
                                <li>学生3<i></i></li>
                                <li>高铁/动车3<i></i></li>
                            </ul>
                        </div>
                        <button class="query">查询3</button>
                    </div>
                    <div class="search_item_bd" style="display: none">
                        <div class="from_chu_fa from_item">
                            <label>出发地4</label>
                            <input type="text" placeholder="简拼/全拼/汉字">
                            <i></i>
                        </div>
                        <div class="from_mu_de from_item">
                            <label>到达地4</label>
                            <input type="text" placeholder="简拼/全拼/汉字">
                            <i></i>
                        </div>
                        <div class="from__time from_item">
                            <label>出发日期4</label>
                            <input type="text" placeholder="简拼/全拼/汉字">
                            <i></i>
                        </div>
                        <div class="city-change">
                            <i> </i>
                        </div>
                        <div class="from_bd">
                            <ul>
                                <li>学生4<i></i></li>
                                <li>高铁/动车4<i></i></li>
                            </ul>
                        </div>
                        <button class="query">查询4</button>
                    </div>
                </div>
            </div>
            <div class="search_right" style="display: none;">
                <!--查询框右边头部-->
                <div class="search_tab_hd">
                    <ul>
                        <li><a href="javascript:void(0)" target="_self" style="border-color: #3399FF">预定<i></i></a></li>
                        <li><a href="javascript:void(0)" target="_self">餐饮<i></i></a></li>
                        <li><a href="javascript:void(0)" target="_self">订单<i></i></a></li>
                        <li><a href="javascript:void(0)" target="_self">嘤嘤嘤<i></i></a></li>
                    </ul>
                </div>
                <!--查询框右边底部-->
                <div class="search_item_bd_arr">
                    <div class="search_item_bd">
                        <div class="from_chu_fa from_item">
                            <label>出发地1</label>
                            <input type="text" placeholder="简拼/全拼/汉字">
                            <i></i>
                        </div>
                        <div class="from_mu_de from_item">
                            <label>到达地1</label>
                            <input type="text" placeholder="简拼/全拼/汉字">
                            <i></i>
                        </div>
                        <div class="from__time from_item">
                            <label>出发日期1</label>
                            <input type="text" placeholder="简拼/全拼/汉字">
                            <i></i>
                        </div>
                        <div class="city-change">
                            <i> </i>
                        </div>
                        <div class="from_bd">
                            <ul>
                                <li>学生1<i></i></li>
                                <li>高铁/动车1<i></i></li>
                            </ul>
                        </div>
                        <button class="query">查询1</button>
                    </div>
                    <div class="search_item_bd" style="display: none">
                        <div class="from_chu_fa from_item">
                            <label>出发地2</label>
                            <input type="text" placeholder="简拼/全拼/汉字">
                            <i></i>
                        </div>
                        <div class="from_mu_de from_item">
                            <label>到达地2</label>
                            <input type="text" placeholder="简拼/全拼/汉字">
                            <i></i>
                        </div>
                        <div class="from__time from_item">
                            <label>出发日期2</label>
                            <input type="text" placeholder="简拼/全拼/汉字">
                            <i></i>
                        </div>
                        <div class="city-change">
                            <i> </i>
                        </div>
                        <div class="from_bd">
                            <ul>
                                <li>学生2<i></i></li>
                                <li>高铁/动车2<i></i></li>
                            </ul>
                        </div>
                        <button class="query">查询2</button>
                    </div>
                    <div class="search_item_bd" style="display: none">
                        <div class="from_chu_fa from_item">
                            <label>出发地3</label>
                            <input type="text" placeholder="简拼/全拼/汉字">
                            <i></i>
                        </div>
                        <div class="from_mu_de from_item">
                            <label>到达地3</label>
                            <input type="text" placeholder="简拼/全拼/汉字">
                            <i></i>
                        </div>
                        <div class="from__time from_item">
                            <label>出发日期3</label>
                            <input type="text" placeholder="简拼/全拼/汉字">
                            <i></i>
                        </div>
                        <div class="city-change">
                            <i> </i>
                        </div>
                        <div class="from_bd">
                            <ul>
                                <li>学生3<i></i></li>
                                <li>高铁/动车3<i></i></li>
                            </ul>
                        </div>
                        <button class="query">查询3</button>
                    </div>
                    <div class="search_item_bd" style="display: none">
                        <div class="from_chu_fa from_item">
                            <label>出发地4</label>
                            <input type="text" placeholder="简拼/全拼/汉字">
                            <i></i>
                        </div>
                        <div class="from_mu_de from_item">
                            <label>到达地4</label>
                            <input type="text" placeholder="简拼/全拼/汉字">
                            <i></i>
                        </div>
                        <div class="from__time from_item">
                            <label>出发日期4</label>
                            <input type="text" placeholder="简拼/全拼/汉字">
                            <i></i>
                        </div>
                        <div class="city-change">
                            <i> </i>
                        </div>
                        <div class="from_bd">
                            <ul>
                                <li>学生4<i></i></li>
                                <li>高铁/动车4<i></i></li>
                            </ul>
                        </div>
                        <button class="query">查询4</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--横幅 end-->
<!--服务 start-->
<div class="service w">
    <ul class="service_list">
        <li>
            <a href="" target="_self">
                <i></i>
                <span>重点旅客预约</span>
            </a>
        </li>
        <li>
            <a href="">
                <i></i>
                <span>遗失物品查找</span>
            </a>
        </li>
        <li>
            <a href="">
                <i></i>
                <span>共享汽车</span>
            </a>
        </li>
        <li>
            <a href="">
                <i></i>
                <span>便民托运</span>
            </a>
        </li>
        <li>
            <a href="">
                <i></i>
                <span>车站引导</span>
            </a>
        </li>
        <li>
            <a href="">
                <i></i>
                <span>站车风采</span>
            </a>
        </li>
        <li>
            <a href="">
                <i></i>
                <span>用户反馈</span>
            </a>
        </li>
    </ul>
    <div class="service_lg w">
        <ul class="service_lg_list">
            <li>
                <a href="">
                    <img src="picture/abanner01.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="">
                    <img src="picture/abanner02.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="">
                    <img src="picture/abanner03.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="">
                    <img src="picture/abanner04.jpg" alt="">
                </a>
            </li>
        </ul>
    </div>
</div>
<!--服务 end-->

<!--旅游 start-->
<div class="travel w">
    <div class="travel_tit">
        <h3>铁路旅游</h3>
        <span><a href="#">更多<i></i></a></span>
    </div>
    <div class="travel_list">
        <ul>
            <li>
                <a href="">
                    <div class="travel_pic">
                        <img src="picture/pic1.jpg" alt="">
                    </div>
                    <div class="travel_info">
                        <p>“环西部火车游”美丽甘南三日游</p>
                        <span><i>¥</i> 2560</span>
                    </div>
                </a>
            </li>
            <li>
                <a href="">
                    <div class="travel_pic">
                        <img src="picture/pic2.jpg" alt="">
                    </div>
                    <div class="travel_info">
                        <p>“环西部火车游” 陇上江南·行摄山>水陇南三日游</p>
                        <span><i>¥</i> 930</span>
                    </div>
                </a>
            </li>
            <li>
                <a href="">
                    <div class="travel_pic">
                        <img src="picture/pic3.jpg" alt="">
                    </div>
                    <div class="travel_info">
                        <p>“环西部火车游”华夏寻根·人文始祖天水两日游</p>
                        <span><i>¥</i> 980</span>
                    </div>
                </a>
            </li>
            <li>
                <a href="">
                    <div class="travel_pic">
                        <img src="picture/pic4.jpg" alt="">
                    </div>
                    <div class="travel_info">
                        <p>“环西部火车游”精品旅游线路</p>
                        <span><i>¥</i> 3380</span>
                    </div>
                </a>
            </li>
            <li>
                <a href="">
                    <div class="travel_pic">
                        <img src="picture/pic5.jpg" alt="">
                    </div>
                    <div class="travel_info">
                        <p>“环西部火车游”美丽甘南三日游</p>
                        <span><i>¥</i> 880</span>
                    </div>
                </a>
            </li>
            <li>
                <a href="">
                    <div class="travel_pic">
                        <img src="picture/pic6.jpg" alt="">
                    </div>
                    <div class="travel_info">
                        <p>“环西部火车游” 青海湖、茶卡2日>游</p>
                        <span><i>¥</i> 880</span>
                    </div>
                </a>
            </li>
            <li>
                <a href="">
                    <div class="travel_pic">
                        <img src="picture/pic7.jpg" alt="">
                    </div>
                    <div class="travel_info">
                        <p>“环西部火车游”嘉敦5日游</p>
                        <span><i>¥</i> 2260</span>
                    </div>
                </a>
            </li>
            <li>
                <a href="">
                    <div class="travel_pic">
                        <img src="picture/pic7.jpg" alt="">
                    </div>
                    <div class="travel_info">
                        <p>“环西部火车游” 敦煌一地三日游</p>
                        <span><i>¥</i> 1380</span>
                    </div>
                </a>
            </li>
        </ul>
    </div>
</div>
<!--旅游 end-->
<!--新闻 start-->
<div class="news w">
    <div class="news_hd">
        <ul>
            <li>
                <a>
                    最新发布
                </a>
            </li>
            <li>
                <a>
                    常见问题
                </a>
            </li>
            <li>
                <a>
                    信用信息
                </a>
            </li>
        </ul>
    </div>
    <div class="news_bd">
        <ul>
            <li><a href="#" title="候补购票操作说明">候补购票操作说明1</a><span>2022-10-12</span></li>
            <li><a href="#" title="公 告2022-11-03">公 告2022-11-03</a><span>2022-11-03</span></li>
            <li><a href="#" title="关于调整互联网、电话订票起售时间的公告">关于调整互联网、电话订票起售时间的公告1</a><span>2022-10-10</span></li>
            <li><a href="#" title="中国铁路成都局集团有限公司关于10月18日至25日加开部分列车的公告">中国铁路成都局集团有限公司关于10月18日至25日加开部分列车的公告1</a><span>2022-10-17</span>
            </li>
            <li><a href="#" title="中国铁路上海局集团有限公司关于2022年10月18日增开部分旅客列车的公告">中国铁路上海局集团有限公司关于2022年10月18日增开部分旅客列车的公告1</a><span>2022-10-17</span>
            </li>
            <li><a href="#" title="中国铁路广州局集团有限公司关于2022年10月18日至10月20日增开G9692次、G9691次旅客列车的公告">中国铁路广州局集团有限公司关于2022年10月18日至10月20日增开G9692次、G9691次旅客列车的公告1</a><span>2022-10-17</span>
            </li>
            <li><a href="#" title="中国铁路南昌局集团有限公司关于2022年10月部分旅客列车停运信息公告">中国铁路南昌局集团有限公司关于2022年10月部分旅客列车停运信息公告1</a><span>2022-10-17</span>
            </li>
            <li><a href="#" title="中国铁路南昌局集团有限公司关于2022年10月部分旅客列车增开信息公告(三)">中国铁路南昌局集团有限公司关于2022年10月部分旅客列车增开信息公告(三)1</a><span>2022-10-17</span>
            </li>
            <li><a href="#" title="中国铁路广州局集团有限公司关于2022年10月18日至10月20日增开G9622/3次等旅客列车的公告">中国铁路广州局集团有限公司关于2022年10月18日至10月20日增开G9622/3次等旅客列车的公告1</a><span>2022-10-17</span>
            </li>
            <li><a href="#" title="中国铁路广州局集团有限公司关于2022年10月18日至10月20日增开部分旅客列车的公告">中国铁路广州局集团有限公司关于2022年10月18日至10月20日增开部分旅客列车的公告1 </a><span>2022-10-17</span>
            </li>
        </ul>
        <ul style="display: none">
            <li><a href="#" title="候补购票操作说明">实名制车票</a></li>
            <li><a href="#" title="公 告2022-11-03">互联网购票、换票</a></li>
            <li><a href="#" title="关于调整互联网、电话订票起售时间的公告">售票窗口购票</a></li>
            <li><a href="#" title="中国铁路成都局集团有限公司关于10月18日至25日加开部分列车的公告">互联网改签、变更到站</a></li>
            <li><a href="#" title="中国铁路上海局集团有限公司关于2022年10月18日增开部分旅客列车的公告">互联网改签、变更到站</a></li>
            <li><a href="#" title="中国铁路广州局集团有限公司关于2022年10月18日至10月20日增开G9692次、G9691次旅客列车的公告">随身携带品</a></li>
            <li><a href="#" title="中国铁路南昌局集团有限公司关于2022年10月部分旅客列车停运信息公告">进出站</a></li>
            <li><a href="#" title="中国铁路南昌局集团有限公司关于2022年10月部分旅客列车增开信息公告(三)">丢失车票</a></li>
            <li><a href="#" title="中国铁路广州局集团有限公司关于2022年10月18日至10月20日增开G9622/3次等旅客列车的公告">使用居民身份证直接检票乘车</a></li>
            <li><a href="#" title="中国铁路广州局集团有限公司关于2022年10月18日至10月20日增开部分旅客列车的公告">广深港跨境列车</a></li>
        </ul>
        <ul style="display: none">
            <li><a href="#" title="候补购票操作说明">候补购票操作说明3</a><span>2022-10-12</span></li>
            <li><a href="#" title="公 告2022-11-03">公 告2022-11-03</a><span>2022-11-03</span></li>
            <li><a href="#" title="关于调整互联网、电话订票起售时间的公告">关于调整互联网、电话订票起售时间的公告3</a><span>2022-10-10</span></li>
            <li><a href="#" title="中国铁路成都局集团有限公司关于10月18日至25日加开部分列车的公告">中国铁路成都局集团有限公司关于10月18日至25日加开部分列车的公告3</a><span>2022-10-17</span>
            </li>
            <li><a href="#" title="中国铁路上海局集团有限公司关于2022年10月18日增开部分旅客列车的公告">中国铁路上海局集团有限公司关于2022年10月18日增开部分旅客列车的公告3</a><span>2022-10-17</span>
            </li>
            <li><a href="#" title="中国铁路广州局集团有限公司关于2022年10月18日至10月20日增开G9692次、G9691次旅客列车的公告">中国铁路广州局集团有限公司关于2022年10月18日至10月20日增开G9692次、G9691次旅客列车的公告3</a><span>2022-10-17</span>
            </li>
            <li><a href="#" title="中国铁路南昌局集团有限公司关于2022年10月部分旅客列车停运信息公告">中国铁路南昌局集团有限公司关于2022年10月部分旅客列车停运信息公告3</a><span>2022-10-17</span>
            </li>
            <li><a href="#" title="中国铁路南昌局集团有限公司关于2022年10月部分旅客列车增开信息公告(三)">中国铁路南昌局集团有限公司关于2022年10月部分旅客列车增开信息公告(三)3</a><span>2022-10-17</span>
            </li>
            <li><a href="#" title="中国铁路广州局集团有限公司关于2022年10月18日至10月20日增开G9622/3次等旅客列车的公告">中国铁路广州局集团有限公司关于2022年10月18日至10月20日增开G9622/3次等旅客列车的公告3</a><span>2022-10-17</span>
            </li>
            <li><a href="#" title="中国铁路广州局集团有限公司关于2022年10月18日至10月20日增开部分旅客列车的公告">中国铁路广州局集团有限公司关于2022年10月18日至10月20日增开部分旅客列车的公告3</a><span>2022-10-17</span>
            </li>
        </ul>
    </div>
</div>
<!--新闻 end-->
<!--底部 start-->
<footer>
    <!--友情链接和二维码-->
    <div class="footer">
        <div class="footer_lk">
            <div class="footer_inner w">
                <!--友情链接-->
                <div class="links">
                    <h2>友情链接</h2>
                    <ul>
                        <li><a href="javascript:void(0)" class="J_event"><img src="picture/link02.png" alt=""></a></li>
                        <li><a href="javascript:void(0)"><img src="picture/link03.png" alt=""></a></li>
                        <li><a href="javascript:void(0)"><img src="picture/link04.png" alt=""></a></li>
                        <li><a href="javascript:void(0)"><img src="picture/link05.png" alt=""></a></li>
                    </ul>
                </div>
                <!--二维码-->
                <div class="code">
                    <ul>
                        <li>
                            <h2>中国铁路官方微信</h2>
                            <img src="picture/zgtlwx.png" alt="">
                        </li>
                        <li>
                            <h2>中国铁路官方微博</h2>
                            <img src="picture/zgtlwb.png" alt="">
                        </li>
                        <li>
                            <h2>12306 公众号</h2>
                            <img src="picture/public.png" alt="">
                        </li>
                        <li>
                            <h2>铁路12306</h2>
                            <img src="picture/download.png" alt="">
                        </li>
                        <li>
                            <div class="tips">官方APP下载,目前铁路未授权其他网站或APP开展类似服务内容,敬请广大用户注意。</div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="copy">
            <div class="copy_inner w">
                <span>版权所有©2008-2022 中国铁道科学研究院集团有限公司</span><br>
                <p>京ICP备05020493号-4 | 京ICP证150437号</p>
            </div>
        </div>
    </div>
</footer>
<!--底部 end-->
<!--右侧浮动栏 start-->
<div class="fixed-right">
    <ul>
        <li>
            <a href="#">
                <h4>最新发布</h4>
                <i class="icon"></i>
            </a>
        </li>
        <li>
            <a href="#">
                <h4>联系客户</h4>
                <i class="icon"></i>
            </a>
        </li>
        <li>
            <a href="#">
                <h4>App下载</h4>
                <i class="icon"></i>
            </a>
        </li>
        <li>
            <a href="#">
                <h4>旅客出行温馨提示</h4>
                <i class="icon"></i>
            </a>
        </li>
    </ul>
</div>
<!--右侧浮动栏 end-->
</body>

</html>


学的反而越迷茫

有这种感觉很正常,因为你还没有真正去公司里面待过,也不清楚自己到底要学多少东西才能胜任公司里面给你分配的活。我从你的表述来看,你的基础应该还是很扎实的。跟着网上那种全套的视频教程学肯定没有问题。

当你以后真正进入公司,发现工作的难度和量大约只有你学习时期的大约20%,你可能就会发出一声叹息:原来工作也不过如此嘛。

这是很正常的,因为大部分公司是招你进去去干活的,写业务的,不是让你一个新人去研发公司架构的。都是现成的东西,你要做的就是在别人的教导下,手把手的指挥下去添砖加瓦。到时候你恐怕要惊呼:就这?

所以,放松心态吧,好好享受大学时光
—————————————————


学习更多

关注我 | 点赞博文 | 每天带你涨知识


在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/17294.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

WebDriverManager自动管理浏览器Driver包

WebDriverManager是什么&#xff1f; WebDriverManager是一个开源 Java 库&#xff0c;它以全自动方式管理&#xff08;即下载、设置和维护&#xff09; Selenium WebDriver所需的驱动程序&#xff08;例如&#xff0c;chromedriver、geckodriver、msededriver 等&#xff09;…

【ASM】字节码操作 工具类与常用类 Printer、ASMifier、Textifier 介绍

文章目录 1.概述2. Printer2.1 class info2.2 fields2.3 constructors2.4 methods3. ASMifier与Textifier3.1 如何使用3.2 从命令行使用3.3 visit方法3.4 从代码中使用1.概述 在上一篇文章中:【ASM】字节码操作 工具类与常用类 TraceClassVisitor 介绍 我们知道了如何使用Tra…

nodejs+vue+elementui个人图书分享共享网站

本面向图书共享系统主要包括两大功能模块&#xff0c;即用户功能模块和管理员功能模块。 &#xff08;1&#xff09;管理员模块&#xff1a;首页、个人中心、图书分类管理、图书信息管理、用户管理、用户分享管理、联系我们、社区交流、系统管理。 &#xff08;2&#xff09;用…

多功能电子密码锁的设计与制作

目 录 第一章 绪论 1 1.1 课题背景和意义 1 1.2 多功能电子密码锁发展趋势 2 第二章 总体设计方案的确定 3 2.1 多功能电子密码锁设计的具体要求 3 2.2 总体设计方案选定 3 第三章 系统硬件设计 5 3.1 设计原理 5 3.2 单片机STC89C51简介 5 3.3 AT24C02存储芯片 9 3.4 LCD显示模…

《Deep learning Based Text Classification:A comprehensive Review》文本综述

介绍 深度学习综述年年有&#xff0c;今年特别多。随着深度学习在机器学习领域的快速发展&#xff0c;对每个任务进行算法的总结对于之后的发展是有益的。综述可以梳理发展脉络&#xff0c;对比算法好坏&#xff0c;并为以后的研究方向进行启发。本文是在NLP领域中重要的任务-…

KT148A语音芯片常见问题集锦|硬件|软件以及注意事项-长期更新

目录 1.1KT148A是什么&#xff1f; 具备哪些功能&#xff1f; 有什么特色&#xff1f; 1.2KT148A工作电压多少&#xff1f;电流是多少&#xff1f;控制方式是多少&#xff1f;支持多大的喇叭&#xff1f; 1.3KT148A我焊接到PCB板上面之后&#xff0c;为什么没有任何反应呢&a…

基于动态时间规整算法(DTW)的语音识别技术研究-含Matlab代码

⭕⭕ 目 录 ⭕⭕⏩ 一、引言⏩ 二、动态时间规整算法基本原理⏩ 三、语音识别实例分析⏩ 四、参考文献⏩ 五、Matlab代码获取⏩ 一、引言 在语音识别技术的发展过程中&#xff0c;动态时间规整算法&#xff08;Dynamic Time Warping&#xff0c;DTW&#xff09;一直处于重要地…

Mysql

1.约束 2.数据库设计 3.多表查询 4.事物 5.新增/删除/修改语句 6.单表条件查询 7.函数 8.创建数据库/数据表 执行顺序 第一步&#xff1a;from 指定要操作的表 第二步&#xff1a;join 连接表生成一个笛卡尔积 第三步&#xff1a;on 对笛卡尔积进行筛选 第四步&#xff1a…

Pytorch深度学习实战(1)—— 使用LSTM 自动编码器进行时间序列异常检测

&#x1f50e;大家好&#xff0c;我是Sonhhxg_柒&#xff0c;希望你看完之后&#xff0c;能对你有所帮助&#xff0c;不足请指正&#xff01;共同学习交流&#x1f50e; &#x1f4dd;个人主页&#xff0d;Sonhhxg_柒的博客_CSDN博客 &#x1f4c3; &#x1f381;欢迎各位→点赞…

并发编程面试题

并发 为什么要使用并发编程&#xff08;并发编程的优点&#xff09; 并发编程可以提升 CPU 的计算能力的利用率&#xff0c;通过并发编程的形式可以将多核CPU 的计算能力发挥到极致提升程序的性能&#xff0c;如&#xff1a;响应时间、吞吐量、计算机资源使用率等。并发程序可…

Golang 数组基础

数组内部实现和基础功能 了解Go的数据结构&#xff0c;一般会从数组开始&#xff0c;因为数组是切片和映射的基础数据结构。 内部实现 在Go语言中&#xff0c;数组是一个长度固定的数据类型&#xff0c;用于存储一段具有相同的类型的元素连续块。数组的类型是固定统一的&…

Vue框架插槽(第八课)

案例 组件信息的通信 自己思考一下 答案在本文章的后面插槽 v-slot 这个时候我们就可以来定义插槽slot&#xff1a; 插槽的使用过程其实是抽取共性、预留不同&#xff1b;我们会将共同的元素、内容依然在组件内进行封装&#xff1b;同时会将不同的元素使用slot作为占位&#xf…

CTC 技术介绍概述——啃论文系列

CTC 技术介绍概述——啃论文系列 文章目录CTC 技术介绍概述——啃论文系列自我介绍摘要前言知识导图1. 定义2. 诞生背景2.1 频谱紧张例子&#xff0c;wifi的5GHz2.2 通信干扰——CTI2.3 管理困难2.4 异构通信传统实现——网关桥接2.5 CTC——异构直接通信3. 包级CTC3.1 基于RSS…

个人设计web前端大作业 基于html5制作美食菜谱网页设计作业代码

&#x1f380; 精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 &#x1f482; 作者主页: 【主页——&#x1f680;获取更多优质源码】 &#x1f393; web前端期末大作业…

基于PHP+MySQL长途客用汽车票订票系统的设计与实现

随着时代的变迁汽车已经成为了人们日常生活中不可或缺的一部分,虽然很多人已经拥有了私家车,但是很多时候因为离家较远等原因,很多时候人们还是会通过客用汽车来进行一些出行,但是通常情况下客用车票都需要到客用站进行购买,这极其的不便利。 为了能够让用户足不出户就可以进行…

拿稳这24道JVM面试题,要价30k都有底气

1.什么是JVM? JVM 的全称是 「Java Virtual Machine」&#xff0c;也就是我们耳熟能详的 Java 虚拟机。它能识别 .class后缀的文件&#xff0c;并且能够解析它的指令&#xff0c;最终调用操作系统上的函数&#xff0c;完成我们想要的操作。 C开发出来的程序&#xff0c;编译…

SpringBoot SpringBoot 开发实用篇 4 数据层解决方案 4.10 MongoDB 基础操作

SpringBoot 【黑马程序员SpringBoot2全套视频教程&#xff0c;springboot零基础到项目实战&#xff08;spring boot2完整版&#xff09;】 SpringBoot 开发实用篇 文章目录SpringBootSpringBoot 开发实用篇4 数据层解决方案4.10 MongoDB 基础操作4.10.1 MongoDB 基础操作4.10…

(3)paddle---近视眼睛分类的例子

1主要参考 &#xff08;0&#xff09;本教程和以下教程不够详细&#xff0c;还是推荐下面这个大佬的blog看一下 计算机视觉——眼疾图片识别&#xff08;数据集iChallenge-PM&#xff09;_「已注销」的博客-CSDN博客 &#xff08;1&#xff09;blibli视频 252-06_预测病理性…

Vite2 + Vue3 + TypeScript + Pinia 搭建一套企业级的开发脚手架

Vue2 与 Vue3 的区别 Vue3由于完全由TS进行重写&#xff0c;在应用中对类型判断的定义和使用有很强的表现。同一对象的多个键返回值必须通过定义对应的接口&#xff08;interface&#xff09;来进行类型定义。要不然在 ESLint 时都会报错。Vue2 与 Vue3 最大的区别: Vue2 使用…

jquery把页面<table>里的内容导出为后缀名为.xlsx的excel

1、问题描述 之前是用Blob把页面的<table>导出成.xls的Excel文件&#xff1a;Blob把html导出为excel文件_金斗潼关的博客-CSDN博客 不过由于微软的Excel对.xls扩展名的文件支持不是很好&#xff0c;打开会报一个警告 所以用户反馈说是不想弹出这个警告&#xff0c;要求…