css实例之简单好看的导航栏

用css3制作的一个垂直简单的导航栏

效果如下图

css实例之简单好看的导航栏_第1张图片

HTML代码

    

CSS代码

笔记:重要的就是左边的浮动块,首先把它设为内联块元素,采取绝对定位,然后用css的transition的属性,通过移动上下的位置来表现滑动的效果,通过hover属性来实现鼠标在导航栏上移动来影响左侧红色块。



你可能感兴趣的:(css实例之简单好看的导航栏)