17讲项目实战签证页面

最新推荐文章于 2024-06-15 12:12:02 发布
最新推荐文章于 2024-06-15 12:12:02 发布
阅读量584 收藏
点赞数
分类专栏： web前端
#17讲项目实战签证页面
效果步骤
 1、按扭样式的改变
2、找到 ul li 点击事件 ，做判断如果序列号是 1向上  2向左  3向下  0向左 ;
 a、把点击按扭对应的前一张图片调到最上，移走(z-index:3)
 b、把点击按扭对应的这一张图片调在前一张图片的下面(z-index:2)
3、图片全移走了，是空白的，所以要处理
 当移动的动画完成后，
 把移走的图片还原在最低层 (top,left,right,bottom 还原成0  z-index:0)
4、如果不按顺序来点就会出错
 我们要获取到他前面所点击的对应的那个序列号
5、如果前序列号和现在点击的序列号相等，就不执行
6、获取随机事件函数，来达到随机方向上的改变
7、代码的简化，把css样式放入数组来进行赋值
 <!doctype html>
<html lang="zh-cn">
<head>
<meta charset="gb2312">
<meta name="author" content="李明杰">
<meta name="keywords" content="湖南海外旅游有限公司 湖南长沙最好旅行社 湖南海外旅行社 长沙旅行社排名">
<meta name="description" content="湖南海外旅行社是湖南首批五星级旅行社，连续三年评为全国百强旅行社，国家特许经营出境 游组团社，长沙从事旅游业务最早、综合实力最强的旅游公司，主营出境旅游、国内旅游、入 境旅游、会议展览。">
<title>湖南海外旅游</title>
  <meta name="Keywords" content="关键词,关键词">
  <meta name="description" content=""> 
  <!--css , js-->
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" type="text/css" href="css/public.css">
 </head>
<body class="webBody">
<!--网站头部开始-->
<div id="Top">
 <!--头部信息开始-->
 <div class="head"><img src="images/cart.png" align='absmiddle'/>&nbsp;全省免费服务热线：
   <span>96556</span> <span>0731-84635555</span>旅行社同行热线：<span>0731-84402588</span> <a href="#">登陆</a> <a href="#">注册</a>
 </div>
 <!--头部信息结束-->
 <!--banner开始-->
 <div id="header">
  <div class="banner"><a href=""><img src="images/logo.png" /></a></div>
  <div class="logo">
   <a href="">首页</a>
   <a href="">出境游</a>
   <a href="">国内游</a>
   <a href="">特价游</a>
   <a href="">签 证</a>
  </div>
  <!--搜索开始-->
  <div class="search">
   <form>
    <input type="text" class='txt' value="输入目的地"/>
    <input type="submit" class='but' value=""/>
   </form>
  </div>
  <!--搜索结束-->
 </div>
 <!--banner结束-->
 <!--导航开始-->
 <div class="Nav">
  <div class="mainNav">
   <ul>
    <li><a href="#">出境跟团游</a>
     <div class="menu">
      <p><span>台湾港澳:</span> <a href="#">台湾</a> | <a href="#">香港</a> | <a href="#">澳门</a></p>
      <p><span>东南亚:</span> <a href="#">泰国</a> | <a href="#">新加坡</a> | <a href="#">马来西亚</a> | <a href="#">越南</a> | <a href="#">柬埔寨</a> | <a href="#">老挝</a> | <a href="#">印度</a> | <a href="#">尼泊尔</a></p>
      <p><span>台湾港澳:</span> <a href="#">台湾</a> | <a href="#">香港</a> | <a href="#">澳门</a></p>
      <p><span>东南亚:</span> <a href="#">泰国</a> | <a href="#">新加坡</a> | <a href="#">马来西亚</a> | <a href="#">越南</a> | <a href="#">柬埔寨</a> | <a href="#">老挝</a> | <a href="#">印度</a> | <a href="#">尼泊尔</a></p>
     </div>
    </li>
    <li><a href="#">出境自由行</a>
     <div class="menu"></div>
    </li>
    <li><a href="#">国内跟团游</a>
     <div class="menu"></div>
    </li>
    <li><a href="#">国内自由行</a>
     <div class="menu"></div>
    </li>
    <li><a href="#">湖南周边游</a>
     <div class="menu"></div>
    </li>
   </ul>
  </div>
  <div class="smallNav"><a href="#">泰国</a> <a href="#">台湾</a> <a href="#">普吉</a></div>
 </div>
 <!--导航结束-->
