携程移动端静态页面仿写

最新推荐文章于 2022-08-14 00:10:25 发布
最新推荐文章于 2022-08-14 00:10:25 发布
阅读量1k 收藏 14
点赞数 4
分类专栏： css web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40996739/article/details/109065272
版权
web 同时被 2 个专栏收录
42 篇文章 2 订阅
订阅专栏
css
19 篇文章 0 订阅
订阅专栏

0x00 写在最前

    这次并没有完全复刻，首先是顶图用svg做遮罩层的部分没做，然后是页脚也用到了svg，这部分也没做，之后学习了svg可能会重新更新一下本博客吧

    携程移动端网址m.ctrip.com

0x01 HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/index.css">
    <title>Title</title>
</head>
<body>
<!--     顶部搜索-->
    <div class="search-index">
        <div class="search-input"></div>
        <a href="#" class="user">我 的</a>
    </div>
<!--焦点图-->
    <div class="focus">
        <img src="upload/focus.jpg" alt="">
        <svg viewBox="0 0 750 50" class="img_wrap_mask">
            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                <path class="img_mask_svgPath" d="M750,1.70530257e-13 L750,50 L0,50 L0,1.70530257e-13 C107.666667,33.3333333 232.666667,50 375,50 C517.333333,50 642.333333,33.3333333 750,1.70530257e-13 Z"></path>
            </g>
        </svg>
    </div>
<!--局部导航栏-->
    <ul class="local-nav">
        <li>
            <a href="#" title="景点·玩乐">
                <span class="local-nav-icon-icon1"></span>
                <span>攻略·景点</span>
            </a>
        </li>
        <li>
            <a href="#" title="景点·玩乐">
                <span class="local-nav-icon-icon2"></span>
                <span>门票·玩乐</span>
            </a>
        </li>
        <li>
            <a href="#" title="景点·玩乐">
                <span class="local-nav-icon-icon3"></span>
                <span>美食林</span>
            </a>
        </li>
        <li>
            <a href="#" title="景点·玩乐">
                <span class="local-nav-icon-icon4"></span>
                <span>周边游</span>
            </a>
        </li>
        <li>
            <a href="#" title="景点·玩乐">
                <span class="local-nav-icon-icon5"></span>
                <span>一日游</span>
            </a>
        </li>
    </ul>
<!--主导航栏-->
    <div class="nav-entry">
        <div class="nav-common">
            <a href="" class="nav-items nav-items-hotel">
                <span>酒店</span>
            </a>
            <a href="" class="nav-items nav-items-minsu">
                <span>民宿·客栈</span>
            </a>
            <a href="" class="nav-items nav-items-hot">
                <span>特价·爆款</span>
            </a>
        </div>
        <div class="nav-common">
            <a href="" class="nav-items nav-items-flight">
                <span>机票</span>
            </a>
            <a href="" class="nav-items nav-items-train">
                <span>火车票</span>
            </a>
            <a href="" class="nav-items">
                <span>汽车·船票</span>
            </a>
            <a href="" class="nav-items">
                <span>专车·租车</span>
            </a>
        </div>
        <div class="nav-common">
            <a href="" class="nav-items nav-items-travel">
                <span>旅游</span>
            </a>
            <a href="" class="nav-items nav-items-way">
                <span>高铁游</span>
            </a>
            <a href="" class="nav-items">
                <span>邮轮游</span>
            </a>
            <a href="" class="nav-items">
                <span>定制游</span>
            </a>
        </div>
    </div>
<!--subnav-entry模块-->
    <ul class="subnav-entry">
        <li>
            <a href="">
                <span class="subnav-icon subnav-icon-icon1"></span>
                <span>自由行</span>
            </a>
        </li>
        <li>
            <a href="">
                <span class="subnav-icon subnav-icon-icon2"></span>
                <span>WiFi电话卡</span>
            </a>
        </li>
        <li>
            <a href="">
                <span class="subnav-icon subnav-icon-icon3"></span>
                <span>保险·签证</span>
            </a>
        </li>
        <li>
            <a href="">
                <span class="subnav-icon subnav-icon-icon4"></span>
                <span>换钞·签证</span>
            </a>
        </li>
        <li>
            <a href="">
                <span class="subnav-icon subnav-icon-icon5"></span>
                <span>向导·包车</span>
            </a>
        </li>
        <li>
            <a href="">
                <span class="subnav-icon subnav-icon-icon6"></span>
                <span>特价机票</span>
            </a>
        </li>
        <li>
            <a href="">
                <span class="subnav-icon subnav-icon-icon7"></span>
                <span>礼品卡</span>
            </a>
        </li>
        <li>
            <a href="">
                <span class="subnav-icon subnav-icon-icon8"></span>
                <span>申卡·借钱</span>
            </a>
        </li>
        <li>
            <a href="">
                <span class="subnav-icon subnav-icon-icon9"></span>
                <span>旅拍</span>
            </a>
        </li>
        <li>
            <a href="">
                <span class="subnav-icon subnav-icon-icon10"></span>
                <span>更多</span>
            </a>
        </li>
    </ul>
