慕课网实战项目《WebAPP书城整站开发》笔记一：底部边栏样式实现

推荐IMOOC实践课程： 《WebAPP 书城整站开发》

效果图

下边栏正常状态

下边栏变化状态

任务分析：

  （1）使用base64格式的图片素材完成icon的制作
  （2）字体图标变化，要设置两个字体样式（一个正常显示状态，一个唤醒后状态），为后续交互做准备。
  （3）夜间/白天模式，从HTML内容上来看不一样，所以，要有两个HTML结构（一个夜间结构，一个白天结构）。
  （4）背景有0.9的透明度，而内容本身无透明度，所以实现需要两个div叠加，一个用来设置背景颜色，一个用来设置边栏的具体内容。
  （5）图标和文字是独立的，所以用两个div标签。

实现细节

    <!-- 仿native底边栏 -->
    <div class="bottom-nav-bk bottom_nav" style="display:none"></div>
    <div class="bottom-nav bottom_nav" style="display:none">  
        <div class="item menu-button" id="menu_button">
        <div class="item-warp">
            <div class="icon-menu"></div>
            <div class="icon-text">
                目录
            </div>
        </div>
        </div>
        <div class="item" id="font-button">
            <div class="item-warp">
                <div class="icon-ft"></div>
                <div class="icon-text">
                    字体
                </div>
            </div>
        </div>
        <div class="item" id="night-button">
            <div class="item-warp" id="day_icon" >
                <div class="icon-day"></div>
                <div class="icon-text">
                     白天
                </div>
            </div>
            <div class="item-warp" id="night_icon" style="display:none">
                <div class="icon-night"></div>
                <div class="icon-text">
                    夜间
                </div>
            </div>
        </div>
    </div>