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

两步走：首先分析下底部导航栏具有的特征，然后再考虑如何实现：?具有的特征：1、首先底部导航栏有一个灰色的背景图片。2、四组按钮都由两部分（图标和文字）组成，点选不同按钮会打开不同的“窗口组”。3、按钮未被选中为灰色，选中后换为蓝色图标、文字颜色加深。4、四组按钮水平均匀分布。如何实现：1、背景图片直接用css设置就可以了2、每组按钮都由一个图标和文字组成，我们把这两看成一个整体，用a标签包裹住分别显示图标和文字的标签，当a标签被选中后，触发onclick事件函数处理。3、此步可以和2合并，用js替换图片。脉脉用的是单选按钮和css的配合来实现，它将a标签和单选按钮绑在了一块，当a标签被选中，同时单选按钮被选中。也就是说每个a标签都对应一个单选按钮，a标签和单选按钮各司其职，a标签打开窗口组，单选按钮更新图片。4、使用css3的水平盒子模型，占用比例为1：1：1：1我们先看下如何布局：index.html 1.??div id=footer? ??? 2.? ?? ???form name=Menu? ???//四个按钮的父类，这里为底部导航背景图片 3.? ?? ?? ?? ?? ? input type=radio name=footers id=ifooter_home checked=true /? ? // 第一组按钮 4.? ?