移动端开发案例（flex布局）

最新推荐文章于 2023-02-12 16:23:13 发布
最新推荐文章于 2023-02-12 16:23:13 发布
阅读量353 收藏
点赞数
分类专栏： 移动端开发 文章标签： css3 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Zmongo/article/details/104312397
版权

在这里插入图片描述
在这里插入图片描述

<!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-scale=1.0,minimum-scale=1.0">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/index.css">
    <title>携程在手，说走就走</title>
</head>

<body>
    <!-- 顶部搜索 -->
    <div class="search-index">
        <div class="search">搜索:目的地/酒店/景点/航班号</div>
        <a href="#" class="user">我 的</a>
    </div>
    <!-- 焦点图模块 -->
    <div class="focus">
        <img src="upload/focus.jpg" alt="">
    </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>
    <!-- 主导航栏 -->
    <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">
            <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>
    <!-- 侧导航栏 -->
    <ul class="subnav-entry">
        <li>
            <a href="#">
                <span class="subnav-entry-icon-icon1"></span>
                <span>电话费</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="subnav-entry-icon-icon2"></span>
                <span>电话费</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="subnav-entry-icon-icon3"></span>
                <span>电话费</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="subnav-entry-icon-icon4"></span>
                <span>电话费</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="subnav-entry-icon-icon5"></span>
                <span>电话费</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="subnav-entry-icon-icon6"></span>
                <span>电话费</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="subnav-entry-icon-icon7"></span>
                <span>电话费</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="subnav-entry-icon-icon8"></span>
                <span>电话费</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="subnav-entry-icon-icon9"></span>
                <span>电话费</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="subnav-entry-icon-icon10"></span>
                <span>电话费</span>
            </a>
        </li>
    </ul>
    <!-- 销售模块 -->
    <div class="sales-box">
        <div class="sales-hd">
            <h2>
                <i>携程</i>
            </h2>
            <a href="#">获取更多福利></a>
        </div>
        <div class="sales-bd">
            <div class="row">
                <a href="#">
                    <img src="upload/pic1.jpg" alt="">
                </a>
                <a href="#">
                    <img src="upload/pic2.jpg" alt="">
                </a>
            </div>
            <div class="row">
                <a href="#">
                    <img src="upload/pic3.jpg" alt="">
                </a>
                <a href="#">
                    <img src="upload/pic4.jpg" alt="">
                </a>
            </div>
            <div class="row">
                <a href="#">
                    <img src="upload/pic5.jpg" alt="">
                </a>
                <a href="#">
                    <img src="upload/pic6.jpg" alt="">
                </a>
            </div>
        </div>
    </div>
</body>

</html>

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;
    /* 防止iphone默认的input高亮模式产生 */
    -webkit-tap-highlight-color: transparent;
    background-color: rgb(231, 223, 223);
}

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

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

div {
    /* C3盒子模型 */
    box-sizing: border-box;
}


/* 搜索模块 */

.search-index {
    /* flex布局可使行内元素转换为行内块元素 */
    display: flex;
    /* 固定定位跟父级没有关系 它以屏幕为准 */
    position: fixed;
    top: 0;
    /* 居中对齐 */
    left: 50%;
    transform: translateX(-50%);
    /* 考虑兼容性 */
    -webkit-transform: translateX(-50%);
    /* 固定定位的盒子一定要有宽度 */
    width: 100%;
    min-width: 320px;
    max-width: 540px;
    height: 44px;
    /* background-color: pink; */
}

.search {
    position: relative;
    height: 26px;
    line-height: 24px;
    border: 1px solid #ccc;
    flex: 1;
    font-size: 12px;
    color: #666;
    margin: 6px 10px;
    border-radius: 5px;
    padding-left: 25px;
    /* padding-left: 20px; */
    box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

.search::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    /* display: block; */
    width: 15px;
    height: 15px;
    background: url(../images/sprite.png) no-repeat -59px -279px;
    background-size: 104px auto;
    /* margin: 5px; */
}

