使用APICloud从0开始写脉脉(二)底部导航栏

1、两步走：首先分析下底部导航栏 具有的特征，然后再考虑如何实现：（A）0弋首页具有的特征：1、首先底部导航栏有一个灰色的背景图片。2、 四组按钮都由两部分（图标和文字）组成，点选不同按钮会打开不 同的窗口组”3、按钮未被选中为灰色， 选中后换为蓝色图标、文字颜色加深 。4、四组按钮水平均匀分布。如何实现：1、背景图片直接用css设置就可以了2、 每组按钮都由一个图标和文字组成，我们把这两看成一个整体，用a标签包裹住分别显示图标和文字的标签，当a标签被选中后，触发on click事件函数处理。3、此步可以和2合并，用js替换图片。脉脉用的是单选按钮和 css的 配合来实现，它将a标签和单选按钮绑在

2、了一块，当 a标签被选中，同 时单选按钮被选中。也就是说每个 a标签都对应一个单选按钮，a标签 和单选按钮各司其职，a标签打开窗口组，单选按钮更新图片。4、使用css3的水平盒子模型，占用比例为 1 : 1 : 1 : 1我们先看下如何布局:in dex.html1.1. 2.2./四个按钮的父类，这里为底部导航背景图片3.3./第一组按钮4.4./用a标签包裹住里面的图标和文字标签5.5./图标6. 6.首页/文字7.7.8. 8./第二组按钮9.9.10. 10.11. 11. 工作 12. 12.13. 13./第三组按钮14. 14.a tapmode=c on tactsActive

3、on click=jumpFrame(c on tacts);15. 15.16. 16. 人脉 17. 17.18. 18./第四组按钮19. 19.a tapmode=myselfActive on click=jumpFrame(myself);20. 20.21. 21. 个人 22. 22.23. 23.24. 24. 复制代码行3:每组按钮旁边配上个单选按钮，当按钮 （a标签）被选中，同时触发该单选按钮，而 单选按钮被选中则通过 css中的设置更换一张蓝色图片行4: 按钮（a标签）被选中，触发 on click 事件，执行jumpFrame（ home ）；行5:导航按钮图片，默认

4、 p标签是没有宽高的，在css中我们给他设置宽高，这样图片才能显示出来行6:按钮对应文字我们依次实现上面的4个步骤:1、加载背景图片1. #footer form/这里是给底部导航加背景图片2.paddi ng-top:0.5625em;/内部子兀素距父兀素顶部距离（上边距）/3. height:2.5625em;背景图片高度4. backgro un d:url(./image/footer_me nu.png)repeat-x;/背景图片素材延x轴平铺5. -webkit-backgro un d-size:auto 3.125em;6. fon t-weight:bold;7. 复制代码

5、2、显示图片和文字Tips : a、span等标签默认是无宽度和高度的，在使用前需要先给display: block 属性，然后定义的宽和高才能生效。1. footer ,header ,sect ion, dialog,me nu ,a,label,str on g,var,em,del,time,figcapti on, figure,pre,img,small,mark,cite,code,fieldset,button/ 都给他设置了，后面还得用到2. display:block;3. 复制代码加载图片：1. #footer inputtype=radio + a p/加载按钮图片，给

6、p标签设置宽高，前面提过其默认是无宽高的2. height:1.4375em;3. background-repeat:no-repeat;/ 无需重复4. backgro un d-positi on:cen ter top;5. -webkit-backgro un d-size:auto 1.55em;6. -webkit-tra nsiti on-duratio n:200ms;7. 8. .home/给第一个导航按钮加载图片9.backgro un d-image:url(./image/tab_feeds_ no rmal.p ng);/默认情况下，图标下文/给p 一个高度/默认情

7、况下/被选中后的透明度10. 11. .jobs /给第二个导航按钮加载图片12. backgro un d-image:url(./image/tab_jobs_ no rmal.p ng);13. 14. .contacts /给第三个导航按钮加载图片15. backgro un d-image:url(./image/tab_c on tacts_ no rmal.p ng);16. 17. .myself /给第四个导航按钮加载图片18. backgro un d-image:url(./image/tab_myself_ no rmal.p ng);19. 复制代码加载文字：1. #

8、footer in puttype=radio + a center 字样式2. fon t-size:0.75em;3. color:#000;4. opacity:0.3; 透明度5. -webkit-tra nsiti on-duratio n:200ms;6. 8.opacity:1;7. #footer in puttype=radio:checked + a center9. 复制代码3、按钮选中后更换图片Tips :这里的“ +表示同级。在html中可以看出，单选按钮和 a标签是同级的， 这里的意思是：当单选按钮被选中后，其同级的a标签下的拥有类名为home的 p标签更换图标1.

9、 #footer inputtype=radio:checked + a p.home/ 按钮被选中后，更换蓝色图片2.backgro un d-image:url(./image/tab_feeds_selected.p ng);3.4.#footer inputtype=radio:checked + a / 同上5.backgro un d-image:url(./image/tab_jobs_selected.p ng);6.7.#footer in puttype=radio:checked + a p.c on tacts8.backgro un d-image:url

10、(./image/tab_c on tacts_selected.p ng);9.10.#footer in puttype=radio:checked + a p.myself11.backgro un d-image:url(./image/tab_myself_selected.p ng);12.复制代码4、水平均匀分布Tips :水平盒子模型1. #main,#header menu,form,#main footer,#main footer div/ 这里干脆将后面将会用到的一块设置了吧，包括header2.display:-webkit-box !importa nt;/开启盒子

11、模型3.display: box !importa nt;4.省略-webkit-box-orient: horizontal;/默认为水平方式，所以这句可以5.6.#conten t,form a,#shops ol,#ma in footer div,#shop_item,#shoptem li7.box-flex:1;8.面四个-webkit-box-flex:1;a标签，比例就是1 : 1: 1:1/ 比例，#footer form下9.复制代码OK,上面提到的四步我们都做到了，我们看下效果可能是这样:9G2 0 0。 2首页工作人豚个人不怎么和谐，单选按钮的小圆圈我们得去掉它1. i

12、nputtype=radio/底部导航单选按钮小圆圈不显示，只是隐藏并不影响触发它2. display:non e!importa nt;3. 复制代码Last，我们还剩下一个问题（如何实现中第三步描述的）：a标签和单选 按钮绑在了一块，当a标签被选中，同时单选按钮被选中。我们看一下index.html的第四行1. 复制代码我们看下jumpFram()的实现:1. function jumpFrame(url)2.radioSelect(ifooter_ + url);3.radioSelect(iheader_ + url);4.5.if (url = home) 6.ope nHo meFrameGroup(0);7. else if (url = jobs) 8.ope nJ obsFrameGroup(0);9. else if (url = myself) 10.ope nM yselfFrameGroup(0);11. else if (url = con tacts) 12.ope nCon tactsFrame();13.14. 15. function radioSelect(id) 16.var ret = 0;17.var e = $api.byld(id);18.if (e