一、初始设置
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布局常用父项、子项属性
-