flex伸缩布局之携程网项目

效果图如下：

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"><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"><!-- 要改成定位的方式来写否则文字会显示在下方的不会显示在盒子里面的  margin: 5px没有用了在定位的时候; -->搜索:目的地/酒店/饭店</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 class="nav"><div class="nav-common"><div class="nav-items"><a href="#" class="nav-items-icon1">酒店</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><a href="#" class="nav-items-icon2"></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><a href="#" class="nav-items-icon3"></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-icon1"></span><span>WiFi电话卡</span></a></li><li><a href="#"><span class="subnav-entry-icon2"></span><span>保险·签证</span></a></li><li><a href="#"><span class="subnav-entry-icon3"></span><span>外币兑换</span></a></li><li><a href="#"><span class="subnav-entry-icon4"></span><span>购物</span></a></li><li><a href="#"><span class="subnav-entry-icon5"></span><span>当地向导</span></a></li><li><a href="#"><span class="subnav-entry-icon6"></span><span>自由行</span></a></li><li><a href="#"><span class="subnav-entry-icon7"></span><span>境外玩乐</span></a></li><li><a href="#"><span class="subnav-entry-icon8"></span><span>礼品卡</span></a></li><li><a href="#"><span class="subnav-entry-icon9"></span><span>信用卡</span></a></li><li><a href="#"><span class="subnav-entry-icon10"></span><span>更多</span></a></li></ul><!-- 销售模块 --><div class="salse-box"><div class="salse-hd"><!-- <h3>热门活动</h3>把热门活动丢出去为了搜索优化 --><h2>热门活动</h2><h3 class="add">广告</h3><a href="#" class="more">获取更多福利</a></div><div class="salse-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><!-- 底部模块 --><ul class="footer"><li><a href="#" title="电话预定"><span class="footer-icon-icon1"></span><span>电话预定</span></a></li><li><a href="#" title="下载客户端"><span class="footer--icon-icon2"></span><span>下载客户端</span></a></li><li><a href="#" title="我的"><span class="footer--icon-icon3"></span><span>我的</span></a></li></ul><ul class="bottom"><li><a href="#">网站地图</a></li><li><a href="#"> Language</a></li><li><a href="#">电脑版</a></li></ul><div class="box"><span class="left">2022携程旅行<em> |</em> <sapn class="right">桂ICD123456789号</sapn></span></div>
</body></html>

CSS样式代码

