垂直二级导航菜单用div+CSS架构实例.docVIP

垂直二级导航菜单用div+CSS架构实例 导航的结构 导航的本质是让浏览者更好的访问你的网站,所以要建立有意义的语义.使CSS和语义相符合,为了以后方便维护，注意要避免现有浏览器的不兼容。 解决方案 下面是导航的HTML和CSS的代码,效果如图. 这是创建导航的HTML代码 ========================= !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN /TR/xhtml1/DTD/xhtml1-strict.dtd html xmlns=/1999/xhtml lang=en-US head titleLists as navigation/title meta http-equiv=content-type content=text/html; charset=utf-8 / link rel=stylesheet type=text/css href=listnav1.css / /head body div id=navigation ul lia href=#Recipes/a/li lia href=#Contact Us/a/li lia href=#Articles/a/li lia href=#Buy Online/a/li /ul /div /body /html ============================ 使用CSS给上面代码添加效果 ===================== #navigation { width: 200px; } #navigation ul { list-style: none; margin: 0; padding: 0; } #navigation li { border-bottom: 1px solid #ED9F9F; } #navigation li a:link, #navigation li a:visited { font-size: 90%; display: block; padding: 0.4em 0 0.4em 0.5em; border-left: 12px solid #711515; border-right: 1px solid #711515; background-color: #B51032; color: #FFFFFF; text-decoration: none; } ====================== 分析:先创建一个无序列表的导航条,并做好导航链接. ======================== ul lia href=#Recipes/a/li lia href=#Contact Us/a/li lia href=#Articles/a/li lia href=#Buy Online/a/li /ul ======================== 然后用一个div把这个无序列表包含起来. =========================== div id=navigation ul lia href=#Recipes/a/li lia href=#Contact Us/a/li lia href=#Articles/a/li lia href=#Buy Online/a/li /ul /div ============================== 在浏览器中显示默认的样式. 接下来我们要做的第一件事是给这个div定义宽度. =================== #navigation { width: 200px; } ===================== 给列表添加样式,去掉默认的圆点和清除填充. ======================== #navigation ul { list-style: none; margin: 0; padding: 0; } ======================== 在浏览器中显示: 给li标签添加一个下划线 ========================== #navigation li { border-bottom: 1px solid #ED9F9F; } ============================== 给链接添加样式: =============================== #navigation li a:link, #navigation li a:visited { font-size: 90%; display: block; padding: 0.4em 0 0.4em 0.5em; bor