仿携程网移动端首页

最新推荐文章于 2022-10-06 10:05:40 发布
最新推荐文章于 2022-10-06 10:05:40 发布
阅读量989 收藏 14
点赞数 3
文章标签： css html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46610818/article/details/114536717
版权

仿携程网移动端首页

网页实现预览图：
在这里插入图片描述
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{
    
    display: flex;
    position:fixed;
    top: 0;
    left: 50%;
    box-sizing: border-box;
    padding-left: 12px;
    transform: translateX(-50%);
    /* 固定的盒子必须有宽度  且固定定位跟父级没有关系 它以屏幕为主 */
    width: 100%;
    max-width: 540px;
    min-width: 320px;
    height: 44px;
 
}
.search{
    flex: 1;
    border-radius: 5px;
    padding-left: 10px;
    height: 28px;
    margin: 8px 0;
    border: 1px solid #ccc;
    color:#666666;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
    background-color: #f2f2f2;
    

}
.search::before{
    content: "";
    margin: 6px 0;
    display: inline-block;
    vertical-align: middle;
    width: 22px;
    height: 22px;
    background: url("../upload/home-common-sprite.png") no-repeat;
    background-size: 22px auto;
}

.user {
    width: 44px;
    height: 44px;
  text-align: center;
}
.user::before{
    content: "";
    display: block;
    width: 22px;
    height: 22px;
    margin: 5px auto 0;
    background: url("../upload/home-common-sprite.png") no-repeat 0px -38px;
    background-size: 22px auto ;


}
.user::after{
    content: "我 的";
    
}


.slide img{
    width: 100%;
}

.local-nav{
    margin: 0 ;
    padding: 0;
    display: flex;
    list-style: none;
    height: 64px;
    background-color: #fff;
    border-radius: 8px;
    margin: 0 4px;
}
.local-nav li{
    flex: 1;
}
.local-nav li a{
    display: block;
    text-align: center;
    height: 64px;
    font-size: 12px;
    color: #000;
}
.local-nav li:nth-child(1) a::before{
    content: "";
    display: block;
    width: 40px;
    height: 40px;
    margin: 5px auto 0;
    background: url("../upload/home-fivemain-sprite.png") no-repeat;
    background-size: 40px auto;
}
.local-nav li:nth-child(2) a::before{
    content: "";
    display: block;
    width: 40px;
    height: 40px;
    margin: 5px auto 0;
    background: url("../upload/home-fivemain-sprite.png") no-repeat 0 -40px;
    background-size: 40px auto;
}
.local-nav li:nth-child(3) a::before{
    content: "";
    display: block;
    width: 40px;
    height: 40px;
    margin: 5px auto 0;
    background: url("../upload/home-fivemain-sprite.png") no-repeat 0 -80px;
    background-size: 40px auto;
}
.local-nav li:nth-child(4) a::before{
    content: "";
    display: block;
    width: 40px;
    height: 40px;
    margin: 5px auto 0;
    background: url("../upload/home-fivemain-sprite.png") no-repeat 0 -120px;
    background-size: 40px auto;
}
.local-nav li:nth-child(5) a::before{
    content: "";
    display: block;
    width: 40px;
    height: 40px;
    margin: 5px auto 0;
    background: url("../upload/home-fivemain-sprite.png") no-repeat 0 -160px;
    background-size: 40px auto;
}

nav{
    border-radius: 8px;
    margin: 0 4px 3px;
  overflow: hidden;
}
.nav-common{
    display: flex;
    height: 66px;
   
}
.nav-common:nth-child(2){
    margin: 2px 0;
}