</div> 
<!--网站头部结束--> 
<!--内页主体内容开始-->
<!--面包屑导航开始-->
<div class="webLogo">您现在所在的位置：<a href="">首页</a> >> <a href="">出境跟团游</a></div>
<!--面包屑导航结束-->
<div id="WebCon">
 <div class="web_Qz">
  <dl>
   <dt><img src="images/qz1.jpg" width="170" /></dt>
   <dd class="title">泰国签证</dd>
   <dd><span>优 惠 价：<font>￥350</font></span><span>签证有效期：<font>3个月</font></span></dd>
   <dd><span>入境次数：<font>1次</font></span><span>最长停留时间：<font>30天</font></span></dd>
   <dd><span>办理时长：<font>5-6个工作日</font></span><span>面试：<font>不需要</font></span></dd>
  </dl>
  <dl>
   <dt><img src="images/qz2.jpg" width="170" /></dt>
   <dd class="title">泰国签证</dd>
   <dd><span>优 惠 价：<font>￥350</font></span><span>签证有效期：<font>3个月</font></span></dd>
   <dd><span>入境次数：<font>1次</font></span><span>最长停留时间：<font>30天</font></span></dd>
   <dd><span>办理时长：<font>5-6个工作日</font></span><span>面试：<font>不需要</font></span></dd>
  </dl>

  <dl>
   <dt><img src="images/qz3.jpg" width="170" /></dt>
   <dd class="title">泰国签证</dd>
   <dd><span>优 惠 价：<font>￥350</font></span><span>签证有效期：<font>3个月</font></span></dd>
   <dd><span>入境次数：<font>1次</font></span><span>最长停留时间：<font>30天</font></span></dd>
   <dd><span>办理时长：<font>5-6个工作日</font></span><span>面试：<font>不需要</font></span></dd>
  </dl>
  <dl>
   <dt><img src="images/qz4.jpg" width="170" /></dt>
   <dd class="title">泰国签证</dd>
   <dd><span>优 惠 价：<font>￥350</font></span><span>签证有效期：<font>3个月</font></span></dd>
   <dd><span>入境次数：<font>1次</font></span><span>最长停留时间：<font>30天</font></span></dd>
   <dd><span>办理时长：<font>5-6个工作日</font></span><span>面试：<font>不需要</font></span></dd>
  </dl>
  <dl>
   <dt><img src="images/qz5.jpg" width="170" /></dt>
   <dd class="title">泰国签证</dd>
   <dd><span>优 惠 价：<font>￥350</font></span><span>签证有效期：<font>3个月</font></span></dd>
   <dd><span>入境次数：<font>1次</font></span><span>最长停留时间：<font>30天</font></span></dd>
   <dd><span>办理时长：<font>5-6个工作日</font></span><span>面试：<font>不需要</font></span></dd>
  </dl>
  <dl>
   <dt><img src="images/qz6.jpg" width="170" /></dt>
   <dd class="title">泰国签证</dd>
   <dd><span>优 惠 价：<font>￥350</font></span><span>签证有效期：<font>3个月</font></span></dd>
   <dd><span>入境次数：<font>1次</font></span><span>最长停留时间：<font>30天</font></span></dd>
   <dd><span>办理时长：<font>5-6个工作日</font></span><span>面试：<font>不需要</font></span></dd>
  </dl>
 </div>
 

