一个简单的导航菜单.docVIP

一个简单的导航菜单. 一个简单的导航菜单. PAGE / NUMPAGES 一个简单的导航菜单. 一个简单的导航菜单【原创】 分类导航菜单是网上常见的效果，特别是在购物类网站和博客类网站上，几乎都有出现。 对于一个 HTML 和 CSS 初学者来说，看到这么多漂亮的导航菜单，无不有点心动，更欲有亲自动手尝试的冲动，但由于 CSS的知识掌握的不够全面或了解的不够深入，往往做出来的效果不尽人意，涂生遗憾。下面为大家带来一个简单的导航菜单的制作心得。 开始前必须先了解几个重要的 CSS样式属性： 1. margin：定义元素的外边距 2. padding：定义元素的内边距 3. display：定义元素的显示样式，取值为 inline ：表示行内元素，对于行内元素不能通过 width 和 height 来设置宽和高，宽 和高由元素的内容和 padding决定。 block：表示块元素，可以通过 width 和 height 来设置宽和高，默认的宽度会填满整个父元素。 line-height：设置文字的行高，通过设置该样式，可使文字在一定的高度内垂直居中。 5. float：使元素具有浮动效果，设置了 float 样式的元素，都可以通过 height 来设置宽和高，并且多个元素可在同一行出现（行内） 好了，搞懂了上面的 CSS属性，将它们相互配合就很容易搞定导航菜单 啦。。。。 全部代码如下：  width 和 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head title new document /title meta name=generator content=editplus / meta name=author content= / meta name=keywords content= / meta name=description content= / style type=text/css ul{ margin:0; padding:0; list-style:none; } div.menu{ background:#fe2216; height:30px; } div.menu li{ float:left; /* 使垂直的 li 变成水平的 */ width:80px; } div.menu li a{ line-height:30px; /* 使文字垂直居中 */ text-decoration:none; display:block; /* 使 a 填满整个 li 元素 */ color:#fff; text-align:center; font-weight:bold; } /* 鼠标悬浮在超链接上时，改变背景 */ div.menu li a:hover{ background:#7f7f7f; } /style /head body div id= class=menu ul lia href= 首页 /a/li lia href= 运动鞋 /a/li lia href= 服装 /a/li lia href= 包包 /a/li lia href= 男鞋 /a/li lia href= 女鞋 /a/li /ul /div /body /html 效果如下： 赶快动手尝试一下吧。。。。。。。。。 欢迎 mail 我：