<!-- 销售模块 -->
    <div class="sales-box">
        <div class="sales-hd">
            <h2>热门活动</h2>
            <a href="#" class="more">获取更多福利</a>
        </div>
        <div class="sales-bd">
            <div class="row">
                <a href="#">
                    <img src="upload/p1.png" alt="">
                </a>
                <a href="#">
                    <img src="upload/p2.jpg" alt="">

                </a>
            </div>
        </div>
    </div>
</body>
</html>

0x02 css

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;
}
.search-index {
    position: fixed;
    display: flex;
    width: 100%;
    height: 44px;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    max-width: 540px;
    min-width: 320px;
    /*background-color: aqua;*/
}
.search-input {
    position: relative;
    height: 26px;
    /*因为使用了c3的盒子模型，所以这里line-height减去了border*/
    line-height: 24px;
    border: 1px solid #ccc;
    flex: 1;
    font-size: 12px;
    color: #666;
    margin: 7px 10px;
    padding-left: 25px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
}
.search-input::before {
    content: "";
    display: block;
    position: absolute;
    top: 5px;
    left: 5px;
    width: 15px;
    height: 15px;
    background: url(../images/sprite.png) no-repeat -59px -279px;
    background-size: 104px auto;
}

/*定义search-input的flex为1，所以user会占到父元素的最右边*/
.user {
    width: 44px;
    height: 44px;
    text-align: center;
    font-size: 12px;
    color: #2eaae0;
    /*background-color: black;*/
}
.user::before {
    content: "";
    display: block;
    width: 23px;
    height: 23px;
    background: url(../images/sprite.png) no-repeat -59px -194px;
    background-size: 104px auto;
    margin: 5px auto -2px;
}
.focus {
    width: 100%;
    position: relative;
    z-index: -2;
}
.focus img {
    width: 100%;
}
.img_wrap_mask {
    position: absolute;
    left:0;
    right:0;
    bottom: -2px;
    z-index: -1;
    max-height: 36px;
    width: 100%;
}
/*局部导航栏*/
.local-nav {
    height: 64px;
    display: flex;
    margin: -52px 12px 10px;
    background-color: #fff;
    border-radius: 8px;
    justify-content: space-around;
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
.local-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 12px;
}
.local-nav li [class^="local-nav-icon"] {
    width: 32px;
    height: 32px;
    background-color: pink;
    margin-top: 8px;
    background: url(../images/localnav_bg.png) no-repeat 0 0;
    background-size: 32px auto;
}
.local-nav li .local-nav-icon-icon2 {
    background-position: 0 -32px;
}

.local-nav li .local-nav-icon-icon3 {
    background-position: 0 -64px;
}

.local-nav li .local-nav-icon-icon4 {
    background-position: 0 -96px;
}

