使用APICloud从0开始写脉脉(二)底部导航栏_第1页
使用APICloud从0开始写脉脉(二)底部导航栏_第2页
使用APICloud从0开始写脉脉(二)底部导航栏_第3页
使用APICloud从0开始写脉脉(二)底部导航栏_第4页
使用APICloud从0开始写脉脉(二)底部导航栏_第5页
已阅读5页,还剩6页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

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

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论