12306静态网站

最新推荐文章于 2024-10-08 12:21:22 发布
最新推荐文章于 2024-10-08 12:21:22 发布
阅读量137 收藏
点赞数
文章标签： 前端 css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61707987/article/details/127252595
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="12306.css">
	</head>
	<body>
		<div class="content">
			<div class="one">
				<div class="on1">
				</div>
				<div class="on2">
					<input placeholder="搜索车票、餐饮、常旅客、相关规章">
					<p></p>
				</div>
				<div class="on3">
					<p>Englist&nbsp;&nbsp;|&nbsp;&nbsp;我的12306&nbsp;&nbsp;|&nbsp;&nbsp;<span>登录&nbsp;&nbsp;注册</span></p>
				</div>
			</div>
			<div class="two">
				<div class="two1">
				<div>首页</div>
				<div>车票<span>^</span></div>
				<div>团购服务<span>^</span></div>
				<div>会员服务<span>^</span></div>
				<div>站车服务<span>^</span></div>
				<div>商旅服务<span>^</span></div>
				<div>出行指南<span>^</span></div>
				<div>信息查询<span>^</span></div>	
				</div>
			</div>
			<div class="three">
			</div>
			<div class="four">
				<ul class="four1">
					<li></li>
					<li>重点旅客预约</li>
				</ul>
				<ul class="four2">
					<li></li>
					<li>遗失物品查找</li>
				</ul>
				<ul class="four3">
					<li></li>
					<li>约车服务</li>
				</ul>
				<ul class="four4">
					<li></li>
					<li>便民托运</li>
				</ul>
				<ul class="four5">
					<li></li>
					<li>车站引导</li>
				</ul>
				<ul class="four6">
					<li></li>
					<li>站车风采</li>
				</ul>
				<ul class="four7">
					<li></li>
					<li>用户反馈</li>
				</ul>
			</div>
			<div class="five">
					<img src="img/abanner01.jpg"/>
					<img src="img/abanner02.jpg"/>
					<img src="img/abanner05.jpg"/>
					<img src="img/abanner06.jpg"/>
			</div>
			<div class="six">
				<p>铁路旅游</p>
				<p>更多></p>
			</div>
			<hr>
			<div class="seven">
				<ul class="seven1">
					<li></li>
					<li>"环西部火车",高品质旅游版专线列车<br>
						<span>￥2560</span>
					</li>
				</ul>
				<ul class="seven1">
					<li></li>
					<li>"环西部火车",高品质旅游版专线列车<br>
						<span>￥2560</span>
					</li>
				</ul>
				<ul class="seven1">
					<li></li>
					<li>"环西部火车",高品质旅游版专线列车<br>
						<span>￥2560</span>
					</li>
				</ul>
				<ul class="seven1">
					<li></li>
					<li>"环西部火车",高品质旅游版专线列车<br>
						<span>￥2560</span>
					</li>
				</ul>
				<ul class="seven1">
					<li></li>
					<li>"环西部火车",高品质旅游版专线列车<br>
						<span>￥2560</span>
					</li>
				</ul>
				<ul class="seven1">
					<li></li>
					<li>"环西部火车",高品质旅游版专线列车<br>
						<span>￥2560</span>
					</li>
				</ul>
				<ul class="seven1">
					<li></li>
					<li>"环西部火车",高品质旅游版专线列车<br>
						<span>￥2560</span>
					</li>
				</ul>
				<ul class="seven1">
					<li></li>
					<li>"环西部火车",高品质旅游版专线列车<br>
						<span>￥2560</span>
					</li>
				</ul>
			</div>
			<div class="eight">
				<div class="eight1">
						<p>最新发布</p>
						<p>常见问题</p>
						<p>信用信息</p>
				</div>
				<div class="eight2">
					<ul>
						<li>公告</li>
						<li>公告</li>
						<li>公告</li>
						<li>公告</li>
						<li>公告</li>
						<li>公告</li>
					</ul>
					<ul>
						
						<li>2022-9-24 &nbsp; &nbsp; &nbsp;<span>•</span>&nbsp;公告</li>
						<li>2022-9-24 &nbsp; &nbsp; &nbsp;<span>•</span>&nbsp;公告</li>
						<li>2022-9-24 &nbsp; &nbsp; &nbsp;<span>•</span>&nbsp;公告</li>
						<li>2022-9-24 &nbsp; &nbsp; &nbsp;<span>•</span>&nbsp;公告</li>
						<li>2022-9-24 &nbsp; &nbsp; &nbsp;<span>•</span>&nbsp;公告</li>
						<li>2022-9-24 &nbsp; &nbsp; &nbsp;<span>•</span>&nbsp;公告</li>
					</ul>
					<ul>
						<li>2022-9-24</li>
						<li>2022-9-24</li>
						<li>2022-9-24</li>
						<li>2022-9-24</li>
						<li>2022-9-24</li>
						<li>2022-9-24</li>
					</ul>
				</div>
			</div>
		</div>
	</body>