.local-nav li .local-nav-icon-icon5 {
    background-position: 0 -128px;
}
/*主导航栏*/
.nav-entry {
    overflow: hidden;
    border-radius: 8px;
    margin: 0 12px 1px;
}
.nav-common {
    display: flex;
    height: 66px;
    border-bottom: 2px solid #f2f2f2;
}
.nav-common:nth-child(1) {
    background: -webkit-linear-gradient(left, #FA5A55, #FA994D);
}

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

.nav-common:nth-child(3) {
    background: -webkit-linear-gradient(left, #34C2A9, #6CD559);
}
.nav-common a {
    text-align: center;
    line-height: 66px;
    color: #fff;
    font-size: 14px;
    /* 文字阴影 */
    text-shadow: 1px 1px rgba(0, 0, 0, .2);
}
.nav-items {
    border-left: 1px solid #f2f2f2;
    flex: 0 1 23%;
}
.nav-common .nav-items:first-child {
    border: 0;
    text-align: left;
    box-sizing: border-box;
    padding: 0 1.6rem;
}
.nav-items-hotel {
    flex: 0 1 31%;
    background: url(../images/nav-items-hotel.png) bottom right no-repeat;
    background-size: 73px auto;
}
.nav-items-minsu {
    background: url(../images/nav-items-minsu.png) bottom left no-repeat;
    background-size: 37px auto;
}
.nav-items-hot {
    flex: 0 1 46%;
    background: url(../images/nav-items-hot.png) bottom right no-repeat;
    background-size: 232px auto;
}
.nav-items-flight {
    flex: 0 1 31%;
    background: url(../images/nav-items-flight.png) bottom right no-repeat;
    background-size: 79px auto;
}
.nav-items-train {
    background: url(../images/nav-items-train.png) bottom left no-repeat;
    background-size: 37px auto;
}
.nav-items-travel {
    flex: 0 1 31%;
    background: url(../images/nav-items-travel.png) bottom right no-repeat;
    background-size: 94px auto;
}
.nav-items-way {
    background: url(../images/nav-items-dingzhi.png) bottom left no-repeat;
    background-size: 61px auto;
}
/*subnav-entry模块*/
.subnav-entry {
    display: flex;
    flex-wrap: wrap;
    margin: 0 12px 12px;
    overflow: hidden;
}
.subnav-entry li {
    flex: 0 1 20%;
}
.subnav-entry a {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 12px;
}
.subnav-icon {
    display: block;
    height: 28px;
    width: 28px;
    margin-top: .63rem;
    margin-bottom: .31rem;
}
.subnav-icon-icon1 {
    background: url(../images/subnav-bg.png) 0 0 no-repeat;
    background-size: 28px auto;
}
.subnav-icon-icon2 {
    background: url(../images/subnav-bg.png) 0 -28px no-repeat;
    background-size: 28px auto;
}
.subnav-icon-icon3 {
    background: url(../images/subnav-bg.png) 0 -56px no-repeat;
    background-size: 28px auto;
}
.subnav-icon-icon4 {
    background: url(../images/subnav-bg.png) 0 -84px no-repeat;
    background-size: 28px auto;
}
.subnav-icon-icon5 {
    background: url(../images/subnav-bg.png) 0 -112px no-repeat;
    background-size: 28px auto;
}
.subnav-icon-icon6 {
    background: url(../images/subnav-bg.png) 0 -140px no-repeat;
    background-size: 28px auto;
}
.subnav-icon-icon7 {
    background: url(../images/subnav-bg.png) 0 -168px no-repeat;
    background-size: 28px auto;
}
.subnav-icon-icon8 {
    background: url(../images/subnav-bg.png) 0 -196px no-repeat;
    background-size: 28px auto;
}
.subnav-icon-icon9 {
    background: url(../images/subnav-bg.png) 0 -224px no-repeat;
    background-size: 28px auto;
}
.subnav-icon-icon10 {
    background: url(../images/subnav-bg.png) 0 -252px no-repeat;
    background-size: 28px auto;
}
/*销售模块*/
.sales-box {
    border-top: 1px solid #dbdbdb;
    background-color: #fff;
    margin: 4px 4px 8px 4px;
}

.sales-hd {
    position: relative;
    height: 44px;
    border-bottom: 1px solid #ccc;
}

.sales-hd h2 {
    position: relative;
    text-indent: -999px;
    overflow: hidden;
    margin: 0;
    height: 44px;
}

.sales-hd h2::after {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 8px;
    content: "";
    width: 79px;
    height: 15px;
    background: url(../images/hot.png) no-repeat 0 -20px;
    background-size: 79px auto;
}

.more {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    background: -webkit-linear-gradient(left, #FF506C, #FF6BC6);
    border-radius: 15px;
    padding: 3px 20px 3px 10px;
    color: #fff;
}

.more::after {
    content: "";
    position: absolute;
    top: 9px;
    right: 9px;
    width: 7px;
    height: 7px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
}

.row {
    display: flex;
}

.row a {
    flex: 1;
    border-bottom: 1px solid #eee;
}

.row a:nth-child(1) {
    border-right: 1px solid #eee;
}

.row a img {
    width: 100%;
}

除此之外还用了normalize.css来进行初始化，这个代码随便在网上下一份就好了

0x03 效果图

才不是小弱鸡
关注
  • 4
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
仿照携程网网页
欢乐打代码！
11-16 581
仿照携程小程序网页，仅仅参考
仿携程网手机端
06-14
仿携程网手机端页面，有需要的朋友可以下载使用，谢谢
携程首页手机端-静态页面
youbeimu的博客
02-12 1116
主要学习flex布局和精灵图使用 所以我把pink老师跟携程2022年新的首页页面结合一起编写
使用Flex布局-实现静态携程网移动端首页
SHoadgnaw的博客
03-29 583
使用Flex布局-实现静态携程网移动端首页Flex布局思路htmlcss Flex布局思路 方案：单独制作移动页面方案 技术：flex布局、宽度自适应 高度固定 html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <met
京东移动端仿写
才不是小弱鸡的博客
10-10 466
0x00 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> <link rel="
仿写携程移动端
m0_49896713的博客
01-12 160
传统布局：兼容性好，布局繁琐，局限性在移动端不能很好布局 Flex布局：简单，操作方便，兼容性差 Flex布局原理就是：给父盒子添加flex属性，来控制子盒子的位置排 列方式从而实现flex布局 当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。 Flex布局又叫伸缩布局、弹性布局、伸缩盒布局、弹性盒布局、flex 布局 ...
flex布局-携程网-移动端
02-23
本项目“flex布局-携程网-移动端”旨在通过运用Flex布局，来构建携程网的主页面、我的页面以及登录页面，确保在不同设备上都能呈现出良好的用户体验。 Flex布局，全称为Flexible Box布局，它允许容器中的子元素在行...
携程_携程移动端_移动端轮播图_源码
10-01
【移动端轮播图实现原理与携程案例分析】 在移动互联网时代，用户界面的交互性和视觉效果成为了吸引用户的重要因素，而移动端轮播图作为一种常见的网页元素，被广泛应用于各种应用程序和网站，包括携程移动端。它...
移动端的携程网静态首页制作，采用flex布局
10-20
在移动端的网页设计中，携程网的静态首页制作是一个典型的示例，它涉及到现代Web开发中的许多关键技术和最佳实践。本项目主要采用Flex布局来实现响应式设计，以确保页面在不同尺寸的移动设备上都能呈现出良好的用户...
携程网移动端flex布局案例
05-16
在本文中，我们将深入探讨如何运用Flex布局技术来构建携程网移动端的首页，结合CSS3样式、精灵图和渐变色等前端技术，实现头尾固定、中间自适应的页面设计。Flex布局（Flexible Box）是现代Web开发中的一个重要概念...
仿淘宝移动端的静态html5页面(比较全27个页面)
01-03
仿淘宝移动端的静态html5页面，还是比较全的，共有27个页面。 注意只有移动端的网页，没有pc端的。
vue仿携程
06-16
手把手教程vue+axios+vue-router-vuex仿照实现携程网 项目实战? ?最后扩展课程react版本的仿携程改造
Ctrip:模仿携程小程序实现购票功能
04-30
一场说走就走的旅行开始啦 随着小程序的大热，作为一个程序猿，我也开始接触并且大概了解了一个制作小程序的一些过程，为了提高自己的动手能力，于是乎，我开始来仿写携程的小程序，来实现一些基本功能，在仿写的过程中，也遇到了一些难题，也有了一点收获，希望可以通过这篇文章与大家共同交流，共同进步。 前言 为了更好的开发，我们需要准备我们需要的工具： Vscode：这里主要用来具体代码的编写 微信开发者工具：通过这个看效果图 EasyMock: 通过这个网站可以伪造一些数据来供我们使用，非常方便。这个是我的 具体实现 功能效果如下 查询功能的实现 1.首先需要在查询之前获取输入的所在城市以及到的城市，以及时间的选择，通过这些条件去筛选，所以需要在点击查询按钮的时候绑定一个时间，需要携带参数去进行查询 <navigator class="search" url="/pages/trainBuyConte
携程首页（flex布局-移动端）
03-08
flex布局练习
移动web网站静态页面html5
06-22
移动web网站静态页面 Html5静态页面，防携程旅行手机端网站实例
携程网移动端项目制作.md
08-18
主要是使用flex制作的，对flex属性的一系列应用
搭建 H5携程移动端页面 （一）
老段的CSDN的博客
08-14 1143
创建项目以及配置不同的浏览器在渲染网页元素的时候形式更统一。normalize.css页面样式。检验一下看刚才配置的样式有没有成功。index.css页面样式。
【实习练手demo】应hhhrrr要求,仿写CSDN移动端静态页面...
Myself's CSDN
06-22 579
仿写CSDN移动端静态页面 过去一周总结： 实习过去一周了,从最基础的静态页面开始练手，一个星期练了7-8个静态页面，期间复习了很多的页面布局的潜在技巧以及代码托管工具，技术的提升只是一小部分;更重要的是，初入职场的我； 您提醒我： 等等等等等等…(懒得整理了) hr教会我很多东西，真的非常感谢yyayyayya… 话不多说了，直接上代码吧！ 效果图如下： 代码部分： <!-- Copyright (c) Guangzhou Data Control Network Technology
使用两种rem布局方案-实现静态苏宁易购移动端首页
SHoadgnaw的博客
03-29 2407
使用两种rem布局方案-实现静态苏宁易购移动端首页方案1:rem+less+媒体查询htmlcommon.lessindex.less方案2:flexible.js+rem小插件小问题htmlindex.lessflexible.js 方案1:rem+less+媒体查询 跟其他页面不同的文件，需要新建common.less文件 用媒体查询设置不同的html字体大小 因为除了首页其他页面也要 尺寸为 320px 360px 375px 400px 414px 424px 480px 540px 720px
携程旅行网移动端web项目代码
最新发布
03-12
很抱歉，我无法提供携程旅行网移动端web项目代码的详细介绍。携程旅行网是一个大型的在线旅游平台，其移动端web项目代码涉及到多个模块和技术栈，包括前端开发、后端开发、数据库设计等。由于我无法获取具体的代码...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值