12306会员页面+轮播图动画

最新推荐文章于 2024-04-26 10:46:22 发布
最新推荐文章于 2024-04-26 10:46:22 发布
阅读量530 收藏 4
点赞数
文章标签： 动画 wpf html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ymx946/article/details/122036564
版权

 

<html>
            <head>
                <meta charset="UTF-8">
                <title>中国铁路12306</title>
                <style type="text/css">
                    *{
                        padding: 0;
                        margin: 0;
                    }
                    li{
                        list-style-type: none;
                    }
                .box
                {
                    width: 1530px;
                    height: 1000px;
                    /* border: 1px red solid; */
                    position: relative;
                }
                    .header>.first
                    {
                    display: inline-block;
                    width:400px ;
                    height: 100px;
                    position: relative;
                    right: -150px;
                    padding-top: 10px;
                    padding-bottom: 10px;
                    }
                    .header
                    {
                        position: relative;
                    }
                .header>input
                {
                    position: absolute;
                    left: 646px;
                    bottom: 50px;
                }    
               .header>img.second
                    {
                        display: inline-block;
                        height: 34px;
                        width: 34px;
                        position: relative;
                        right: -662.1px;
                        top: -45px;
                    }
             #screen>img
                    {
                        display: inline-block;
                        width: 1630px;
                        height: 300px;
                        }
            #tv
            {
                width: 3120px;
                height: 300px;
                position: relative;
                left: -14px;
                /* border: 1px blue solid; */
            }
            #screen {
            width: 3120px;
            height: 300px;
            animation: 3s dfdfd infinite;
            position: relative;
            }
            
            #screen img {
            float: left;
            margin-left: -8px;
            display: inline-block;
            width: 1560px;
            height: 300px;
            }
            
            #tv {
            width: 1540px;
            height: 300px;
            overflow: hidden;
            }
            
            @keyframes dfdfd {
        /*     0%{} */
            25% {
            transform: translateX(0px)
            }
            25.1015% {
            transform: translateX(-930px)
            }
            50% {
            transform: translateX(-90px)
            }
            50.1015% {
            transform: translateX(-1560px)
            }
            75% {
            transform: translateX(-1560px)
            }
            75.1015% {
            transform: translateX(-2190px)
            }
            }    
            .we
            {
                width: 130px;
                height: 300px;
                line-height: 30px;
                position: relative;
                top: -300px;
                right: -120px;
                border: 1px grey solid;
                text-align: center;
                background-color: rgb(95,119,180,0.5);
                
            }
            .we>ul
            {
                display: block;
                height: 30px;
                line-height: 30px;
                /* padding-top: 20px; */
                color: #BCCFE4;
            
            }
            
            .we>ul>img
            {
                display: inline-block;
                width: 30px;
                height: 30px;
                background-color: rgb(95,119,180,0.5);
            }        
            .foot
            {
                display: inline-block;
                height: 260px;
                width: 100%;
                /* border: #0000FF 1px solid; */
                position: absolute;
                top: 470px;
            }
            .car
            {
                width: 300px;
                height:150px ;
                background-color: rgb(245,245,245,0.9);
                vertical-align: middle;
                text-align: center;
                padding-top: 100px;
            }
            .car>span
            {
                position: relative;
                bottom: -22px;
                left: -85px;
            }
            .take
            {
                width: 300px;
                height:150px ;
                background-color: rgb(245,245,245,0.9);
                vertical-align: middle;
                text-align: center;
                padding-top: 100px;
            }
            .take>span
            {
                position: relative;
                bottom: -22px;
                left: -85px;
            }
            .food
            {
                width: 300px;
                height:150px ;
                background-color: rgb(245,245,245,0.9);
                vertical-align: middle;
                text-align: center;
                padding-top: 100px;
                
            }
            .food>span
            {
                position: relative;
                bottom: -22px;
                left: -85px;
            }
            .xin
            {
                width: 300px;
                height:150px ;
                background-color: rgb(245,245,245,0.9);
                vertical-align: middle;
                text-align: center;
                padding-top: 100px;
            }
            .xin>span
            {
                position: relative;
                bottom: -22px;
                left: -85px;
            }
            .foot div
            {
                float: left;
                padding-left: 80px;
                
            }
            .foot div:hover
            {
            animation: changeColor 2s linear both;
            }
            轮播
            @keyframes changeColor {
                0% {
                    background-color:rgb(245,245,245,0.9) ;
                }
            
                50% {
                    background-color: ; white;
                }
            
                100% {
                    background-color:royalblue;
                }
            }
            .last
            {
                width: 1000px;
                height: 220px;
                
            }
            .last>.p
            {
                width:400px ;
                height: 68px;
                /* position: relative;
                top: -12px;
                right: -10px; */
            }
            .last>img
            {
                background-color: aliceblue;
                border: 1px grey solid;
                text-align: center;
                margin-left: 20px;
                margin-top: 10px;
            }
        .last2 img
        {
            display: inline-block;
            width: 120px;
            height: 120px;
        }    
        .last2
        {
            width: 600px;
            height: 230px;
            /* border: 1px blue solid; */
            /* float: right; */
            position: relative;
            right: -860px;
            top: -210px;
            line-height: 50px;
            text-align: center;
            /* text-indent: 1em; */
        }
        h3
        {
            font-size: 15px;
            font-weight: 700;
            text-indent: 1em;
        }    
            
            
            
                    </style>
            </head>
            <body>    
            <div class="box">
                <!-- 第一个div -->
             <div class="header">
                <img class="first" src="css/img/logo@2x.png" >
                <input type="text" placeholder="搜索车票/餐饮/常旅客/相关规章"
                    style="width:420px;height: 34px;float: right;"/>
                <img class="second" src="css/img/搜索.png" />
                
            </div>
                    <!--第二个div区域-->
                    <div style="width: 1530px;height: 40px;background-color: #3B99FC;">
                        <div style="width:1200px;height: 40px;background-color: #3B99FC;;margin-left: 85px;margin: 0px auto;">
                            <div style="width: 12.5%;height:40px;background-color:  #3B99FC;float: left;">
                                <font style="font-family:'微软雅黑';font-size:15px;color: white;position: relative;top:10px;left: 60px;">
                                    首页
                                </font>
                            </div>
                            <div style="width: 12.5%;height:40px;background-color: #3B99FC;float: left;">
                                <font style="font-family:'微软雅黑';font-size:15px;color: white;position: relative;top:10px;left: 50px;">
                                    车票
                                </font>
                                <img src="img/act2.jpg" style="margin-left: 57px;position: relative;top:10px" />
                            </div>
                            <div style="width: 12.5%;height:40px;background-color: #3B99FC;float: left;">
                                <font style="font-family:'微软雅黑';font-size:15px;color: white;position: relative;top:10px;left: 50px;">
                                    团购服务
                                </font>
                                <img src="img/act2.jpg" style="margin-left: 57px;position: relative;top:10px" />
                            </div>
                            <div style="width: 12.5%;height:40px;background-color: #2676E3;float: left;">
                                <font style="font-family:'微软雅黑';font-size:15px;color: white;position: relative;top:10px;left: 50px;">
                                    会员服务
                                </font>
                                <img src="img/act2.jpg" style="margin-left: 57px;position: relative;top:10px" />
                            </div>
                            <div style="width: 12.5%;height:40px;background-color: #3B99FC;float: left;">
                                <font style="font-family:'微软雅黑';font-size:15px;color: white;position: relative;top:10px;left: 50px;">
                                    站车服务
                                </font>
                                <img src="img/act2.jpg" style="margin-left: 57px;position: relative;top:10px" />
                            </div>
                            <div style="width: 12.5%;height:40px;background-color:#3B99FC;float: left;">
                                <font style="font-family:'微软雅黑';font-size:15px;color: white;position: relative;top:10px;left: 50px;">
                                    商旅服务
                                </font>
                                <img src="img/act2.jpg" style="margin-left: 57px;position: relative;top:10px" />
                            </div>
                            <div style="width: 12.5%;background-color:#3B99FC;float: left;">
                                <font style="font-family:'微软雅黑';font-size:15px;color: white;position: relative;top:10px;left: 50px;">
                                    出行指南
                                </font>
                                <img src="img/act2.jpg" style="margin-left: 57px;position: relative;top:10px" />
                            </div>
                            <div style="width: 12.5%;background-color:#3B99FC;float: left;">
                                <font style="font-family:'微软雅黑';font-size:15px;color: white;position: relative;top:10px;left: 50px;">
                                    信息查询
                                </font>
                                <div style="float: right;position: relative;top:-100px;right: 60px;">
                                    <ul style="list-style-type: none;">
                                        <li style="float: left;"><font style="font-family: '微软雅黑';font-size: 10px;color: #3B9DFC;">我的12306</font></li>
                                        <li style="float: left;margin-left: 10px;"><a href="#" style="font-family:'微软雅黑';font-size:10px;color:black;text-decoration: none;">登录</a></li>
                                        <li style="float: left;margin-left: 10px;"><a href="#" style="font-family:'微软雅黑';font-size:10px;color:black;text-decoration: none;">注册</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                            </div>
                            <div id="tv">
                                <div id="screen">    
                                <img src="css/img/b02.jpg" >
                                <img src="css/img/b01.jpg">    
                        </div>
                            </div >    
                            
                                <div class="we">
                                    <ul>
                                        <img src="css/img/皇冠.png"/>
                                        <li>会员管理</li>
                                        <img src="css/img/7.png">
                                        <li>积分账户</li>
                                        <img src="css/img/01.png" />
                                        <li>积分兑换</li>
                                        <img src="css/img/4.png">
                                        <li>会员专享</li>
                                        <img src="css/img/2.png"/>
                                        <li>帮助中心</li>
                                        
                                    </ul>     
                                </div>
                                <div class="foot">
                                    <div class="car">
                                    <img src="css/img/3.png"/>
                                    <span class="1" >车票预定</span>
                                    </div>
                                    <div class="take">
                                    <img src="css/img/12.png" />
                                    <span class="2" >接续换乘</span>
                                    </div>
                                    <div class="food">
                                    <img src="css/img/16.png" />
                                    <span class="3" >餐饮.特产</span>
                                    </div>
                                    <div class="xin">
                                    <img src="css/img/500.png" />
                                    <span class="4" >温馨服务</span>
                                </div>
                                </div>
                            <div class="last">
                            <h3>友情链接</h3>
                                
                                
                                <img class="p" src="css/img/link01.png" />
                                <img src="css/img/link02.png" />
                                <img  src="css/img/link03.png" />
                                <img src="css/img/link04.png" />
                                
                                
                            </div>    
                                <div class="last2">
                                中国铁路官方微信  &nbsp;
                                
                                中国铁路官方微博  &nbsp;&nbsp;
                                
                                12306公众号       &nbsp; &nbsp;
                                
                                铁路12306        &nbsp;
                                
                                <span>       </span>
                                <img src="./css/img/zgtlwx.png" />
                                <img src="css/img/zgtlwb.png" />
                                <img class="zx" src="css/img/public.png" />
                                <img class="as" src="css/img/download.png"/>
                                
                                
                                
                                
                                
                                </div>
                                
                                
                                </div>
                                
                                </div>

