移动web 15-2 Flex布局 携程移动端项目总结

我的总结:一般只记录分析思路,不太记录代码

一.先写结构

写结构的顺序自上而下
html
0.顶部搜索栏给fixed固定定位,如果不给left值,默认就是居中,
如果给了Left ,就不会居中,需要用transform-translate(-50%)来居中.
1.版心container
.1版心的最大宽度不超过540px
2.顶部搜索栏
.1不要直接给Input伪元素,是单标签,给不了伪元素 ,给Input套个盒子
.2伸缩盒子的子元素,行内元素可以直接设置宽高了
3.轮播图
.1这里如果用flex:1;是不生效的 图片的父盒子用伸缩盒子效果不明显
4.nav 可以看下面第三段,局部导航栏的第二种方法
这里有两个注意点,
.1.span给转换成inline-block.这样才能设置宽高
.2结构伪类选择器,一定要注意啊
5.local-nav-icon-icon2最后面分别加上不同的名字后缀就可以了.icon3.icon4.con5

	.local-nav li [class^='local-nav-icon']{
		background-position:-64px;
}

.nav span {
  display: inline-block;
  width: 32px;
  height: 32px;
  background: url(../images/localnav_bg.png) no-repeat;
  background-size: 32px;
  margin: 9px 0 5px 0;
}
.nav ul li:nth-child(2) span {
  background-position: 0 -32px;
}

三.局部导航栏

用属性选择器得时候
li 后面一定要用空格隔开,不然不生效

.local-nav li [class^="local-nav-icon"] {
  width: 32px;
  height: 32px;
  background: url(../images/localnav_bg.png) no-repeat 0 0;
  background-size: 32px auto;
  margin-top: 8px;
}
.local-nav li [class$="icon2"] {
  background-position: 0 -32px;
}
.local-nav li [class$="icon3"] {
  background-position: 0 -64px;
}
.local-nav li [class$="icon4"] {
  background-position: 0 -96px;
}
.local-nav li [class$="icon5"] {
  background-position: 0 -128px;
}

4. 网格部分

这里这个部分,一定要给盒子 背景,不要给a背景不然会重叠!!!

.grid-items div:first-child {
  background: url(../images/hotel.png) no-repeat bottom;
  background-size: 150px;
  margin-top: 5px;
}
.plane div:first-child {
  background: url(../images/travel.png) no-repeat bottom;
  background-size: 150px;
}
.travel div:first-child {
  background: url(../images/flight.png) no-repeat bottom;
  background-size: 150px;
}

5. 手机wifi

flex:20%
flex-warp:warp;换行

flex-derciton:colum;
align-items;center;

6.总结

1.顶部搜索栏一般不给input,而是直接给div,因为以后是跳转到其他页面更方便于用户体验
2.我的logo那里,直接给a链接一个befor,这样可以直接把文字挤下来,伪元素要转display:bock这样图片才能出来
3.景点游乐这里:l两个span前一个套背景照片,后一个套文字,直接flex:1.所有的项目直接平均分1份,然后flex-derction:colum;转换主轴,最后align-items:center
4.海外酒店这里:只有一个背景图片要注意,不要给a背景图,要给第一个 大盒子背景