仿携程

最新推荐文章于 2024-03-28 14:18:31 发布
最新推荐文章于 2024-03-28 14:18:31 发布
阅读量140 收藏 2
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_57401304/article/details/117117943
版权 
<!DOCTYPE html>
<html lang="en">

<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">
    <link rel="stylesheet" href="normalize.css">
    <title>携程在手，说走就走</title>
    <style>
        body {
            max-width: 540px;
            min-width: 320px;
            margin: 0 auto;
            font: normal 14px/1.5 Tahoma, "Lucida Grande", Verdana, "Microsoft Yahei", STXihei, hei;
            color: #000;
            background: #f2f2f2;
            overflow-x: hidden;
            -webkit-tap-highlight-color: transparent;
        }

        ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        a {
            text-decoration: none;
            color: #222;
        }

        div {
            box-sizing: border-box;
        }

        /* 声明样式 注意路径 */
        @font-face {
            font-family: 'icomoon';
            src: url('D:/VScode/vS资源/fonts/购物车和下拉/icomoon.eot?nmptm8');
            src: url('D:/VScode/vS资源/fonts/购物车和下拉/icomoon.eot?nmptm8#iefix') format('embedded-opentype'),
                url('D:/VScode/vS资源/fonts/购物车和下拉/icomoon.ttf?nmptm8') format('truetype'),
                url('D:/VScode/vS资源/fonts/购物车和下拉/icomoon.woff?nmptm8') format('woff'),
                url('D:/VScode/vS资源/fonts/购物车和下拉/icomoon.svg?nmptm8#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }

        .search-index {
            display: flex;
            position: fixed;
            width: 100%;
            height: 44px;
            max-width: 540px;
            min-width: 320px;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            background-color: #F6F6F6;
            border-top: 1px solid #ccc;
            border-bottom: 1px solid #ccc;
        }

        .search {
            position: relative;
            border-radius: 5px;
            height: 26px;
            flex: 1;
            line-height: 24px;
            color: #666;
            font-size: 12px;
            margin: 8px 14px;
            padding-left: 25px;
            border: 1px solid #ccc;
            box-shadow: 5px 5px 5px rgba(0, 0, 0, .3);
        }

        .search::before {
            position: absolute;
            vertical-align: left;
            content: "";
            background: url(1.jpg) no-repeat;
            font-family: 'icomoon';
            width: 15px;
            height: 15px;
            top: 5px;
            left: 5px;
            text-align: center;
            line-height: 26px;
        }

        .user {
            width: 44px;
            height: 44px;
            color: cornflowerblue;
            margin-bottom: 0;
        }

        .user::before {
            content: '\e900';
            font-family: 'icomoon';
            display: block;
            width: 23px;
            height: 23px;
            font-size: 20px;
            text-align: center;
            line-height: 28px;
            margin-left: 5px;
            color: blueviolet;
        }

        .focus {
            display: flex;
            background: url(废鱼1.jpg) repeat 0px -38px;
            background-size: 100% 100%;
            width: 100%;
            height: 100px;
            margin-top: 44px;
            margin-left: 50%;
            transform: translateX(-50%);

        }

        .nav-common {
            display: flex;
            flex: 1;
            width: 100%;
            height: 88px;
            border-radius: 5px;
        }

        .nav-common:nth-child(1) {
            background: -webkit-linear-gradient(top left, #FA5A55, #FA994D);
        }

        .nav-common:nth-child(2) {
            background: -webkit-linear-gradient(top left, #4B90ED, #53BCED);
        }

        .nav-common:nth-child(3) {
            background: -webkit-linear-gradient(top left, #34C2A9, #6CD559);
        }

        .nav-common:nth-child(4) {
            background: -webkit-linear-gradient(top left, #FA5A55, #FA994D);
        }

        .nav-items {
            width: 33.33%;
            border: 1px solid snow;
            display: flex;
            flex-direction: column;
        }

        .nav-items a {
            color: snow;
            font-size: 18px;
            text-align: center;
            line-height: 44px;
            border-top: 1px solid #fff;
        }

        .nav-items:nth-child(1) a {
            /* background: url(sheep.png) no-repeat -50px -34px; */
            background-size: 130% 114px;
            width: 100%;
            height: 100%;
        }

        .nav-common:nth-child(4) a {
            background: url();
        }

        .subnav-entry {
            display: flex;
            margin: 0 4px;
            padding: 5px 0;
            flex-wrap: wrap;
            border-radius: 15px;
            border: 2px solid #ccc;
        }

        .subnav-entry li {
            display: flex;
            flex: 20%;
            height: 50px;
            margin: 0;
            padding: 0;
            flex-direction: column;
            align-items: center;
            background-color: rgb(237, 247, 250);
            border: 1px solid #ccc;
        }

        .subnav-entry li a {
            text-indent: 5px;
            color: black;
            font-size: 17px;
            margin-bottom: 0;
        }

        .subnav-entry li::before {
            content: '\e900';
            font-family: 'icomoon';
            margin-top: 0;
            display: block;
            width: 23px;
            height: 23px;
            color: burlywood;
            line-height: 23px;
            font-size: 26px;
        }

        .walefare {
            display: flex;
            width: 100%;
            height: 420px;
            font-size: 28px;
            font-weight: 800;
            text-indent: 25px;
        }

        .salefare {
            flex: 50%;
            border: 1px solid #ccc;
            border-right: 0;
            border-left: 0;
            flex-direction: column;
        }

        .salefare a:nth-child(1) {
            display: block;
            height: 280px;
            color: chartreuse;
            border-bottom: 1px solid #000;
        }

        .salefare a:nth-child(2) {
            color: darkgoldenrod;
        }

        .profit {
            flex: 50%;
            border: 1px solid #ccc;
            border-right: 0;
        }

        .profit li {
            flex-direction: column;
            height: 140px;
            border-bottom: 1px solid #000;
        }

        .profit li:nth-child(1) {
            color: plum;
        }

        .profit li:nth-child(2) {
            color: gold;
        }

        .profit li:nth-child(3) {
            color: brown;
            border-bottom: 0;
        }
    </style>
</head>

<body>
    <!-- 1.搜索 -->
    <div class="search-index">
        <div class="search">搜索:目的地/酒店/景点/航班号</div>
        <a href="#" class="user">我 的</a>
    </div>
    <!-- 2.焦点 -->
    <div class="focus"></div>
    <!-- 3.导航 -->
    <nav>
        <div class="nav-common">
            <div class="nav-items">
                <a href="#" alt="">监督管理</a>
            </div>
            <div class="nav-items">
                <a href="#" alt="">监督管理</a>
                <a href="#" alt="">监督管理</a>
            </div>
            <div class="nav-items">
                <a href="#" alt="">监督管理</a>
                <a href="#" alt="">监督管理</a>
            </div>
        </div>
        <div class="nav-common">
            <div class="nav-items">
                <a href="#" alt="">飞机</a>
            </div>
            <div class="nav-items">
                <a href="#" alt="">回头让他</a>
                <a href="#" alt="">他如何</a>
            </div>
            <div class="nav-items">
                <a href="#" alt="">歌好听人和</a>
                <a href="#" alt="">虽然特让</a>
            </div>
        </div>
        <div class="nav-common">
            <div class="nav-items">
                <a href="#" alt="">飞机</a>
            </div>
            <div class="nav-items">
                <a href="#" alt="">回头让他</a>
                <a href="#" alt="">他如何</a>
            </div>
            <div class="nav-items">
                <a href="#" alt="">歌好听人和</a>
                <a href="#" alt="">虽然特让</a>
            </div>
        </div>
        <div class="nav-common">
            <div class="nav-items">
                <a href="#" alt="">所发生的f</a>
                <a href="#" alt="">v电费滚滚</a>
            </div>
            <div class="nav-items">
                <a href="#" alt="">所发生的f</a>
                <a href="#" alt="">v电费滚滚</a>
            </div>
            <div class="nav-items">
                <a href="#" alt="">所发生的f</a>
                <a href="#" alt="">v电费滚滚</a>
            </div>
        </div>
    </nav>
    <!-- 4.侧导航 -->
    <ul class="subnav-entry">
        <li><a href="#" alt="">所发生的f</a></li>
        <li><a href="#" alt="">所发生的f</a></li>
        <li><a href="#" alt="">所发生的f</a></li>
        <li><a href="#" alt="">所发生的f</a></li>
        <li><a href="#" alt="">所发生的f</a></li>
        <li><a href="#" alt="">所发生的f</a></li>
        <li><a href="#" alt="">所发生的f</a></li>
        <li><a href="#" alt="">所发生的f</a></li>
    </ul>
    <!-- 5.领福利 -->
    <div class="walefare">
        <div class="salefare">
            <a>签到令肌肤</a>
            <a>亿元抽奖</a>
        </div>
        <div class="profit">
            <ul>
                <li>等我领红包</li>
                <li>免费天堂游</li>
                <li>0元抽</li>
            </ul>
        </div>
    </div>

</body>

</html>
M24女孩不秃头喔！
关注
专栏目录
仿携程网手机端
06-14
仿携程网手机端页面，有需要的朋友可以下载使用，谢谢
php仿携程网站,仿携程网手机端
weixin_30376865的博客
03-11 291
【实例简介】仿携程网手机端页面，有需要的朋友可以下载使用，谢谢【实例截图】【核心代码】75173e72-3359-4642-a0a0-72ba9fa3834f├── __MACOSX│ ├── 鎼虹▼缃戝疄鎴?│ ├── 鎼虹▼缃戝疄鎴?._.DS_Store│ ├── 鎼虹▼缃戝疄鎴?images│ └── 鎼虹▼缃戝疄鎴?._index.html├── 鎼虹▼缃戝疄鎴?├── ...
php仿携程网站,三分钟带你仿携程飞机票首页炫酷交互
weixin_35180056的博客
03-11 678
当前位置:我的异常网» Web前端»三分钟带你仿携程飞机票首页炫酷交互三分钟带你仿携程飞机票首页炫酷交互www.myexceptions.net网友分享于：2013-12-23浏览：0次三分钟带你仿携程机票首页炫酷交互这些效果熟悉MD的同学肯定一下就能够想到三大利器：CoordinatorLayout，AppBarLayout，CollapsingToolbarLayout。往这个方面...
Flex布局 - 仿携程网移动端首页案列练习
JHY97的博客
01-10 1784
一、搭建相关文件结构 1.1 文件结构 创建相关存储文件夹以及搭建index.html文件结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=de.
一个仿携程的移动端网站
Tmevolcy的博客
05-25 1692
需要源码的私聊博主
CSS3仿携程旅行网404页面特效代码
03-20
【CSS3仿携程旅行网404页面特效代码】是一个利用现代CSS3技术来实现的网页特效，旨在创建一个与携程旅行网类似的404错误页面。404页面是当用户尝试访问不存在的网址时显示的一种反馈界面，通常包含一些幽默或创意的...
使用Axure制作仿携程网高保真项目
09-08
使用Axure RP，根据携程网需求和风格创建高保真交互原型。从主页开始构建页面原型，逐步添加其他页面，并添加所需的交互效果。使用动态面板和变量实现复杂交互流程，最终导出高保真原型并与开发人员合作。
android仿携程客户端界面实现
10-13
在Android开发中，仿携程客户端界面的实现是一个常见的练习，旨在提升开发者对于UI设计和用户体验的理解。这个项目可能包括了多个模块，如首页、酒店预订、机票查询、旅游攻略等，涉及到了Android SDK中的多种技术和...
仿携程订酒店大学毕业设计.rar
04-30
在文件列表中，"仿携程毕设"可能包含了项目的源代码、数据库脚本、设计文档等相关文件。这些文件对于理解项目的结构、功能实现和调试过程至关重要。开发者可以通过阅读源码学习如何在uni-app中组织组件和路由，以及...
2个仿携程手机专题单页模板 v1.0
10-06
【标题】"2个仿携程手机专题单页模板 v1.0" 提供的是针对移动端设计的资源，旨在模仿携程网站的风格，帮助设计师或开发者创建具有类似视觉效果的手机专题页面。这样的模板通常包括精心设计的布局、颜色方案、字体...
js仿携程网机票城市选择器代码
06-23
js仿携程网机票城市选择器代码,有需要同学可以下载。移动端请勿下载！移动端请勿下载！移动端请勿下载！互相学习
jquery仿携程网城市选择插件
07-09
jquery仿携程网城市选择插件对上次JS更新为jquery开发 并美化了效果，兼容性全面得到了提高
仿携程网城市选择（修改后）
08-18
仿携程网城市选择，添加选择城市弹出该城市的名字，使用者可根据自己需求修改点击事件
直接从携程网站上挖出来的城市选择框
11-19
这个城市下拉选择是直接从携程网站上挖出来的，支持默认热门城市、拼音/简拼输入、字母选择....等等，还有带有翻页功能，太牛了~~ 挖了好久，对比了去哪、艺龙...等等，我个人觉得携程这个城市选择框算是目前功能最全最好用的一款城市选择控件，没有之一。
RN开发实践——仿携程App（四）
CTSN的博客
08-11 1331
React Native 开发实践四
仿携程网移动端首页
weixin_46610818的博客
03-08 994
仿携程网移动端首页 网页实现预览图： css部分： body{ max-width: 540px; min-width: 320px; background-color: #f2f2f2; margin: 0 auto; color: #000; } a{ text-decoration: none; color: white; } *{ margin: 0; padding: 0; } .search-box{
仿ios分段选择器(自定义radiogroup)
ly635676581的专栏
11-17 2699
仿ios分段选择器的简易实现方式.通过自定义RadioButton实现
10天用Flutter撸了个高仿携程App（附小技巧积累总结），面试官不讲武德
最新发布
2301_82243078的博客
03-28 1114
以下都是我在项目里使用的知识点，在这里记录分享出来，希望能帮到大家。
自定义HorizontalScrollView模仿RadioGroup+Fragment+Viewpager的翻页与点击效果,效果完全一样
keanta的博客
11-23 774
界面如图.有点粗陋,不要在意,只是充个数. 监听屏幕滑动,结合距离和滑动速度来判断翻页. 保证跟效果跟使用RadioGroup+ViewPager+Fragment+FragmentManagement的效果一样! 注意,可以跟上面的顶部分栏联动的喔,个人觉得很有用,特拿出来分享.~ 首先,贴上自定义的HorizontalScrollview /** * 翻页效
仿携程旅行完成一个vue3的案例需求分析
07-16
针对仿携程旅行的Vue3案例需求分，我们可以考虑以下方面： 1. 页面结构：了解携程旅行网站的整体结构和功能布局，包括首页、搜索页、详情页、订单页等。根据需求确定需要实现的页面和它们之间的关系。 2. 数据接口...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值