利用CSS+HTML设计横向与竖向导航菜单源码全版.doc

1、利用CSS+HTML设计横向与竖向 导航菜单源码1.横向导航菜单示例效果；如图1-1所示源码:横向导航菜单#n lifloat:left;color:#00F;)#n li acolor:#FFF; background-color:#00F;display:block; text-decoration:none;text-align:center;height:30px;width:150px;margin-left:2px;)#n li a:hovercolor:#F30;background-color:#3CF; vh1湖南铁道职业职业技术学院   横向导航菜单v/

2、b 首页 学院 概况 铁道通信与信号学院 铁道车辆与机械学院v/av/li铁道供电与电气学院铁道牵引与动力学院 lixa href铲铁道运营与管理学院2,竖向导航菜单示例效果；如图1-2所示:+CCi On / file:/C:/Uieis/lenovo/Desk.top/Untitled-2.html加门量领D宁与商展 D上网导航L2丽我的博厘宝画图蚊他美学丸明书一目湖南铁道职业职业技术学院竖向导航菜单源码： 竖向导航菜单v/title#button width:150px; border-right:1px solid #000; padding: 0 0 lem 0; margin-bo

3、ttom:lem; font-family:f,Courier New，Courier,monospace; font-size:13px;background-color:#ff9933; color:#0000000;#button ul list-style:none; margin:0; padding:0; border:none;#button li margin:0; border-bottom-width:1 px; border-bottom-style:solid; border-bottomcolor*:#ffffOO;#button li a display:block

4、;padding:5px 5px 0.5em; background-color:#ff9933;color:#fff; text-decoration:none;width:100%; border-right-width:1 Opx; border-left-width:px; border- right-style:solid; border-left-style:solid; border-right-color:#ffccOO; border-left-color:#ffccOO;htmlbody #button li a width:auto;)#button li a:hover background- color:#ffcc00; colorborder-right- width:1 Opx; border-left-width:px; border-right-style:solid; border-left- style:solid; border-right-color:#ffOOff; border-left-color:#ffOOff; vh1湖南铁道职业职业技术学院v/h1   竖向导航菜单v/b lixa 学