.user {
    /* a是行内元素，所以没有宽高，但盒子需要flex布局 */
    width: 44px;
    height: 44px;
    /* background-color: purple; */
    color: #069EDE;
    font-size: 12px;
    text-align: center;
}

.user::before {
    content: "";
    display: block;
    width: 23px;
    height: 23px;
    margin: 2px auto -2px;
    background: url(../images/sprite.png) no-repeat -59px -194px;
    background-size: 104px auto;
}

.focus {
    padding-top: 44px;
}

.focus img {
    width: 100%;
}

.local-nav {
    display: flex;
    /* width: 100%; */
    height: 64px;
    background-color: #fff;
    margin: 3px 4px;
    border-radius: 8px;
}

.local-nav li {
    flex: 1;
}

.local-nav a {
    display: flex;
    flex-direction: column;
    /* 侧轴居中对齐  因为是单行*/
    align-items: center;
    font-size: 12px;
}


/* 以local-nav-icon开头的 */

.local-nav li [class^="local-nav-icon"] {
    width: 32px;
    height: 32px;
    background-color: pink;
    /* 因为是flex所以不存在外边距合并 */
    margin-top: 10px;
    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 */

nav {
    overflow: hidden;
    border-radius: 8px;
    margin: 0 4px 3px;
}

.nav-common {
    display: flex;
    height: 88px;
    background-color: pink;
    /* margin-bottom: 2px; */
}

.nav-common:nth-child(2) {
    margin: 3px 0;
}

.nav-items {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.nav-items a {
    text-align: center;
    line-height: 44px;
    color: #fff;
    font-size: 14px;
    flex: 1;
    /* 文字阴影效果 */
    text-shadow: 1px 1px rgba(0, 0, 0, .2);
}

.nav-items a:nth-child(1) {
    border-bottom: 1px solid #fff;
}


/* 要注意顺序 */

.nav-items:nth-child(1) a {
    border: 0;
    background: url(../images/hotel.png) no-repeat bottom center;
    background-size: 121px auto;
}


/* -n+2就是选择前面两个 */


/* 用了CSS3模型，所以不怕增加边框会掉下来 */

.nav-items:nth-child(-n+2) {
    border-right: 1px solid #fff;
}

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

.nav-common:nth-child(2) {
    background: -webkit-linear-gradient(left, #4F8FE5, #5CC0E3);
}

.nav-common:nth-child(3) {
    background: -webkit-linear-gradient(left, #3FD2A3, #81D471);
}


/* subnav-entry */

.subnav-entry {
    display: flex;
    border-radius: 8px;
    background-color: #fff;
    margin: 0 4px;
    flex-wrap: wrap;
    padding: 5px 0;
}

.subnav-entry li {
    /* width: 20%; */
    /* 里面的子盒子可以写百分比，相对于父亲来说 */
    flex: 20%;
}

.subnav-entry a {
    display: flex;
    flex-direction: column;
    align-items: center;
}


/* .subnav-entry-icon {
    width: 28px;
    height: 28px;
    margin-top: 4px;
    background: url(../images/subnav-bg.png) no-repeat;
    background-size: 28px auto;
} */

.subnav-entry li [class^="subnav-entry-icon"] {
    width: 28px;
    height: 28px;
    margin-top: 4px;
    background: url(../images/subnav-bg.png) no-repeat 0 0;
    background-size: 28px auto;
}

.subnav-entry li .subnav-entry-icon-icon2 {
    background-position: 0 -28px;
}

.subnav-entry li .subnav-entry-icon-icon3 {
    background-position: 0 -56px;
}

.subnav-entry li .subnav-entry-icon-icon4 {
    background-position: 0 -94px;
}

.subnav-entry li .subnav-entry-icon-icon5 {
    background-position: 0 -128px;
}

.subnav-entry li .subnav-entry-icon-icon6 {
    background-position: 0 -128px;
}

.subnav-entry li .subnav-entry-icon-icon7 {
    background-position: 0 -168px;
}

.subnav-entry li .subnav-entry-icon-icon8 {
    background-position: 0 -196px;
}

.subnav-entry li .subnav-entry-icon-icon9 {
    background-position: 0 -224px;
}

.subnav-entry li .subnav-entry-icon-icon10 {
    background-position: 0 -252px;
}


/* sales-box */

.sales-box {
    border-top: 1px solid #bbb;
    background-color: #fff;
    margin: 4px;
}

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

.sales-hd h2 {
    /* 文字隐藏 */
    position: relative;
    font-size: 12px;
    color: #bbb;
    /* text-indent: -999px;
    overflow: hidden; */
}

.sales-hd h2::after {
    position: absolute;
    top: 8px;
    left: 20px;
    content: "";
    width: 79px;
    height: 22px;
    background-color: #F27C4F;
    background-size: 28px auto;
}

.sales-hd h2 i {
    position: absolute;
    top: 8px;
    left: 105px;
    content: "";
    padding-left: 30px;
    width: 40px;
    height: 24px;
    line-height: 24px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
    background: #8194AA url(../images/sprite.png) no-repeat -68px -228px;
    background-size: 104px auto;
}

.sales-hd a {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 110px;
    height: 22px;
    text-align: center;
    line-height: 22px;
    font-size: 12px;
    color: #fff;
    background: -webkit-linear-gradient(left, #EB3668, #E25BB1);
    border-radius: 10px;
}

.row {
    display: flex;
}

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

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

.row a img {
    width: 100%;
}
移动端开发案例-京东移动端首页
m0_37643322的博客
09-26 5503
1.移动端技术选型 方案：单独制作移动页面方案 布局：流式布局 2.搭建相关文件夹结构 其中index.html是京东首页，index.css是自己写的样式，另外一个css初始化文件可以从http://necolas.github.io/normalize.css//下载保存到相应位置. images主要是放置背景图，upload主要是放置一些产品图片 3.设置视口标签以及引入初始化样式 4.整体html结构 5.分析页面布局 移动端的布局和网页端的布局基本一样，也是大盒子套小盒子，综合应用流式、定位
移动端布局——Flex布局
m0_45659764的博客
04-02 2162
一、Flex布局 思考 多个盒子横向排列使用什么属性？ 浮动 设置盒子间的间距使用什么属性？ margin 需要注意什么问题？ 浮动的盒子脱标 Flex布局/弹性布局：(PC端对低版本浏览器不兼容/移动端可以随便用) 是一种浏览器提倡的布局模型 非常适合结构化的布局（左右、上下...） 布局网页更简单、灵活 避免浮动脱标的问题 一个网站：http://caniuse.com 查看一个技术兼容和不兼容的浏览器版本 1.1 Flex布局模型构成 作用 基于Fl...
移动端web开发-flex布局-携程网小案例
weixin_45513733的博客
01-28 414
源代码：源文件 案例最终效果： 本人做这个案例前学习了以下知识 移动端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.
移动端开发案例
无区新手的博客
03-29 996
移动端拖动元素 touchstart、touchmove、touchend 可以实现拖动元素 但是拖动元素需要当前手指的坐标值 我们可以使用 targetTouches[0] 里面的pageX 和 pageY 移动端拖动的原理： 手指移动中，计算出手指移动的距离。然后用盒子原来的位置 + 手指移动的距离 手指移动的距离： 手指滑动中的位置...
移动端开发案例（流式布局）
Mia的博客
02-12 397
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0,maximum-scale...
移动端flex布局
web_hxx的博客
07-01 339
flex属性是下列属性的缩写属性： flex-grow flex-shrink flex-basis flex属性设置flex项目的长度。 注意：如果元素不是flex项，则flex属性无效。 特征 说明 默认值 0 1 auto 继承 没有 动画 有。CSS动画参考 CSS版本 CSS3 JavaScript语法 object.st...
移动端web开发flex布局案例
最新发布
04-07
综上所述，这个案例将涵盖Flex布局的基本概念、主要属性以及它们在移动端Web开发中的实际应用。通过分析`index1.html`和`css`中的代码，我们可以学习到如何利用Flex布局创建适应不同屏幕尺寸的页面，并理解其在提升...
携程网移动端flex布局案例
05-16
总结起来，"携程网移动端flex布局案例"涵盖了前端开发中的多项关键技术，包括Flex布局的运用，CSS3样式的深入，以及性能优化技巧如精灵图和渐变色。通过这些技术的组合，开发者能够创建出既美观又适应性强的移动网页...
【移动端网页布局】Flex 弹性布局案例 ③
03-06
在移动端网页设计中，Flex布局，全称是Flexible Box，是一种强大的盒模型布局方式，尤其适合处理复杂的、响应式的界面。...在实践中不断探索，你会发现Flex布局能极大地简化复杂布局的实现，提高开发效率。
移动WEB开发 之 flex布局----携程网移动端首页案例
不爱吃菜的菜菜的博客
05-11 2250
前端学习用flex布局来写携程首页（因为携程和老师讲的版本不一样，我就用了很多关于现在携程的图片来替代）
HTML5资源、移动端开发示例
02-21
有HTML5的新标签，用HTML5移动端开发示例
前端移动Web第二天：Flex伸缩布局-携程首页案例.zip
04-16
携程首页源代码
移动端开发
yanhhillo的博客
03-05 4744
2022.3.5 学习笔记 目录 四、移动端开发方案 五、 移动端技术解决方案 六、移动端常见布局 移动端开发之流式布局： 一、基础 二、制作京东移动端首页案例 四、移动端开发方案 ①单独制作移动端页面 （主流） 京东商城手机版 淘宝触屏版 苏宁易购手机版 通常情况下， 网址域名前面加 m(mobile) 可以打开移动端。 通过判断设备， 如果是移动设备打开， 则跳到移动端页面。 ②响应式页面兼容移动端 （其次） 三星手机官网 apple手机官网 通过判断屏幕宽度来改变样式， 以
[css]Flex弹性布局详解 [附携程网移动端案例]
qq_49900295的博客
04-06 2314
目录 一、flex布局体验:sunglasses: 传统布局： flex弹性布局： 二、flex布局父项常见属性:running: 1.flex-direction 2.justify-content 3.flex-wrap 4.align-items（单行） 5.align-content（多行） 三、flex布局子项常见属性:sunny: 1.flex属性 2.align-self 四、携程网移动端案例:sunflower: Flex布局可以说是不论pc端移动...
(七）移动端前端开发-基于rem布局案例2
m0_56517198的博客
02-12 226
移动端前端开发，基于rem布局，制作淘宝交易成功页面头部。通过javascript代码获取设备屏幕的宽度，来调整html根节点的字体大小。使用相对单位rem设置页面字体、宽度等大小尺寸。HTML部分包含头部、交易成功、地址三部分。让页面自适应不同型号屏幕的移动设备。
移动端小案例
Pursuit53的博客
03-11 617
移动端小案例
移动web开发之flex布局及案例练习
xia_zai_ya的博客
05-05 580
学习完移动web开发的flex布局，给自己做下小结。 传统布局和flex布局对比 1.传统布局： 兼容性好 布局繁琐 局限性，不能再移动端很好的布局 2.flex布局： 操作方便，布局极其简单，移动端使用比较广泛 pc端浏览器支持情况比较差 IE11或更低版本不支持flex或仅支持部分 建议如果是开发移动端，或者不考虑兼容的pc端就可以使用flex布局哟。 flex布局原理 flex...
移动端flex布局（学习博客）
MartinYP的博客
08-04 125
CSS个人学习笔记
flex布局仿京东移动端案例
蓝猫爱睡觉
03-16 1687
flex布局仿京东案例 首先在说一下flex布局特点 它是一个一维系统，用来为盒状模型提供最大的灵活性。 使 用：任何容器（行内元素可设置为display:inline-block）; 特点：空间分布在行中进行，而非整体 flex就是沿着一条线铺下去，这个线可能水平，也可...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值