一个简单的导航菜单
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
一个简单的导航菜单【原创】
分类导航菜单是网上常见的效果，特别是在购物类网站和博客类网站上，几乎都有出现。
对于一个HTML和CSS初学者来说，看到这么多漂亮的导航菜单，无不有点心动，更欲有亲自动手尝试的冲动，但由于CSS的知识掌握的不够全面或了解的不够深入，往往做出来的效果不尽人意，涂生遗憾。
下面为大家带来一个简单的导航菜单的制作心得。
开始前必须先了解几个重要的CSS样式属性：
1. margin：定义元素的外边距
2. padding：定义元素的内边距
3. display：定义元素的显示样式，取值为
inline：表示行内元素，对于行内元素不能通过width和height来设置宽和高，宽和高由元素的内容和padding决定。
block：表示块元素，可以通过width和height来设置宽和高，默认的宽度会填满整个父元素。
4. line-height：设置文字的行高，通过设置该样式，可使文字在一定的高度内垂直居中。
5. float：使元素具有浮动效果，设置了float样式的元素，都可以通过width和height来设置宽和高，并且多个元素可在同一行出现（行内）
好了，搞懂了上面的CSS属性，将它们相互配合就很容易搞定导航菜单啦。。。。
全部代码如下：
效果如下：
赶快动手尝试一下吧。。。。。。。。。
欢迎mail我：373376253@qq.coom