-
web前端开发技术纯静态 (12306官网 1页)
⛵ 源码获取 文末联系 ✈
Web前端开发技术
描述 网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 公司官网网站 | 企业官网 | 酒店官网 | 等网站的设计与制 | HTML期末大学生网页设计作业，Web大学生网页-
HTML：结构
-
CSS：样式
在操作方面上运用了html5和css3，
采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识 -
JavaScript：做与用户的交互行为
前端学习路线
（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"> <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> <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>出发地1label> <input type="text" placeholder="简拼/全拼/汉字"> <i>i> div> <div class="from_mu_de from_item"> <label>到达地1label> <input type="text" placeholder="简拼/全拼/汉字"> <i>i> div> <div class="from__time from_item"> <label>出发日期1label> <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">查询1button> div> <div class="search_item_bd" style="display: none;"> <div class="from_chu_fa from_item"> <label>出发地2label> <input type="text" placeholder="简拼/全拼/汉字"> <i>i> div> <div class="from_mu_de from_item"> <label>到达地2label> <input type="text" placeholder="简拼/全拼/汉字"> <i>i> div> -