CSS第6章竖直排列的导航菜单.ppt

第6章竖直排列的导航菜单 案例1 双竖线菜单在每个菜单项的左右两边各有一条竖线 当鼠标指针滑过时 竖线由灰色变为黑色 同时菜单文字变为红色 1 从编写基本的HTML文件开始 搭建出这个菜单的基本框架HOMEContactWebDevWebDesignMap 2 设置容器的CSS样式现在设置菜单div容器的整体区域样式 设置菜单的宽度 背景色 以及文字的字体和大小 menu width 120px background ccc font family Arial font size 14px padding 8px margin 0auto 3 设置菜单项的CSS样式现在就需要设置文字链接了 为了使5个文字链接依次竖直排列 需要将它们从 行内元素 变为 块级元素 此外还应该为它们设置背景色和内边距 以使菜单文字之间不要过于局促 menua menua visited display block background color fff padding 4px8px color 000 text decoration none margin 8px0 border left 8pxsolid 9ab border right 8pxsolid 9ab 最后 设置鼠标指针经过效果 menua hover color f00 border left 8pxsolid 000 border right 8pxsolid 000 再见