</html>

body{
	margin: 0;
	padding: 0;
}
.content{
	
}
.one{
	margin: 0 auto;
	width: 80%;
	height: 60px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.on1{
	width: 200px;
	height: 40px;
	background: url(img/logo@2x.png) no-repeat;
	background-size: 80%;
}
.on2{
	display: flex;
	justify-content:inherit;
	align-items: center;
}
.on2 input{
	width: 300px;
	height: 20px;
}
.on2 p{
	border: 1px solid green;
	width: 26px;
	height: 26px;
	background: url(img/search.jpg) -5px -5px;
}
.on3{
	font-size: 12px;
	color: blue;
}
.on3 span{
	color: #000000;
}
.two{
	width: 100%;
	height: 30px;
	background-color: skyblue;
}
.two1{
	width: 80%;
	height: 30px;
	margin: 0 auto;
	display: flex;
	justify-content:space-between;
	align-items: center;
}
.two1 div:nth-child(1){
	width: 10%;
	height: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color:royalblue;
}
.two1 span{
	margin: 13px 6px;
}
.two1 span:hover{
	display: block;
	transform: rotateZ(180deg);
	margin: -12px 0 0 -8px;
}
.three{
	width: 100%;
	height: 300px;
	background: url(img/banner12.jpg) no-repeat;
	background-size: 100%;
	margin: 0 auto;
}
.four{
	width: 80%;
	margin: 0 auto;
	text-align: center;
	display: flex;
	justify-content:space-between;
}
.four li{
	list-style: none;
}
.four1{
	width: 10%;
	margin: 10px 0;
}
.four1 li:nth-child(1){
	width: 100%;
	height: 80px;
	margin-bottom: 10px;
	background: url(img/service@2X.png) no-repeat 0 -67px;
	background-size: 70%;
}
.four2{
	width: 10%;
	margin: 10px 0;
}
.four2 li:nth-child(1){
	width: 100%;
	margin-bottom: 10px;
	background: url(img/service@2X.png) no-repeat 10px -370px;
	background-size: 70%;
	height: 80px;
}
.four3{
	width: 10%;
	margin: 10px 0;
}
.four3 li:nth-child(1){
	width: 100%;
	margin-bottom: 10px;
	background: url(img/service@2X.png) no-repeat 15px -220px;
	background-size: 70%;
	height: 80px;
}
.four4{
	width: 10%;
	margin: 10px 0;
}
.four4 li:nth-child(1){
	width: 100%;
	margin-bottom: 10px;
	background: url(img/service@2X.png) no-repeat 18px -295px;
	background-size: 70%;
	height: 80px;
}
.four5{
	width: 10%;
	margin: 10px 0;
}
.four5 li:nth-child(1){
	width: 100%;
	height: 80px;
	margin-bottom: 10px;
	background: url(img/service@2X.png) no-repeat 20px -143px;
	background-size: 70%;
}
.four6{
	width: 10%;
	margin: 10px 0;
}
.four6 li:nth-child(1){
	width: 100%;
	height: 80px;
	margin-bottom: 10px;
	background: url(img/service@2X.png) no-repeat 20px -450px;
	background-size: 70%;
}
.four7{
	width: 10%;
	margin: 10px 0;
}
.four7 li:nth-child(1){
	width: 100%;
	height: 80px;
	margin-bottom: 10px;
	background: url(img/service@2X.png) no-repeat 20px -520px;
	background-size: 70%;
}
.five{
	width: 80%;
	margin: 0 auto;
	display: flex;
	justify-content:space-between;
	align-items: center;
	flex-wrap: wrap;
}
.five img{
	width: 49%;
	height: 160px;
	margin: 10px 0;
}
.six{
	width: 80%;
	height: 40px;
	margin: 5px auto;
	display: flex;
	justify-content: space-between;
}
.six p:nth-child(1){
	color: skyblue;
	margin-bottom: -6px;
	border-bottom: 2px solid blue;
}
.six p:nth-child(2){
	color: #ccc;
}
hr{
	width: 80%;
	margin: 5px auto;
	border: 1px solid #ccc;
}
.seven{
	width: 80%;
	margin: 0 auto;
	font-size: 12px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.seven1{
	width: 24%;
	height: 150px;
	padding: 0;
	list-style: none;
}
.seven1 li:nth-child(1){
	width: 100%;
	height: 110px;
	/* border: 1px solid green; */
	background: url(img/service04.jpg)no-repeat;
	background-size: 100%;
}
.seven1 li:nth-child(2){
	border: 1px solid #ccc;
}
.seven1 span{
	color: orange;
	font-size: 15px;
}
.eight{
	width: 80%;
	margin: 0 auto;
}
.eight1{
	display: flex;
	justify-content:space-between;
	align-items: center;
}
.eight1 p{
	width: 30%;
	height: 25px;
	margin: 0;
	text-align: center;
	background-color: #ccc;
}
.eight1 p:nth-child(1){
	background-color: skyblue;
}
.eight2{
	width: 100%;
	height: 200px;
	margin: 0 auto 10px;
	border: 1px solid #ccc;
	text-align: center;
	display: flex;
	justify-content: space-around;
}
.eight2 li::marker{
	color: skyblue;
	height: 25px;
}
.eight2 li{
	height: 30px;
}
.eight2 ul:nth-child(2){
	list-style: none;
}
.eight2 ul:nth-child(3){
	list-style: none;
}
.eight2 span{
	color: skyblue;
	font-size: 20px;
}

五赶
关注
web前端开发技术纯静态 (12306官网 1页)
11-26 537
web大学生个人网站作业模板 采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为（1）html文件：其中index.html是首页、其他html为二级页面； （2）css文件：css全部页面样式,文字滚动, 图片放大等； （3）js文件：js实现动态轮播特效, 表单提交, 点击事件等等（网页中运用到js代码）(1)首页：进入网页中看到的第一个页面(LOGO、公司名称、导航、banner
模拟中国铁路12306网页
Al_tair的博客
04-21 1837
模拟中国铁路12306网页页面展示导航栏服务栏提示栏介绍栏浮动设计旅游栏整合代码css文件图片集合html文件 大家好呀！我是小笙，本期内容是关于用html和css简单做一个网页，练习为主 技术：HTML + CSS 页面展示 导航栏 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>锐刃集团</title> <style>
12306网页制作
03-08
my12306的web，javascript，简单界面和普通模板
12306静态页面HTML制作
m0_63159471的博客
11-26 1478
css模块 #head{ width: 100%; height: 50px; } #head-logo{ width: 450px; text-align: right; } #head #search-input { width: 420px; height: 30px; border: 1px solid grey; padding: 0; } #head #search-img{ wid.
12306网站架构设想
lsz137105的专栏
02-25 4917
我的公众号「码农之屋」(id: Spider1818)，分享的内容包括但不限于 Linux、网络、云计算虚拟化、容器Docker、OpenStack、Kubernetes、SDN、OVS、DPDK、Go、Python、C/C++编程技术等内容，欢迎大家关注。 1.背景介绍 2012年春节，铁道部推出12306网站，进行网络实名购票。每一个返乡人原以为不用再忍冻排队，就能买着一张回家的火车...
【PE32】12306_aux静态逆向分析
工作学习笔记
10-16 713
类CTF逆向静态分析技术
12306:12306 HTML页面
05-11
12306是中国铁路客户服务中心的官方网站，其HTML页面是构成网站的基础元素，用于展示车票查询、预订、支付等服务的用户界面。在这个"12306:12306 HTML页面"的资源中，我们可以深入研究12306网站的前端设计和实现方式...
基于C#实现12306的动态验证码变成静态验证码的方法
09-03
主要介绍了基于C#实现12306的动态验证码变成静态验证码的方法的相关资料,需要的朋友可以参考下
静态项目首页定制12306.zip
01-25
在过去的一段时间里，我投入了大量的时间和精力进行学习，积累了丰富的个人学习资源。这些资源不仅包括各类书籍、课程和在线教程，还包括我在学习过程中的笔记、心得和反思。 首先，我发现阅读是一种非常有效的学习...
基于JS设计12306登录页面
10-20
12306登录页面是铁路官方网站用于用户认证和购票的界面，本文通过JavaScript编程语言来设计这样一个登录页面。文中提到的代码段实现了一个基本的登录表单，包括用户名、密码和验证码的输入，以及一个验证函数来检验...
前端的全栈混合之路Meteor篇：3.0新版本介绍
分享有趣的、贴近生活的CS知识
10-01 1166
Meteor全栈框架3.0版本终于稳定下来了，它的效果约等于webpack+vue+express+socket.io+mongodb+npm+uniapp，学一个搞定全套，值得学习了解下，最后找到适合于自己的技术栈。
Javascript数组研究03_手写实现_fill_filter_find_findIndex_findLast_findLastIndex
qq_33546823的博客
10-03 1269
fill()方法用一个固定值填充一个数组中从起始索引（默认为 0）到终止索引（默认为）内的全部元素。它返回修改后的数组。输入参数value：用来填充数组元素的值。start（可选）：开始填充的位置，默认值为 0，索引处理方法和copyWithin一致。end（可选）：停止填充的位置（不包含该位置），默认值为，索引处理方法和copyWithin方法一致。输出：修改后的原数组。注意事项该方法会改变原数组，是修改方法。对于稀疏数组，空槽也会被value填充。是通用的方法在空数组上不会有任何处理。
快餐食品检测系统源码分享[一条龙教学YOLOV8标注好的数据集一键训练_70+全套改进创新点发刊_Web前端展示]
最新发布
m0_73388125的博客
10-08 1204
数据集信息展示在本研究中，我们使用了名为“burger detection”的数据集，以改进YOLOv8在快餐食品检测系统中的表现。该数据集专门针对快餐食品的多样性进行设计，涵盖了六个主要类别，分别是：bbq、bread、bun、hotdog、pattty和patty。这些类别的选择不仅反映了快餐食品的常见种类，还考虑到了它们在实际应用中的重要性，尤其是在餐饮行业的食品识别和分类任务中。数据集的构建过程经过精心设计，确保每个类别的样本数量和质量都能满足深度学习模型训练的需求。
Vue--Table的Column格式化方案
m0_69435612的博客
10-04 201
原日期格式：2024-09-07T08:32:41.000+00:00。格式化成YYYY-MM-DD。让数字显示小数点后几位。
《ASP.NET Web Forms 实现短视频点赞功能的完整示例》
Envyᥫᩣ的博客
10-05 1783
Play.aspx前端页面使用ASP.NET Web Forms和jQuery，后端使用C#和AJAX进行数据交互。希望本文对你有所帮助，如果有任何问题或建议，欢迎留言交流！
vue框架和uniapp框架区别
ning的博客
10-02 1278
Vue.js 是一个构建用户界面的渐进式框架，非常适合用来创建单页应用（SPA）。它的核心库只关注视图层，易于学习和集成，同时拥有丰富的生态系统，包括路由管理、状态管理和各种插件。Uni-app 是一个使用 Vue.js 开发所有前端应用的框架，支持编译到多个平台，包括iOS、Android、Web、以及各种小程序等。Uni-app 旨在“一套代码，多端运行”，极大地提高了开发效率。Vue.js 和 Uni-app 都是强大的前端框架，但它们的重点和应用场景有所不同。
12306项目：前后端分离与微服务实践
3. **性能优化**：前端可以缓存静态资源，减少服务器负载，后端则专注于高效的数据处理。 4. **跨平台支持**：适应多种设备和平台，提供良好的用户体验。 然而，前后端分离也有其缺点，包括跨域安全问题、部署...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值