</div>
<!--内页主体内容结束-->

<!--网站底部开始-->
<div id="Footer">
 <div class="Footer_con">
 <!--左banner start-->
  <div class="Footer_conL">
   <img src="images/fbanner.png" />
   <div class="bshare-custom icon-medium" style="padding-top:15px;"><a title="分享到QQ空间" class="bshare-qzone"></a><a title="分享到新浪微博" class="bshare-sinaminiblog"></a><a title="分享到人人网" class="bshare-renren"></a><a title="分享到腾讯微博" class="bshare-qqmb"></a><a title="分享到网易微博" class="bshare-neteasemb"></a><a title="更多平台" class="bshare-more bshare-more-icon more-style-addthis"></a><span class="BSHARE_COUNT bshare-share-count">0</span></div><script type="text/javascript" charset="utf-8" src=" >
  </div>
 <!--左banner end-->
  <div class="Footer_conR">
   <dl>
    <dt><a href="">服务承诺</a></dt>
    <dd><a href="">我们的服务</a></dd>
    <dd><a href="">我们的承诺</a></dd>
    <dd><a href="">荣誉</a></dd>
   </dl>
   <dl>
    <dt><a href="">技术实力</a></dt>
    <dd><a href="">专家推荐</a></dd>
    <dd><a href="">热门推荐</a></dd>
    <dd><a href="">网友推荐</a></dd>
   </dl>
   <dl>
    <dt><a href="">服务承诺</a></dt>
    <dd><a href="">我们的服务</a></dd>
    <dd><a href="">我们的承诺</a></dd>
    <dd><a href="">荣誉</a></dd>
   </dl>
   <dl>
    <dt><a href="">关于我们</a></dt>
    <dd><a href="">公司介绍</a></dd>
    <dd><a href="">新闻动态</a></dd>
    <dd><a href="">招贤纳士</a></dd>
    <dd><a href="">联系我们</a></dd>
   </dl>
  </div>
 </div>
</div>
<!--网站底部结束-->
<!--网站版权信息start-->
<div id="Copy">
 湖南海外旅游有限公司 版权所有 Copyright@2011-2013.www.hnhwly.com<br/ >
 湘ICP备14003721号-2 旅行社业务经营许可证号:L-HUN-CJ00008 法定代表人：陈力 湖南省旅游局投诉电话：0731-84717614<br/>
 <span>友情链接:</span> <a href="">湖南省旅游</a>  <a href="">旅行社业务</a>  <a href="">海外旅游有</a>
</div>
<!--网站版权信息end-->
<!--底部广告start-->
<div id="fixedBox"><div id="fixedBox_Con">
 <ul>
  <li class="li1">全省免费服务热线： <span>96556</span></li>
  <li class="li2">旅游咨询 <a href=" http://wpa.qq.com/msgrd?v=3&uin=783733618&site=qq&menu=yes " target="_blank">点击QQ咨询</a></li>
  <li class="li3"><img src="images/fixedHot.png" /> <a href="" target="_blank">当前最新活动</a></li>
  <li class="li4">
   <a href="#" class='wxrelative'>
      <img src="images/fixedWx.png" class="wx"/>
      <img src="images/erweima.png"  class="erm"/>
   </a>
   <a href="#"><img src="images/fixedWb.png" /></a>
   <a href=" http://wpa.qq.com/msgrd?v=3&uin=783733618&site=qq&menu=yes " target="_blank"><img src="images/fixedQQ.png" /></a>
   <a href="#Top"><img src="images/fixedDir.png" /></a>
   
  </li>
 </ul>
</div></div>
<!--底部广告end-->

<!--在线客服QQ start-->
<div id="Kf">
 <ul>
  <li><a href="#">境外线路</a></li>
  <li><a href="#">海岛线路</a></li>
  <li><a href="#">国内线路</a></li>
  <li><a href="#">省内线路</a></li>
 </ul>
 <p><a href="#"><img src="images/kfQQ.png" /></a></p>
 <div class="kfWx"><img src="images/erweima.png" /></div>
