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