module4-04-携程网项目-flex

携程网首页

一、初始设置

1.1 添加meta标签

1.2 初始化样式

• body {...}

• 特殊样式

  • css3盒模型: box-sizing

  • 点击高亮: * {-webkit-tap-highlight-color}

  • ios给按钮和输入框加自定义样式: input {-webkit-appearance: none;}

  • 禁用长按页面弹出菜单: img, a {-webkit-touch-callout: none;}

1.3 常见模块命名

二、开始制作

2.1 搜索框布局

• 使用flex让左登录框固定大小，左侧flex1，并且设置父元素align-items: center;

• 搜索图标使用二倍精灵图+绝对定位

• div > (div > span) + div

flex布局思路 - 上图下文

• 把侧轴设为主轴, 加上垂直水平居中

2.2 焦点图布局

2.2.1 结构

• (div::after) > a > img

2.2.2 结构作用

• 父容器div设置宽为150%以达到下部分圆弧效果，然后再用transform平移回来（注意这里不是25%）

• 伪元素after做虚化背景

2.3 local-nav

• 可以设置margin-top为负数来盖住焦点图

• 里面用ul > li > a来布局, a里面的用上面说的上图下文思路来进行布局

2.4 nav 公共导航部分

• nav > div > a > span

• 每个div都是一行(背景色,渐变弄在这), 设置border-bottom

• 然后每一个a根据具体情况设置flex和border-left

• 遇到背景渐变色不同的先设置父元素然后子元素单独设置

2.5 nav特殊结构布局

• 修改元素的flex, 并根据flex来设置总的bgc

• 因为值不统一, 只在子元素设置

• 设置bg的时候url与颜色16进制都代表背景图, 后者会覆盖前者

2.6 subnav-entry布局

• 背景图在精灵图里面的位置不够的时候, 可以选取x/y为正数的时候, 一表示为空的背景

• 让flex布局在一多条主轴上显示, 使用流式布局方式(百分比)

2.7 热门活动布局顶部

• div> (h2 > i) + a

• flex布局设置一左一右可以使用space-between

• 利用元素边框border + 2D转换transform制作小箭头

2.8 热门活动布局底部

• div > a*2 > img + span

三、总结

• ① flex布局原理：就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

• ② flex布局常用父项、子项属性

•