移动端flex布局——仿携程网

最新推荐文章于 2022-03-29 21:56:42 发布
最新推荐文章于 2022-03-29 21:56:42 发布
阅读量377 收藏 6
点赞数
文章标签： html css css3 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ttxwwdn/article/details/109581141
版权

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scalable=1.0, minimum-scale=1.0"
    />
    <link rel="stylesheet" href="font/iconfont.css" />
    <link rel="stylesheet" href="css/normalize.css" />
    <link rel="stylesheet" href="css/index.css" />
    <title>携程网</title>
  </head>
  <body>
    <header>
      <div class="search">
        <div></div>
        <input type="text" />
      </div>
      <div class="user">
        <div class="mine"></div>
        <div>我 的</div>
      </div>
    </header>
    <div class="main"></div>
    <nav class="iconfont">
      <a href="#">
        <span></span>
        <span>攻略·景点</span>
      </a>
      <a href="#">
        <span></span>
        <span>攻略·景点</span>
      </a>
      <a href="#">
        <span></span>
        <span>攻略·景点</span>
      </a>
      <a href="#">
        <span></span>
        <span>攻略·景点</span>
      </a>
      <a href="#">
        <span></span>
        <span>攻略·景点</span>
      </a>
    </nav>
    <div class="menu">
      <a href="#" class="hotel">
        <span>酒店</span>
        <span>民宿·客栈</span>
        <span>特价·爆款</span>
      </a>
      <a href="#" class="ticket">
        <span>机票</span>
        <span>火车票</span>
        <span>高铁票</span>
        <span>船票</span>
      </a>
      <a href="#" class="travel">
        <span>旅游</span>
        <span>高铁游</span>
        <span>邮轮游</span>
        <span>定制游</span>
      </a>
    </div>
    <div class="subnav iconfont">
      <a href="#">
        <span></span>
        <span>自由行</span>
      </a>
      <a href="#">
        <span></span>
        <span>自由行</span>
      </a>
      <a href="#">
        <span></span>
        <span>自由行</span>
      </a>
      <a href="#">
        <span></span>
        <span>自由行</span>
      </a>
      <a href="#">
        <span></span>
        <span>自由行</span>
      </a>
      <a href="#">
        <span></span>
        <span>自由行</span>
      </a>
      <a href="#">
        <span></span>
        <span>自由行</span>
      </a>
      <a href="#">
        <span></span>
        <span>自由行</span>
      </a>
      <a href="#">
        <span></span>
        <span>自由行</span>
      </a>
      <a href="#">
        <span></span>
        <span>自由行</span>
      </a>
    </div>
    <footer>
      <div class="tool iconfont">
        <a href="#">
          <span></span>
          <span>电话预定</span>
        </a>
        <a href="#">
          <span></span>
          <span>电话预定</span>
        </a>
        <a href="#">
          <span></span>
          <span>电话预定</span>
        </a>
      </div>
      <div class="tool_ver iconfont">
        <a href="#">网站地图</a>
        <a href="#">language </a>
        <a href="#">电脑版</a>
      </div>
      <p>©携程旅行｜沪ICP备XXXXXXXXX号</p>
    </footer>
  </body>
</html>

CSS