效果图如下：

Ymx946
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
基于JS设计12306登录页面
10-20
本文给大家分享一段js代码实现12306登录界面，非常不错，具有参考借鉴价值，需要的朋友参考下
web前端开发技术纯静态 (12306官网 1页)
11-26 431
web大学生个人网站作业模板 采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为（1）html文件：其中index.html是首页、其他html为二级页面； （2）css文件：css全部页面样式,文字滚动, 图片放大等； （3）js文件：js实现动态轮播特效, 表单提交, 点击事件等等（网页中运用到js代码）(1)首页：进入网页中看到的第一个页面(LOGO、公司名称、导航、banner
铁路12306首页项目
weixin_46699636的博客
08-22 349
前端HTML、css学习
仿12306官网（附源码）
m0_72975897的博客
09-18 1856
今天跟大家分享一下这几天写的一个12306的官网，多多指教呀~
第3期：12306页面制作
weixin_53312629的博客
03-04 2409
12306页面制作 第1期： 手把手教你制作网易邮箱注册页面 第2期： 网页动画制作（CSS+JS） 第3期：12306页面制作 文章目录12306页面制作前言一、基础知识二、制作步骤1.建立框架2.丰富内容3.修改样式(CSS)4.添加动态效果(JS)总结 前言 第三期了，也是这个系列的最后一期了，下面就让我们来看一下这次制作12306首页要实现的效果： 首页中的轮播图：要求可以定时自动切换，也可以点击下方小圆点手动切换，轮播图需要原生javascript实现。 返回顶部功能：当页面向下滑动
【HTML5作业】模仿12306网站--前端
coding加油站
08-14 2274
12306网站，模仿12306，html模仿12306，html作业
轮播图(火车轮播图)案例
weixin_48493160的博客
11-27 247
用到了我们之前写好的运动函数animate. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>轮播图</title> <style>
微信小程序-仿智行火车票12306
weixin_43474701的博客
12-21 5858
微信小程序-仿智行火车票12306 微信小程序-仿智行火车票12306，主页有轮播图；有导航栏，有个人中心，可以实现火车票，飞机票，汽车票的选择，适合初学者学习,下面是示例图片 下载链接：https://download.csdn.net/download/weixin_43474701/13746412 ...
python+pyqt实现12306图片验证效果
09-21
主要为大家详细介绍了python+pyqt实现12306图片验证效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
12306抢票+难点分析+注意事项
09-17
12306抢票
模仿12306火车票app(微信小程序源代码)
01-21
大家可以参考学习，微信小程序的开发学习，代码很完美，后续有问题和建议可以发表留言
12306网页制作
03-08
my12306的web，javascript，简单界面和普通模板
12306网页.rp
09-30
Axure12306查票网站模板，自己做的，做了好长时间，给大家分享一下，欢迎各位批评指正。
12306:12306 HTML页面
05-11
12306:12306 HTML页面
首页轮播图
zl13015214442的博客
02-26 1437
1. 创建分支 打开码云官网，创建一个git分支，在分支上进行git功能的开发，然后合并到主分支mask上。 点击“一个分支”： 新建分支，在这个分支中写首页轮播图的功能： 这样我们在线上就新建好了一个轮播图的分支，接下来通过指令git pull将线上的分支拉到本地来： 切换到该分支，指令git checkout index-swiper： 查看状态，指令git status： 最后C...
分享一个可交互的小场景（二）
一起学习一起进步~
06-25 5480
再看代码： JS部分。
WPF2022终结版系列课程笔记 1 WPF 基本布局
weixin_43847546的博客
04-22 772
本笔记为B站微软系列技术教程 WPF项目实战合集(2022终结版) 项目记录。
WPF之Label
qq_3517289697的博客
04-25 245
Label在wpf中表示控件的文本标签，并提供访问密钥支持。
WPF 资源基础
最新发布
weixin_43847546的博客
04-26 277
Update 按钮 动态绑定的Button2边框变为黑色，Button1 未改变。需要控件，随着软件资源变化去改变的话，就使用DynamicResource 动态绑定。此时新建一个窗口，也同样能以相同的方式，使用资源字典里面的样式。提供一个可以供所有窗口使用的，资源样式 -----资源字典。此时，界面上能够成功引用资源文件里面的样式。在代码中，可以查找、设置 我们添加的资源。将资源字典的内容，添加到应用程序中。首先在项目中，添加一个资源字典。此时添加一些Button的样式。在App.xaml中添加。
12306抢票用例图
12-25
12306抢票的用例图如下所示： ``` @startuml left to right direction skinparam packageStyle rectangle actor 用户 as user actor 12306系统 as system rectangle "用户界面" { user --> (登录) user --> (查询车票) user --> (选择车次) user --> (选择座位) user --> (提交订单) user --> (支付订单) user --> (确认订单) } rectangle "12306系统" { (登录) --> (验证用户信息) (查询车票) --> (查询车次信息) (选择车次) --> (检查座位是否可用) (选择座位) --> (锁定座位) (提交订单) --> (生成订单) (支付订单) --> (扣款) (确认订单) --> (发送确认信息) } @enduml ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Ymx946

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值