<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>12306网站项目</title>
<link rel="stylesheet" href="css/One.css">
</head>
<body>
<!-- https://ext.dcloud.net.cn/search?q=%E4%B8%BB%E9%A2%98 -->
<!-- 第一部分头部内容 -->
<!-- 第一模块 为头部 -->
<div id="one" >
<div id="one1">
<p align="center"><img src="img/logo@2x.png" alt="" id="img1"></p>
</div>
<div id="one2">
<div align="center"><input type="text" placeholder="请输入车票餐饮制度" /></div>
<div><img class="input_img" src="img/search.jpg"/></div>
<!-- <img src="img/search.jpg" style="height: 40px;"/> -->
</div>
<div id="one3">
<span>English</span>
<span>|</span>
<span>我的12306</span>
<span>|</span>
<span style="color: black;">登录 注册</span>
</div>
</div>
<!-- 第二模块 导航栏 -->
<!-- 第二模块 -->
<div class="header_tab">
<div id="navs" class="sticky">
<!-- 导航栏 -->
<nav class="sticky">
<a href="首页" class="fist">首页 ∨</a>
<a href="车票">车票 ∨</a>
<a href="团购服务">团购服务 ∨</a>
<a href="会员服务">会员服务 ∨</a>
<a href="站车服务">站车服务 ∨</a>
<a href="高铁服务">高铁服务 ∨</a>
<a href="出行指南">出行指南 ∨</a>
<a href="信息查询">信息查询 ∨</a>
</nav>
</div>
</div>
<!-- 第三模块 动画模块 -->
<div class="three">
<div class="pics">
<img src="img/banner20200707.jpg" alt="" class="pic1">
<img src="img/banner12.jpg" alt="" class="pic3">
</div>
</div>
<!-- 第四模块 精灵图 CSS部分 -->
<style>
#one-nav {
width: 200px;
height: 80px;
background: url(img/service@2x.png)64px -79px;
background-repeat: no-repeat;
}
#two-nav {
width: 200px;
height: 80px;
background: url(img/service@2x.png)64px -392px;
background-repeat: no-repeat;
}
#three-nav {
width: 200px;
height: 87px;
background: url(img/service@2x.png)64px -234px;
background-repeat: no-repeat;
}
#four-nav {
width: 200px;
height: 85px;
background: url(img/service@2x.png)64px -312px;
background-repeat: no-repeat;
}
#five-nav {
width: 200px;
height: 85px;
background: url(img/service@2x.png)64px -151px;
background-repeat: no-repeat;
}
#six-nav {
width: 200px;
height: 85px;
background: url(img/service@2x.png)64px -476px;
background-repeat: no-repeat;
}
#serven-nav {
width: 200px;
height: 85px;
background: url(img/service@2x.png)64px 20px;
background-repeat: no-repeat;
}
/* 父 */
#father-nav {
width: 80%;
height: 120px;
float: left;
display: flex;
justify-content: space-around;
margin-left: 11%;
}
/* 子 */
.opuy-nav {
width: 200px;
/* background-color: pink; */
}
.lopu-nav {
font-weight: 900;
font-size: 18px;
text-align: center;
position: relative;
top: 99px;
}
.imgtab-nav{
width: 100%;
height: 140px;
}
</style>
<!-- 第四模块 精灵图 Html部分 -->
<div id="father-nav">
<div class="opuy-nav">
<div id="one-nav">
<p class="lopu-nav">重点旅游预约</p>
</div>
<!-- <p class="lopu">重点旅游预约</p> -->
</div>
<div class="opuy-nav">
<div id="two-nav">
<p class="lopu-nav" id="b">遗失物品查找</p>
</div>
<!-- <p class="lopu">遗失物品查找</p> -->
</div>
<div class="opuy-nav">
<div id="three-nav">
<p class="lopu-nav" id="c">开始约车服务</p>
</div>
<!-- <p class="lopu">开始约车服务</p> -->
</div>
<div class="opuy-nav">
<div id="four-nav">
<p class="lopu-nav" id="d">开始便民拖运</p>
</div>
<!-- <p class="lopu">开始便民拖运</p> -->
</div>
<div class="opuy-nav">
<div id="five-nav">
<p class="lopu-nav" id="e">进行车站引导</p>
</div>
<!-- <p class="lopu">进行车站引导</p> -->
</div>
<div class="opuy-nav">
<div id="six-nav">
<p class="lopu-nav" id="f">战车等待时间</p>
</div>
<!-- <p class="lopu">战车等待时间</p> -->
</div>
<div class="opuy-nav">
<div id="serven-nav">
<p class="lopu-nav" id="g">开始用户反馈</p>
</div>
<!-- <p class="lopu">开始用户反馈</p> -->
</div>
</div>
<!-- 第五部分 -->
<style>
#father1 {
height: 100%;
width: 80%;
display: flex;
justify-content: space-around;
/* border: 1px solid red; */
flex-wrap: wrap;
margin-left: 10%;
margin-top: 10%;
}
.sone {
height: 120px;
width: 180px;
/* border: 2px solid red; */
/* background-color: antiquewhite; */
/* background-image: url("img/service04.jpg"); */
background-repeat: no-repeat;
background-size: 220px;
position: relative;
padding: 10px;
}
.pp {
position: absolute;
font-weight: 900;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
top: 150px;
left: 0px;
}
.span_pp {
position: absolute;
font-size: 30px;
font-weight: 900;
color: orange;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
top: 220px;
left: 0px;
}
</style>
<!-- 第五部分div模块 -->
<div id="father1">
<div class="sone">
<img src="img/service01.jpg" style="height: 120px;
width: 180px;"/>
<p class="pp">"环西部火车站 "高品质旅游版专程车</p>
<span class="span_pp">￥2560</span>
</div>
<div class="sone">
<img src="img/service02.jpg" style="height: 120px;
width: 180px;"/>
<p class="pp">"环西部火车站 "高品质旅游版专程车</p>
<span class="span_pp">￥2560</span>
</div>
<div class="sone">
<img src="img/service03.jpg" style="height: 120px;
width: 180px;"/>
<p class="pp">"环西部火车站 "高品质旅游版专程车</p>
<span class="span_pp">￥2560</span>
</div>
<div class="sone">
<img src="img/service04.jpg" style="height: 120px;
width: 180px;"/>
<p class="pp">"环西部火车站 "高品质旅游版专程车</p>
<span class="span_pp">￥2560</span>
</div>
<div class="sone">
<img src="img/service04.jpg" style="height: 120px;
width: 180px;"/>
<p class="pp">"环西部火车站 "高品质旅游版专程车</p>
<span class="span_pp">￥2560</span>
</div>
<div class="sone">
<img src="img/service04.jpg" style="height: 120px;
width: 180px;"/>
<p class="pp">"环西部火车站 "高品质旅游版专程车</p>
<span class="span_pp">￥2560</span>
</div>
<div class="sone">
<img src="img/service04.jpg" style="height: 120px;
width: 180px;"/>
<p class="pp">"环西部火车站 "高品质旅游版专程车</p>
<span class="span_pp">￥2560</span>
</div>
</div>
<!-- 第六部分代码复制第五部分的内容 -->
<style>
#father2 {
height: 100%;
width: 80%;
display: flex;
justify-content: space-around;
/* border: 1px solid red; */
flex-wrap: wrap;
margin-left: 10%;
margin-top: 10%;
}
.sone1 {
height: 120px;
width: 180px;
/* border: 2px solid red; */
/* background-color: antiquewhite; */
/* background-image: url("img/service04.jpg"); */
background-repeat: no-repeat;
background-size: 220px;
position: relative;
padding: 10px;
}
.ppp {
position: absolute;
font-weight: 900;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
top: 150px;
left: 0px;
}
.span_ppp {
position: absolute;
font-size: 30px;
font-weight: 900;
color: rgb(69, 156, 255);
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
top: 22
静态项目首页定制12306.zip
需积分: 5 87 浏览量
2024-01-25
10:29:11
上传
评论
收藏 3MB ZIP 举报
静态项目首页定制12306.zip （71个子文件） 
静态项目首页定制12306 
最后一个模块.html 2KB 第五模块.html 2KB 第二模块.html 2KB .vscode 
settings.json 118B launch.json 483B One.html 15KB four.html 9KB 第一模块.html 2KB 1.html 2KB img 
banner26.jpg 69KB abanner02.jpg 81KB
color1.png 2KB enlarge1.png 2KB banner20200707.jpg 108KB sound_normal(2).png 2KB train@2x.png 2KB small1.png 2KB footer-slh.jpg 5KB download.png 36KB check@2x.png 3KB link02.png 17KB service04.jpg 66KB bj_black.png 1KB link03.png 19KB zgtlwb.png 29KB
loading.gif 4KB cursor1.png 1KB vol_normal.png 2KB bg-train@2x.png 11KB abanner05.jpg 27KB exit1.png 1KB banner10.jpg 217KB close_show_citys2.png 1KB logo@2x.png 14KB service02.jpg 48KB screen1.png 1KB help1.png 1KB favicon.ico 25KB toOriginal.png 1KB search.jpg 1KB banner12.jpg 163KB service03.jpg 43KB loading3.gif 9KB reflash1.png 2KB banner0619.jpg 884KB img_new.png 3KB sound_normal.png 2KB left_img5.png 1KB service@2x.png 14KB left_img2.png 2KB top_pic.png 9KB abanner06.jpg 385KB line01@2x.png 2KB service01.jpg 54KB zgtlwx.png 156KB banner20201223.jpg 399KB abanner01.jpg 79KB link05.png 9KB link04.png 16KB loading4.gif 37KB point2.png 3KB gongan.png 4KB public.png 31KB reflash2.png 1KB css One.css 3KB index.css 1KB 第三部分.html 2KB n.html 845B 第六模块.html 2KB 第四模块.html 3KB test.html 4KB资源评论
人生的方向随自己而走
- 粉丝: 2644
- 资源: 329
最新资源
- 基于可再生能源的微电网电源管理系统
- 1714641049369119_download.jsp
- a股上市公司2007年至2020年的员工构成数据
- 【打击高价帖】低价出2000-2019各国签订的RTA区域贸易协定数量（双边）
- IMG_20240502_102008.jpg
- A股上市企业超额管理费用数据集-含参考文献、原始数据、结果数据（2003-2022年） .txt
- qtcreator11.0.3.输入中文.so
- Unity3D版本游戏源码2-91极道杀戮最新支持webgFullGameKitHammer2
- HTML5+CSS+JS精品网页模板 大学生期末大作业 Web前端网页制作
- 基于Flask的Python全国招聘岗位就业可视化系统源码+项目说明.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