body {
  min-width: 320px;
  max-width: 540px;
  height: 665px;
  font: 14px/1.5 Tahoma, 'Lucida Grande', Verdana, 'Microsoft Yahei';
  margin: 0 auto;
  color: #000;
  background-color: #fafafc;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}
a {
  text-decoration: none;
  color: #fff;
}
header {
  position: fixed;
  display: flex;
  align-items: center;
  height: 44px;
  width: 100%;
  min-width: 320px;
  max-width: 540px;
}
header .search {
  display: flex;
  flex: 1;
  height: 28px;
  margin-left: 10px;
  background-color: #fff;
  border-radius: 14px;
  overflow: hidden;
}
header .search div {
  width: 35px;
  height: 100%;
  background-image: url(../images/search.png);
  background-repeat: no-repeat;
  background-position: 10px 6px;
  background-size: 22px auto;
}
header .search input {
  flex: 1;
  border: none;
  outline: none;
}
header .user {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 51px;
  height: 100%;
  color: #fff;
}
header .user .mine {
  width: 22px;
  height: 22px;
  background-image: url(../images/search.png);
  background-repeat: no-repeat;
  background-position: 0 -34px;
  background-size: 22px auto;
}
.main {
  width: 100%;
  height: 247px;
  background-color: #fff;
  background-image: url(../upload/bgpic.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
nav {
  display: flex;
  justify-self: center;
  align-items: center;
  border-radius: 8px;
  margin: -52px 12px 10px 12px;
  height: 64px;
  justify-content: space-around;
  background-color: #fff;
}
nav a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 20%;
  height: 52px;
  /* body行距1.5，不改行距盒子会变大 */
  line-height: 1;
  color: #000;
  text-decoration: none;
}
nav a span:nth-child(1) {
  width: 40px;
  height: 40px;
}
nav a span:nth-child(2) {
  height: 12px;
  font-size: 12px;
}
nav a span:nth-child(1)::before {
  content: '\e7a0';
  font-size: 40px;
  color: skyblue;
}
.menu {
  height: 198px;
  margin: 0 12px;
  border-radius: 8px;
  overflow: hidden;
}
.menu .hotel,
.menu .ticket,
.menu .travel {
  display: flex;
  height: 65px;
  border-bottom: 1px solid #fff;
}
.menu .hotel span,
.menu .ticket span,
.menu .travel span {
  width: 23%;
  height: 65px;
  line-height: 65px;
  text-align: center;
  background-repeat: no-repeat;
  background-size: 50% 50%;
}
.menu .hotel span:nth-child(1),
.menu .travel span:nth-child(1),
.menu .ticket span:nth-child(1) {
  width: 31%;
  box-sizing: border-box;
  height: 65px;
  text-align: left;
  padding-left: 20px;
  border-right: 1px solid #fff;
  background-position: bottom right;
}
.menu .hotel span:nth-child(3) {
  flex: 1;
}
.menu .hotel {
  background-color: #fa6754;
}
.menu .hotel span:nth-child(1) {
  background-image: url(../upload/pic1.png);
}
.menu .hotel span:nth-child(2) {
  background-image: url(../upload/pic2.png);
  background-position: bottom left;
}
.menu .hotel span:nth-child(3) {
  background-image: url(../upload/pic3.png);
  background-position: right bottom;
  background-size: 120% 150%;
  border-left: 1px solid #fff;
}
.menu .ticket {
  background-color: #4d99ed;
}
.menu .ticket span:nth-child(1) {
  background-image: url(../upload/pic21.png);
}
.menu .ticket span:nth-child(2) {
  background-image: url(../upload/pic22.png);
  background-position: bottom left;
  border-right: 1px solid #fff;
}
.menu .travel {
  background-color: #43c795;
}
.menu .travel span:nth-child(1) {
  background-image: url(../upload/31.png);
}
.menu .travel span:nth-child(2) {
  background-image: url(../upload/pic32.png);
  background-position: bottom left;
  border-right: 1px solid #fff;
}
.menu .ticket span:nth-child(3),
.menu .travel span:nth-child(3) {
  border-right: 1px solid #fff;
}
.subnav {
  display: flex;
  justify-content: space-around;
  align-content: center;
  flex-wrap: wrap;
  height: 110px;
  margin: 0 12px;
}
.subnav a {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  line-height: 1;
  font-size: 12px;
  height: 55px;
  width: 20%;
  color: #000;
}
.subnav a span:nth-child(1)::before {
  content: '\e64a';
  font-size: 28px;
  color: #fd884e;
}
footer {
  height: 124px;
}
footer .tool {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 60px;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  margin: 10px 0;
  background-color: #fff;
}
footer .tool a {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  color: #000;
  margin: 6px 0;
  font-size: 12px;
}
footer .tool a span:nth-child(1)::before {
  content: '\e608';
  font-size: 20px;
  color: #ccc;
}
.tool_ver {
  text-align: center;
}
.tool_ver a {
  display: inline-block;
  font-size: 12px;
  color: #666;
  padding: 0 5px;
  border-right: 1.5px solid #ccc;
}
.tool_ver a:nth-child(2)::before {
  content: '\e718';
  font-size: 11px;
  color: #666;
}
.tool_ver a:nth-child(2)::after {
  content: '\e62d';
  font-size: 11px;
  color: #666;
}
.tool_ver a:nth-child(3) {
  border: none;
}
p {
  text-align: center;
  font-size: 12px;
  color: #ccc;
  margin: 5px 0;
}

在这里插入图片描述

Starry577
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
仿携程网手机端
06-14
仿携程网手机端页面，有需要的朋友可以下载使用，谢谢
携程网移动端flex布局案例
05-16
携程网移动端首页H5制作，头尾固定，中间自适应，熟练使用flex布局、CSS3样式以及精灵图、渐变色等前端知识点
flex 仿QQ(一)
11-01 50
看大家都我当前进行的flex仿ＱＱ这个项目还是有兴趣，在此就当前进度谈谈我的做法吧，欢迎拍砖。 目前已经完成：系统托盘，登陆(经典及2011选择登陆), 基本聊天，同时登陆几个账号，联系人列表 看下图吧： 基本构架是 : flex(air) + red5 + mysql,如图 聊天等同步信息访问red5，其它信息访问webserver, 所有数据库操作通过webserver来与...
一个仿携程的移动端网站
Tmevolcy的博客
05-25 1685
需要源码的私聊博主
携程首页（flex布局-移动端）
03-08
flex布局练习
携程网站 移动端 Flex布局
06-08
携程网站 移动端 Flex布局，新人可以利用此资源来学习flex布局的应用 Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。本文给出了 ...
flex布局-携程网-移动端
02-23
本项目“flex布局-携程网-移动端”旨在通过运用Flex布局，来构建携程网的主页面、我的页面以及登录页面，确保在不同设备上都能呈现出良好的用户体验。 Flex布局，全称为Flexible Box布局，它允许容器中的子元素在行...
移动端的携程网静态首页制作，采用flex布局
10-20
综上所述，移动端的携程网静态首页制作是一个综合性的Web开发项目，涉及到前端布局、响应式设计、图像优化等多个领域。通过熟练掌握这些知识点，开发者可以创建出既美观又高效的移动网页，满足用户在不同设备上的...
【移动端网页布局】Flex 弹性布局案例 ③
最新发布
03-06
在移动端网页设计中，Flex布局，全称是Flexible Box，是一种强大的盒模型布局方式，尤其适合处理复杂的、响应式的界面。本案例将深入探讨Flex布局的使用，通过实际的代码示例来阐述其核心概念和应用场景。 一、Flex...
移动端flex布局项目之携程网首页
Satosere的博客
01-21 375
移动端flex布局项目之携程网首页 文章目录移动端flex布局项目之携程网首页前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码如下（示例）： import numpy as np import pandas as pd import matplotlib.pyplot as plt import seaborn as sns imp
前端移动Web第二天：Flex伸缩布局-携程首页案例.zip
04-16
携程首页源代码
携程移动端案列（flex布局、背景图缩放，文字阴影）
weixin_30788239的博客
04-18 120
效果图如下： <body> <div class="nav"> <div class="row"> <div class="col1"> <a href="#"> <em>酒店</e...
php仿携程网站,仿携程网手机端
weixin_30376865的博客
03-11 281
【实例简介】仿携程网手机端页面，有需要的朋友可以下载使用，谢谢【实例截图】【核心代码】75173e72-3359-4642-a0a0-72ba9fa3834f├── __MACOSX│ ├── 鎼虹▼缃戝疄鎴?│ ├── 鎼虹▼缃戝疄鎴?._.DS_Store│ ├── 鎼虹▼缃戝疄鎴?images│ └── 鎼虹▼缃戝疄鎴?._index.html├── 鎼虹▼缃戝疄鎴?├── ...
05移动端布局基础之flex弹性布局项目实战(携程移动端首页)
CurryCoder的个人博客
05-10 914
技术交流QQ群:1027579432，欢迎你的加入！ 1.携程网移动端首页 打开网址：m.ctrip.com 2.技术选型 方案：采取单独制作移动页面方案 技术：布局采取flex布局 3.搭建相关文件夹结构 4.设置视口标签以及引入初始化样式 ``` <meta name="viewport" content="width=device-width, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0, initial-scale=
移动端web开发-flex布局-携程网小案例
weixin_45513733的博客
01-28 366
源代码：源文件 案例最终效果： 本人做这个案例前学习了以下知识 移动端flex布局 一、HTNML文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maxomun-scale=1.
flex布局携程网案列
weixin_42378409的博客
04-03 432
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
flex仿微博布局实战+代码
java小白翻身
03-29 1062
效果图： ： 源代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>仿新浪微博 flex布局项目实战</title> <style type="text/css"> .wrap { width: 1500px; margin: 10px auto; display: flex; flex-direct..
仿携程网移动端首页
weixin_46610818的博客
03-08 987
仿携程网移动端首页 网页实现预览图： 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{
vue仿携程
10-10
手把手教程vue+axios+vue-router-vuex仿照实现携程网 项目实战   最后扩展课程react版本的仿携程改造
移动端flex布局案例
08-19
当然，我可以为您提供一个移动端的Flex布局案例。假设您想要创建一个简单的导航栏，其中包括三个链接按钮，它们应该在移动设备上水平居中显示。以下是一个使用Flex布局实现此效果的示例代码： HTML代码： ```html ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值