《使用APICloud从0开始写脉脉(二) 底部导航栏》由会员分享，可在线阅读，更多相关《使用APICloud从0开始写脉脉(二) 底部导航栏（9页珍藏版）》请在金锄头文库上搜索。
1、两步走：首先分析下底部导航栏具有的特征具有的特征，然后再考虑如何实现如何实现：具有的特征：具有的特征：1、首先底部导航栏有一个灰色的背景图片。2、四组按钮都由两部分（图标和文字）组成，点选不同按钮会打开不点选不同按钮会打开不同的同的“窗口组窗口组”。3、按钮未被选中为灰色，选中后换为蓝色图标、文字颜色加深选中后换为蓝色图标、文字颜色加深。4、四组按钮水平均匀分布。如何实现：如何实现：1、背景图片直接用css设置就可以了2、每组按钮都由一个图标和文字组成，我们把这两看成一个整体我们把这两看成一个整体，用a标签包裹住分别显示图标和文字的标签，当a标签被选中后，触发onclick事件函数处理。3、此
2、步可以和2合并，用js替换图片。脉脉用的是单选按钮和css的配合来实现，它将a标签和单选按钮绑在了一块，当a标签被选中，同时单选按钮被选中。也就是说每个a标签都对应一个单选按钮，a标签和单选按钮各司其职，a标签打开“窗口组“，单选按钮更新图片。4、使用css3的水平盒子模型，占用比例为1：1：1：1我们先看下如何布局：index.html1.1. 2.2. /四个按钮的父类，这里为底部导航背景图片3.3. / 第一组按钮4.4. / 用a标签包裹住里面的图标和文字标签5.5. / 图标6.6. 首页 / 文字7.7. 8.8. / 第二组按钮9.9. 10. 10. 11. 11. 工作12.
3、 12. 13. 13. / 第三组按钮14. 14. 15. 15. 16. 16. 人脉 17. 17. 18. 18. / 第四组按钮19. 19. 20. 20. 21. 21. 个人 22. 22. 23. 23. 24. 24. 复制代码行行3： 每组按钮旁边配上个单选按钮，当按钮每组按钮旁边配上个单选按钮，当按钮(a标签标签)被选中，同时触发该单选按钮，而被选中，同时触发该单选按钮，而 单选按钮被选中则通过单选按钮被选中则通过css中的设置更换一张蓝色图片中的设置更换一张蓝色图片 行行4： 按钮按钮(a标签标签)被选中，触发被选中，触发onclick事件，执行事件，执行jumpF
4、rame(home)； 行行5： 导航按钮图片，默认导航按钮图片，默认p标签是没有宽高的，在标签是没有宽高的，在css中我们给他设置宽高，这样图片才中我们给他设置宽高，这样图片才 能显示出来能显示出来 行行6： 按钮对应文字按钮对应文字我们依次实现上面的我们依次实现上面的4个步骤：个步骤：1、加载背景图片、加载背景图片1.#footer form / 这里是给底部导航加背景图片2. padding-top:0.5625em; / 内部子元素距父元素顶部距离(上边距)3. height:2.5625em; / 背景图片高度4. background:url(./image/footer_menu
5、.png) repeat-x; / 背景图片素材延x轴平铺5. -webkit-background-size:auto 3.125em;6. font-weight:bold;7.复制代码2、显示图片和文字、显示图片和文字Tips：a、span等标签默认是无宽度和高度的，在使用前需要先给display：bloc k属性，然后定义的宽和高才能生效。1.footer,header,section,dialog,menu,a,label,strong,var,em,del,time,figcaption,figure ,pre,img,small,mark,cite,code,fieldset,b
6、utton /都给他设置了，后面还得用到2. display:block;3.复制代码加载图片：加载图片：1.#footer inputtype=“radio“ + a p / 加载按钮图片，给p标签设置宽高，前面提过其默认是无宽高的2. height:1.4375em;3. background-repeat:no-repeat; / 无需重复4. background-position:center top;5. -webkit-background-size:auto 1.55em;6. -webkit-transition-duration:200ms;7.8.home / 给第一个导
7、航按钮加载图片9. background-image:url(./image/tab_feeds_normal.png);10. 11. .jobs / 给第二个导航按钮加载图片12. background-image:url(./image/tab_jobs_normal.png);13. 14. .contacts / 给第三个导航按钮加载图片15. background-image:url(./image/tab_contacts_normal.png);16. 17. .myself / 给第四个导航按钮加载图片18. background-image:url(./image/tab_
8、myself_normal.png);19. 复制代码加载文字：加载文字：1.#footer inputtype=“radio“ + a center / 默认情况下，图标下文字样式2. font-size:0.75em; / 给p一个高度3. color:#000;4. opacity:0.3; / 默认情况下透明度5. -webkit-transition-duration:200ms;6.7.#footer inputtype=“radio“:checked + a center / 被选中后的透明度8. opacity:1;9.复制代码3、按钮选中后更换图片、按钮选中后更换图片Tips
9、：这里的“+”表示同级。在html中可以看出，单选按钮和a标签是同级的， 这里的意思是：当单选按钮被选中后，其同级的a标签下的拥有类名为home的p 标签更换图标1.#footer inputtype=“radio“:checked + a p.home / 按钮被选中后，更换蓝色图片2. background-image:url(./image/tab_feeds_selected.png);3.4.#footer inputtype=“radio“:checked + a p.jobs / 同上5. background-image:url(./image/tab_jobs_selecte
10、d.png);6.7.#footer inputtype=“radio“:checked + a p.contacts8.background-image:url(./image/tab_contacts_selected.png);9.10. #footer inputtype=“radio“:checked + a p.myself11. background-image:url(./image/tab_myself_selected.png);12. 复制代码4、水平均匀分布、水平均匀分布Tips：水平盒子模型1.#main,#header menu,form,#main footer,
11、#main footer div /这里干脆将后面将会用到的一块设置了吧，包括header2. display:-webkit-box !important; / 开启盒子模型3. display: box !important;4. -webkit-box-orient: horizontal; /默认为水平方式，所以这句可以省略5.6.#content,form a,#shops ol,#main footer div,#shop_item,#shop_item li7. box-flex:1;8. -webkit-box-flex:1; /比例，#footer form 下面四个a标签，比例就是1：1：1：19.复制代码OK，上面提到的四步我们都做到了，我们看下效果可能是这样：不怎么和谐，单选按钮的小圆圈我们得去掉它1.inputtype=“radio“ /底部导航单选按钮小圆圈不显示，只是隐藏并不影响触发它2. display:none!important;3.复制代码- -Last，我们还剩下一个问题(如何实现如何实现中第三步第三步描述的)：a标签和单选按钮绑在了一块，当a标签被选中，同时单选按钮被选中。我们看一下in