/* body的初始化 */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;
}/* 注意这是一定要设置的 */div {box-sizing: border-box;
}a {text-decoration: none;color: #222;
}ul {list-style: none;margin: 0;padding: 0;
}/* 搜索模块 */.search-index {display: flex;/* 采用的是固定定位 */position: fixed;/* 顶部居中显示的方法 */top: 0;left: 50%;/* 固定的盒子必须要有高度 *//* -webkit-transform:translateX(-50%);  为了照顾兼容性 *//* 往左走左走是负的 */-webkit-transform: translateX(-50%);transform: translateX(-50%);width: 42%;min-width: 320px;max-height: 540px;height: 44px;/* background-color: pink; */background-color: #f6f6f6;border-top: 1px solid #ccc;border-bottom: 1px solid #ccc;
}.search {position: relative;flex: 1;height: 26px;/* 使用的是css5的模型所以边框就比较小一点 */line-height: 24px;border: 1px solid #ccc;margin: 6px 10px;border-radius: 5px;font-size: 12px;color: #666;padding-left: 25px;box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
}.search::before {position: absolute;top: 5px;left: 5px;content: "";display: block;width: 15px;height: 15px;background: url(../images/sprite.png)no-repeat -59px -279px;background-size: 104px auto;/* margin: 5px;使用定位的时候设置margin值是没有用的 */
}.user {width: 44px;height: 42px;background-color: #fff;color: #2eaae0;font-size: 12px;text-align: center;
}/* 使用伪元素：：before */.user::before {content: "";/* a是行内元素没有高度和宽度，要改成块级元素 */display: block;width: 23px;height: 23px;background: url(../images/sprite.png) no-repeat -59px -194px;background-size: 104px auto;margin: 5px auto -2px;
}.focus {/* 和上面一样高则会下来啦 */padding-top: 44px;
}/* focus */.focus img {width: 100%;
}/* 局部导航栏 */.local-nav {display: flex;height: 64px;background-color: #fff;margin: 3px 4px;border-radius: 8px;
}.local-nav li {flex: 1;
}.local-nav a {display: flex;/* 把对齐方式改一下为Y轴 */flex-direction: column;/* 侧边栏居中对齐 单行*/align-items: center;font-size: 12px;
}/* .local-nav-icon li [class^=".local-nav-icon"] .local-nav 里面li{ */.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 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;把圆角属性显示出来 */overflow: hidden;border-radius: 8px;/* background-color: pink; */margin: 0 4px 3px;
}.nav-common {display: flex;height: 88px;background-color: pink;
}.nav-items {/* 把它平均分成三份 */position: relative;flex: 1;/* 没有冲突 */display: flex;flex-direction: column;
}/* .nav-items a [class^="nav-items-icon"] {} */.nav-common:nth-child(2) {margin: 3px 0;
}/* 选择前面的两个 */.nav-items:nth-child(-n+2) {border-right: 1px solid #fff;
}.nav-items a {flex: 1;/* 这一行不能再a里面写 在父盒子里面写flex-direction: column; */font-size: 14px;text-align: center;line-height: 44px;/* 文字阴影 */text-shadow: 1px 1px rgba(0, 0, 0, .2);color: #fff;
}.nav-items a:nth-child(1) {/* 设置第一个a连接盒子有一个底边框 */border-bottom: 1px solid #fff;
}/* 第一个列盒子的元素少了一个1px,补上 *//* 第一个列盒子的图片 在a链接发*/.nav-items-icon1 {border: 0;/* 底部居中对齐 */background: url(../images/hotel.png) no-repeat bottom center;background-size: 121px auto;
}.nav-items-icon2 {position: absolute;content: "";top: 45px;left: 60px;width: 44px;height: 44px;border: 0;/* 底部居中对齐 */background: url(../images/sprite.png) no-repeat 0 -297px;background-size: 104px auto;
}.nav-items-icon3 {position: absolute;content: "";top: 45px;left: 68px;width: 44px;height: 44px;border: 0;/* 底部居中对齐 */background: url(../images/sprite.png) no-repeat 0 -238px;background-size: 104px auto;
}/* 背景渐变颜色 */.nav-common:nth-child(1) {background: -webkit-linear-gradient(left, #FA5A56, #FA9940);
}.nav-common:nth-child(2) {background: -webkit-linear-gradient(left, #4B90ED, #53BCED);
}.nav-common:nth-child(3) {background: -webkit-linear-gradient(left, #34c2a9, #6AD45A);
}/* subnav-entry 侧边栏*/.subnav-entry {display: flex;flex-wrap: wrap;/* 忘记的步骤 */padding: 5px 0;margin: 0 4px;background-color: #fff;border-radius: 8px;
}.subnav-entry li {flex: 20%;
}.subnav-entry a {display: flex;flex-direction: column;/* 图片文字居中对齐 */align-items: center;font-size: 12px;
}/* .subnav-entry-icon {width: 28px;height: 28px;background-color: pink;margin-top: 4px;background: url(../images/subnav-bg.png)no-repeat;background-size: 28px auto;
} */.subnav-entry [class^="subnav-entry-icon"] {width: 28px;height: 28px;background-color: pink;margin-top: 4px;background: url(../images/subnav-bg.png)no-repeat 0 0;background-size: 28px auto;
}.subnav-entry li .subnav-entry-icon2 {background-position: 0 -28px;
}.subnav-entry li .subnav-entry-icon3 {background-position: 0 -63px;
}.subnav-entry li .subnav-entry-icon4 {background-position: 0 -98px;
}.subnav-entry li .subnav-entry-icon5 {background-position: 0 -129px;
}.subnav-entry li .subnav-entry-icon6 {background-position: 0 -163px;
}.subnav-entry li .subnav-entry-icon7 {background-position: 0 -198px;
}.subnav-entry li .subnav-entry-icon8 {background-position: 0 -226px;
}.subnav-entry li .subnav-entry-icon9 {background-position: 0 -254px;
}.subnav-entry li .subnav-entry-icon10 {background-position: 0 -282px;
}/* .salse-box */.salse-box {border-top: 1px solid #bbb;background-color: #fff;margin: 4px;box-shadow: 1px 1px rgba(0, 0, 0, .2);
}.salse-hd {/* 这个是a class=more连接的方法子绝父相 */position: relative;height: 46px;background-color: #fff;
}.salse-hd h2 {/* 把H2的文字丢出去 */position: relative;text-indent: -9999px;overflow: hidden;
}.salse-hd h2::after {/* 用定位来做子绝父相 */top: 5px;left: 8px;position: absolute;content: "";width: 79px;height: 15px;background-color: pink;background: url(../images/hot.png) no-repeat 0 -20px;background-size: 79px auto;
}.salse-hd .add {/* 把a的文字丢出去 *//* text-indent: -9999px;overflow: hidden; */position: absolute;content: "";top: -8px;left: 90px;/* background-color: pink; */font-size: 12px;}.salse-hd .add::after {/* 用定位来做子绝父相 */top: 1px;left: -20px;position: absolute;content: "";width: 61px;height: 54px;/* background-color: pink; */background: url(../upload/focus.jpg) no-repeat 20px -125px;background-size: 701px auto;
}.more {position: absolute;content: "";top: 0px;right: 8px;/* background-color: pink; */background: -webkit-linear-gradient(left, #FF4F67, #FF6CC7);border-radius: 15px;padding: 3px 20px 3px 10px;color: #fff;
}.more::after {position: absolute;top: 9px;right: 9px;content: "";width: 7px;height: 7px;/* 用边框来做一个箭头 */border-top: 1px solid #ccc;border-right: 1px solid #ccc;/* 旋转 */transform: rotate(45deg);
}/* row是父亲 */.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%;
}/* footer底部模块 */.footer {display: flex;height: 50px;margin: 10px 0;background-color: #fff;border-top: 1px solid #eee;border-bottom: 1px solid #eee;
}.footer li {flex: 1;
}.footer a {display: flex;/* 把对齐方式改一下为Y轴 */flex-direction: column;/* 侧边栏居中对齐 单行*/align-items: center;font-size: 12px;
}.footer li .footer-icon-icon1 {width: 25px;height: 24px;background-color: pink;margin-top: 8px;background: url(../images/sprite.png) no-repeat -59px -150px;background-size: 104px auto;
}.footer li .footer--icon-icon2 {width: 25px;height: 24px;background-color: pink;margin-top: 8px;background: url(../images/sprite.png) no-repeat -59px -170px;background-size: 104px auto;
}.footer li .footer--icon-icon3 {width: 25px;height: 24px;background-color: pink;margin-top: 8px;background: url(../images/sprite.png) no-repeat -59px -307px;background-size: 104px auto;
}/* bottom */.bottom {display: flex;width: 210px;height: 18px;margin-bottom: 10px;margin-left: 172px;
}.bottom li {flex: 1;border-right: 1px solid #ccc;padding: 0 8px;
}.bottom li:last-child {border-right: 0;
}.bottom li a {font-size: 5px;color: #9C9B9B;transform: scale(0.7);
}.box {width: 200px;height: 18px;margin: 0 auto;
}.box .left {float: left;font-size: 12px;color: #9C9C9C;transform: scale(0.7);
}.box .right {float: right;font-size: 12px;color: #9C9C9C;transform: scale(1);
}em {font-style: normal;
}

欢迎大家友好交流

flex伸缩布局之携程网项目相关推荐

移动WEB开发之flex伸缩布局
学习目标能够说出flex盒子的布局原理能够使用flex布局的常用属性能够独立完成携程移动端首页案例 1. flex布局体验 1.1 传统布局与flex布局传统布局兼容性好布局繁琐局限性, ...
弹性布局flex 伸缩布局 flex布局什么是弹性布局 justify-content
弹性布局(flex布局.伸缩布局) 一.什么是弹性布局 flex 是 flexible Box 的缩写,意为"弹性布局",用来为盒模型提供最大的灵活性,任何一个容器都可以指定为fl ...
flex弹性布局教程-04项目属性flex-grow
本节目标掌握flex-grow的使用. 掌握flex-grow放大的计算公式(难点). 掌握编写导航条的技巧. 内容摘要本篇介绍了项目属性 flex-grow,用于定义项目的扩大系数,用于分配容器 ...
flex伸缩布局盒模型总结
以下内容为大漠大大的书籍<图解css3核心技术与案例实战>观看后的总结. css2.1中定义了四种布局模式,由一个盒与其兄弟.祖先盒的关系决定其尺寸与位置的算法块布局行内布局表格布局 ...
flex伸缩布局之九宫格
今天做微信小程序的时候,在布局的时候遇到了很大的麻烦,flex布局基本忘了.看了一下阮一峰前辈的博客,然后加上自己的一些理解. 这是九宫格效果图这是html结构这是css代码(重点,敲黑板) 首先 ...
移动web现状、viewport视口、二倍图、移动web开发主流方案、布局技术选型(流式布局、flex弹性布局、less+rem+媒体查询布局、混合布局、媒体查询、bootstrap)
移动端web现状: 移动端常见浏览器:UC浏览器,QQ浏览器,Opera浏览器,百度手机浏览器,360安全浏览器,谷歌浏览器,搜狗手机浏览器,猎豹浏览器及杂牌浏览器.移动端常见的浏览器都是基于webk ...
flex 平铺布局_CSS3 Flex布局（伸缩布局盒模型）学习
CSS3 Flex布局(伸缩布局盒模型)学习转自:http://www.xifengxx.com/web-front-end/1408.html CSS2定义了四种布局:块布局.行内布局.表格布局盒 ...
CSS3 Flex布局（伸缩布局盒模型）学习
CSS3 Flex布局(伸缩布局盒模型)学习转自:http://www.xifengxx.com/web-front-end/1408.html CSS2定义了四种布局:块布局.行内布局.表格布局盒 ...
移动开发—详解flex布局之携程网首页案例制作
移动开发-详解flex布局之携程网首页案例制作学习内容一.flex的布局原理二.flex布局父项常见的属性三.flex布局子项常见的属性四.携程网首页案例制作一.flex的布局原理总结f ...

flex伸缩布局之携程网项目

flex伸缩布局之携程网项目相关推荐

最新文章

热门文章