
上QQ阅读APP看书,第一时间看更新
5.5 导航栏的全屏属性
现在再看一组代码:

上面代码中的第6行,竟然设定了某种样式下的头部栏和尾部栏要保持一定的透明度。原来导航栏还有一个data-fullscreen的属性,下面是使用该属性的一个例子。
【范例5-7 导航栏使用data-fullscreen的一个例子】


运行结果如图5-19所示。
仔细观察图5-19可以发现,头部栏和尾部栏确实有了一点透明的效果(尾部栏中尤其明显)。
为什么会有这个属性呢?当然是为了让用户能有一种全屏的感受。想一想,一些用户交互性较好的视频播放器,在全屏播放视频时是不是会以半透明的形式来显示进度条?不过笔者觉得透明度应该再加强一些会更好。

图5-19 data-fullscreen属性的使用