</div>
<script type="text/javascript" src="js/flqq.js"></script>
<!--在线客服QQ end-->
<!--
 1、构建一个长方形盒子，利用绝对定位，把他移动到最右边
 2、给这个长方形，添加背景图
 3、利用ul 无序列表来制作四个客服， 分别控制每个li高度，水平竖直距中显示
 
-->
<!--引用外部jquery类库-->
<script type="text/javascript" src="js/jquery.js"></script>
<!--最后面引用-->
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
  
图片

图片
第五节、项目支付功能实战-证书获取、微信支付集成初始化配置、sdk统一下单、api安全源码解读
superzhang6666的博客
12-26 2296
本节首先会讲解商户证书、私钥、微信平台证书的获取、APIv3密钥的生成。然后将我们微信支付需要的参数配置信息初始化出来，为后面的业务代码使用。结合微信平台证书下载案例和微信统一下单api来讲解请求和响应都做了什么操作。上一节中我们提到的那些证书又是如何应用在接口中的。最后再讲一下如何做内外网穿透。
bootstrap案例包括： 响应式导航菜单；banner轮播；栅格布局；固定定位
05-19
bootstrap案例包括： 响应式导航菜单；banner轮播；栅格布局；固定定位。
BCSP三期：中岚签证项目
热爱IT行业
03-12 964
本项目采用WebStorm（也可使用VsCode等Web开发工具），使用html+CSS+JS，框架使用BootStrap3进行编写。
HTML5大作业基于html+css+js实现的签证网站源码仿中岗签证网站
06-29
HTML5大作业基于html+css+js实现的签证网站源码仿中岗签证网站 本项目代码经过严格调试，确保可以运行！放心下载使用。可作为期末课程设计、课程大作业、毕业设计等。具有较高的学习借鉴价值！
签证
02-23
签证
bootstrap源码.rar
04-04
bootstrap源码.rar
Bootstrap3源码分析
yan_danfeng的博客
07-03 720
文章目录前言一、Bootstrap和它的栅格系统1.Bootstrap介绍2.容器3.栅格系统二、栅格系统源码分析1.固定容器&流体容器 公共样式2.固定容器 特定样式3.行4.列2.4.1 全部加默认样式2.4.2 设置列的浮动、宽度和位置2.4.2.1 左浮动2.4.2.2 列宽2.4.2.3 列排序2.4.2.4 列偏移三、响应式工具四、栅格和模型设置的精妙之处 前言 Bootstrap3依赖于jQuery，须先引入jQuery后方可使用。 Bootstrap3源码涉及Less，建议先
27讲项目实战：调用指定分类目录下文章+签证列表页和内容页调用
06-06 439
#27讲项目实战：调用指定分类目录下文章+签证列表页和内容页调用  一、调用指定分类目录下的文章 调用代码: //cat是要调用的分类ID,showposts是需要显示的文章数量 //所需内容就是放在这里，如下 " title=""> 二、调用指定分类目录下的置顶文章 调用代码:                $sticky = get_option('
11讲项目实战首页右侧悬浮框及内页面包屑导航
06-06 4312
#11讲项目实战首页右侧悬浮框及内页面包屑导航  首页 html代码及JS代码部分 湖南海外旅游       全省免费服务热线：    96556 0731-84635555旅行社同行热线：0731-84402588 登陆 注册                  首页    出境游    国内游    特
10讲项目实战首页底部固定位置的分享、咨询功能
06-06 2726
#10讲项目实战首页底部固定位置的分享、咨询功能     1.构建一个宽度100% 高度149px 这样一个长方形，为了保证浏览器的兼容，我们加了*｛margin:0px;padding:0px;｝Top样式中的宽度100%也可以不写，因为浏览器已给出默认为100%宽。   2.给个长方形盒子，添加一个背景图片，背景图片默认的会沿着水平方向平铺   3.Top盒子里头部信息的构建
#8讲项目js封装实战第四区域选项卡
06-06 2470
#8讲项目js封装实战第四区域选项卡     1.构建一个宽度100% 高度149px 这样一个长方形，为了保证浏览器的兼容，我们加了*｛margin:0px;padding:0px;｝Top样式中的宽度100%也可以不写，因为浏览器已给出默认为100%宽。   2.给个长方形盒子，添加一个背景图片，背景图片默认的会沿着水平方向平铺   3.Top盒子里头部信息的构建 head里假
USVisaStatusChecker:自动检查美国非移民签证状态的Javascript程序
05-18
USVisaStatusChecker 一个用于自动检查美国非移民签证状态的Javascript程序。 用法： 在第一行中的单引号对中填写您的应用程序ID 将时间间隔设置为第二次，最好大于60（秒）。 复制已编辑的源代码。 使用Chrome / Firefox或其他使用开发人员工具的网络浏览器打开“签证状态检查”页面（ ）的网址，然后按F12键显示浏览器控制台。 将源代码粘贴到控制台中并运行。 然后该脚本将自动查询VISA状态，请不要关闭该选项卡，除非您要停止它。 如果状态或更新时间有任何变化，浏览器将弹出一个警告框，告诉您相关信息。 您还可以在浏览器控制台中查看最新的查询结果。
现场签证审批流程图及表单（模板格式）
12-08
最新现场签证审批流程图及表单（模板格式）更新，需要使用的朋友可以来下载看看样式，现场签证审批流程图...该文档为现场签证审批流程图及表单（模板格式），是一份很不错的参考资料，具有较高参考价值，感兴趣的可以下载看看
项目现场签证索赔质量讲义.ppt
08-28
项目现场签证索赔质量讲义主要讲述了项目施工过程中经常遇到的现场签证问题，这一过程不仅仅是对施工实施情况的书面描述，而且也是合同内容的补充部分，对工程造价有直接影响。现场签证记录了施工期间各种因素和条件...
地产项目现场签证单.doc
08-28
地产项目现场签证单是房地产开发过程中用于记录和处理现场发生的各类变更事项的重要文件。这份文件是双方或多方当事人根据实际情况，对原定的合同内容、施工期限等进行书面确认和变更的一种方式。签证单内容涵盖了...
使用html+css实现一个静态页面（含源码） (2)
有问必答，欢迎打扰，项目开发，网页设计
06-15 1981
🎉精彩专栏推荐 💭文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】 🎓 web前端期末大作业： 【📚毕设项目精品实战案例 (1000套) 】 🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】 🌎超炫酷的Echarts大屏可视化源码：【🔰 Echarts大屏展示大数据平台可视化(150套) 】 🔖 HTML+CSS+JS实例代码： 【🗂️HTML+CSS+JS实例代码 (炫酷特效网页代码) 继续更新
地产项目现场签证审批单.doc
最新发布
09-01
地产项目现场签证审批单是专门针对地产项目管理中对现场情况进行签证管理的内部审批文件。它的主要作用是在地产项目实施过程中，对现场发生的工程变更、额外工作、隐蔽工程或其他需要签证的事项进行有效管理和记录。...
工程项目增加签证单.pdf
12-26
为了确保这些变更和额外内容得到合理记录、确认和处理，《工程项目增加签证单》应运而生。这一文档不仅是建筑工程领域中确认额外工作内容和费用调整的凭证，更是业主、设计师、承包商及监理方之间沟通协调的重要桥梁...
精选毕设项目-熊猫签证.zip
01-06
从给定文件信息来看，文件标题为“精选毕设项目-熊猫签证”，其内容和描述均以“精选毕设项目-熊猫签证”为核心，而标签字段为空。文件包含两个子文件，分别为“截图”和“源码”。由于没有提供具体的描述和标签信息...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值