移动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背景图,要给第一个 大盒子背景