.nav-items{

    flex: 1;
    background-color: #666666;
}
 .nav-items:nth-child(1){
    display: flex;
    background: linear-gradient(to right,#fa5956,#fb8650 54%);
}
.nav-items:nth-child(1) a{
    flex: 1;
    text-align: center;
    line-height: 66px;
    background: url("../upload/grid-nav-items-hotel.png") no-repeat;
    background-position: right bottom;
    background-size: 73px auto;
}
.nav-items:nth-child(2){
    display: flex;
    flex-direction: column;
    border: 1px solid #fff;
    border-top: none;
    border-bottom: none;
    background: linear-gradient(to right,#fa5956,#fb8650 54%);
}
.nav-items:nth-child(2) a{
    flex: 1;
    text-align: center;
    line-height: 33px;
    border-bottom: 1px solid #fff;
   
}
.nav-items:nth-child(3){
    display: flex;
    flex-direction: column;
    background: linear-gradient(to right,#ffbc49,#ffd252);
}
.nav-items:nth-child(3) a{
    flex: 1;
    text-align: center;
    line-height: 33px;
    border-bottom: 1px solid #fff;

}


.nav-common:nth-child(2) .nav-items:nth-child(1) a{
background: url("../upload/grid-nav-items-flight@v7.15.png") no-repeat right bottom;
background-size: 73px auto;
}
.nav-common:nth-child(3) .nav-items:nth-child(1) a{
    background: url("../upload/grid-nav-items-travel@v7.15.png") no-repeat right bottom;
    background-size: 73px auto;
    }
section ul {
    display: flex;
    list-style: none;
    height: 64px;
    margin: 0 4px;
 
}
.li-itmes{
    flex: 1;
    display: flex;
}
.li-itmes a{
    flex: 1;
    text-align: center;
    color: #000;
    font-size: 12px;

}
.li-itmes:nth-child(1) a::before{
    content: "";
    display: block;
    margin: 5px auto;
    width: 28px;
    height: 28px;
    background: url("../upload/un_ico_subnav2x@v7.33.png") no-repeat;
    background-size: 28px auto;
}
.li-itmes:nth-child(2) a::before{
    content: "";
    display: block;
    margin: 5px auto;
    width: 28px;
    height: 28px;
    background: url("../upload/un_ico_subnav2x@v7.33.png") no-repeat 0 -28px;
    background-size: 28px auto;
}
.li-itmes:nth-child(3) a::before{
    content: "";
    display: block;
    margin: 5px auto;
    width: 28px;
    height: 28px;
    background: url("../upload/un_ico_subnav2x@v7.33.png") no-repeat 0 -56px;
    background-size: 28px auto;
}
.li-itmes:nth-child(4) a::before{
    content: "";
    display: block;
    margin: 5px auto;
    width: 28px;
    height: 28px;
    background: url("../upload/un_ico_subnav2x@v7.33.png") no-repeat 0 -84px;
    background-size: 28px auto;
}
.li-itmes:nth-child(5) a::before{
    content: "";
    display: block;
    margin: 5px auto;
    width: 28px;
    height: 28px;
    background: url("../upload/un_ico_subnav2x@v7.33.png") no-repeat 0 -112px;
    background-size: 28px auto;
}
section ol {
    list-style: none;
    display: flex;
    margin: 0 4px;
    height: 64px;
    
}
section ol li{
    display: flex;
    flex: 1;
    
}
section ol li a{
    flex: 1;
    text-align: center;
    color: #000;
    font-size: 12px;

}
section ol li:nth-child(1) a::before{
    content: "";
    display: block;
    width: 28px;
    height: 28px;
    margin: 0 auto;
    background: url("../upload/un_ico_subnav2x@v7.33.png") no-repeat 0 -140px;
    background-size: 28px auto;
}
section ol li:nth-child(2) a::before{
    content: "";
    display: block;
    width: 28px;
    height: 28px;
    margin: 0 auto;
    background: url("../upload/un_ico_subnav2x@v7.33.png") no-repeat 0 -168px;
    background-size: 28px auto;
}
section ol li:nth-child(3) a::before{
    content: "";
    display: block;
    width: 28px;
    height: 28px;
    margin: 0 auto;
    background: url("../upload/un_ico_subnav2x@v7.33.png") no-repeat 0 -196px;
    background-size: 28px auto;
}
section ol li:nth-child(4) a::before{
    content: "";
    display: block;
    width: 28px;
    height: 28px;
    margin: 0 auto;
    background: url("../upload/un_ico_subnav2x@v7.33.png") no-repeat 0 -224px;
    background-size: 28px auto;
}
section ol li:nth-child(5) a::before{
    content: "";
    display: block;
    width: 28px;
    height: 28px;
    margin: 0 auto;
    background: url("../upload/un_ico_subnav2x@v7.33.png") no-repeat 0 -252px;
    background-size: 28px auto;
}

footer {
    display: flex;
    height: 60px;
    border-top: 1px solid #f2f2f2;
    border-bottom: 1px solid #f2f2f2;
    background-color: #fff;
}
footer div{
    flex: 1;
    display: flex;
    height: 60px;
}
footer div a{
    flex: 1;
    color: gray;

    text-align: center;
}
footer div:nth-child(1) a::before{
    content: "";
    display: block;
    width: 32px;
    height: 32px;
    margin: 4px auto;
    background: url("../upload/电话.png") no-repeat;
    background-size:  32px auto;
}
footer div:nth-child(2) a::before{
    content: "";
    display: block;
    width: 32px;
    height: 32px;
    margin: 4px auto;
    background: url("../upload/下载.png") no-repeat;
    background-size:  32px auto;
}
footer div:nth-child(3) a::before{
    content: "";
    display: block;
    width: 32px;
    height: 32px;
    margin: 4px auto;
    background: url("../upload/我的.png") no-repeat;
    background-size:  32px auto;
}
.rights p{
    margin-top: 15px;
    text-align: center;
    color: #ccc;
}

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=device-width, initial-scale=1.0">
    <title>携程网</title>
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/mycss.css">

</head>
<body>
<!-- 搜索栏 -->
<div class="search-box">
    <div class="search">搜索：目的地/酒店/景点/航班号</div>
    <a href="" class="user"></a>
</div>
<!-- 焦点图 -->
 <div class="slide">
     <img src="./img/bg.jpg" alt="">
 </div>
 <!-- 局部导航栏 -->
     <ul class="local-nav">
         <li><a href="">景点攻略</a></li>
         <li><a href="">门票活动</a></li>
         <li><a href="">美食林</a></li>
         <li><a href="">周边游</a></li>
         <li><a href="">一日游</a></li>
     </ul>
 <!-- nav  -->
 <nav>
  <div class="nav-common">
      <div class="nav-items"><a href="">酒店</a></div>
      <div class="nav-items"><a href="#">海外酒店</a><a href="">特价酒店</a></div>
      <div class="nav-items"><a href="#">团购</a><a href="#">民宿客栈</a></div>
  </div>
  <div class="nav-common" id="sec">
    <div class="nav-items"><a href="">机票</a></div>
    <div class="nav-items"><a href="#">火车票</a><a href="">特价机票</a></div>
    <div class="nav-items"><a href="#">汽车票*船票</a><a href="#">专车*租车</a></div>
  </div>
  <div class="nav-common">
    <div class="nav-items"><a href="">旅游</a></div>
    <div class="nav-items"><a href="#">门票</a><a href="">目的地攻略</a></div>
    <div class="nav-items"><a href="#">邮轮旅行</a><a href="#">定制旅行</a></div>
  </div>
 </nav>
 <!-- section部分 -->
 <section>
    <ul>
        <li class="li-itmes"><a href="">自由行</a></li>
        <li class="li-itmes"><a href="">wifi电话卡</a></li>
        <li class="li-itmes"><a href="">保险签证</a></li>
        <li class="li-itmes"><a href="">换钞购物</a></li>
        <li class="li-itmes"><a href="">向导包车</a></li>
    </ul>
    <ol>
        <li><a href="">特价机票</a></li>
        <li><a href="">礼品卡</a></li>
        <li><a href="">申卡借钱</a></li>
        <li><a href="">社区</a></li>
        <li><a href="">更多</a></li>
    </ol>
 </section>

 <!-- footer -->
 <footer>
     <div><a href="">联系我们</a></div>
     <div><a href="">下载客户端</a></div>
     <div><a href="">我的</a></div>
 </footer>

 <!-- rights -->
 <div class="rights">
     <p>2021携程旅行|沪ICP备08023580</p>
 </div>
</body>
</html>
一切为了搞钱
关注
  • 3
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
仿照携程网网页
欢乐打代码！
11-16 594
仿照携程小程序网页，仅仅参考
移动web开发项目2: 携程网(移动端、flex布局)
小黄呀呀呀的博客
02-16 401
携程网链接：http://m.ctrip.com 1.技术选型 方案：我们采取单独制作移动页面方案 技术：布局采取flex布局 2.搭建相关文件夹 3.设置视口标签以及引入初始化样式 <meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <link rel="stylesheet" href
仿携程网手机端
06-14
仿携程网手机端页面，有需要的朋友可以下载使用，谢谢
携程网首页移动端制作
qq_63479468的博客
12-05 425
访问地址：m.ctrip.com 1.技术选型 方案：采取单独制作移动页面方案 技术：布局采用flex布局 2.设置视口标签以及引入初始化样式 <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0,user-
携程网移动端首页制作（html5+css3）
qq_53767416的博客
09-14 8429
携程网移动端页面首页制作（html5+css3）
仿携程网移动端网页——包含图片背景
09-23
【标题】"仿携程网移动端网页——包含图片背景"是一个项目，目标是使用HTML5（H5）和CSS技术来创建一个类似于携程旅行网站的移动版本。这个项目着重于实现移动端网页的界面设计，特别是涉及到图片背景的应用，这在...
携程_携程移动端_移动端轮播图_源码
10-01
【移动端轮播图实现原理与携程案例分析】 在移动互联网时代，用户界面的交互性和视觉效果成为了吸引用户的重要因素，而移动端轮播图作为一种常见的网页元素，被广泛应用于各种应用程序和网站，包括携程移动端。它...
携程网移动端flex布局案例
05-16
在本文中，我们将深入探讨如何运用Flex布局技术来构建携程网移动端的首页，结合CSS3样式、精灵图和渐变色等前端技术，实现头尾固定、中间自适应的页面设计。Flex布局（Flexible Box）是现代Web开发中的一个重要概念...
携程网移动端项目制作.md
08-18
主要是使用flex制作的，对flex属性的一系列应用
html携程网首页，移动端css
07-03
携程网首页作为一个重要的在线旅行服务平台，充分利用了HTML5的优势来优化其移动端的表现。 首先，HTML5提供了更好的离线存储能力。通过`AppCache`和`IndexedDB`，携程网可以在用户设备上缓存必要的网页资源，即使...
携程首页（flex布局-移动端）
03-08
flex布局练习
android仿携程客户端界面实现
10-13
android仿携程客户端界面实现。
web前端携程首页
11-10
基于html5 css javascript jquery写的这个携程首页代码，还有登录和注册界面的代码。
【jquery mobile】携程网移动端首页
weixin_58464765的博客
07-03 359
一个携程的首页移动端
Flex布局 - 仿携程网移动端首页案列练习
JHY97的博客
01-10 1754
一、搭建相关文件结构 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.
Web前端之仿携程首页布局
qq_54162207的博客
03-12 1524
Web前端之仿携程首页布局 1、前言 出于之前早就学习过Web的相关技术，后面很少写仿网页或者做后端等案例了，导致一些基础知识点有所遗忘，而这部分知识又是Java学习中的重中之重，因此借目前学校课程正在学习Web课程，计划好好做每一份作业，每一个案例，把Web知识重新巩固一下。之前也仿过几个网页，做过几个案例，但大多是跟着老师视频一步一步做出来的，再加上当时没有做笔记，感觉并没有达到很好的效果，反思到此，决定之后的案列均写好笔记，后续自己按照笔记独立敲出代码，逐渐摆脱对网站老师的过度依赖。本次的仿携程首页仅
移动端网页布局（携程网）
小宝的博客
06-21 1291
移动端网页布局（携程网） 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=device-width, initial-scale=1.0"> &lt
移动端携程网首页制作
WangZhang_521的博客
01-18 1082
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=device-wid
433~458（flex+携程网移动端首页）
m0_57809042的博客
10-06 602
2.1 布局原理 flex是flexible Box的缩写,为"弹性布局",来为盒状模型提供最大的灵活性,任何一个容器都可以 指定为flex布局。以下由6个属性是对父元素设置的flex-direction属性决定主轴的方向(即项目的排列方向)注意:主轴和侧轴是会变化的,就看flex-direction设置谁为主轴,剩下的就是侧轴。而子元素是跟着主轴来排列的 3.3 设置主轴上的子元素排列方式 justify-content属性定义了项目在主轴上的对齐方式 eg1: eg2: 3.4 设置子元素是否换行 默
携程旅行网移动端web项目代码
最新发布
03-12
很抱歉，我无法提供携程旅行网移动端web项目代码的详细介绍。携程旅行网是一个大型的在线旅游平台，其移动端web项目代码涉及到多个模块和技术栈，包括前端开发、后端开发、数据库设计等。由于我无法获取具体的代码...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值