您现在的位置是：网站首页> 编程资料编程资料

导航栏的多样设置简单实例_CSS教程_CSS_网页制作_

2021-09-13 1083人已围观

简介下面小编就为大家带来一篇导航栏的多样设置简单实例。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

注意：觉得简单的人，别说话，悄悄的。。。。我也纯属是记录

网页默认存在margin值和padding值，并且后面的元素对margin、padding的修改过程中并不会生效，因此在样式设置过程中首先对所有的元素的margin和padding值清0；

代码：*{padding：0px;margin:0px;} //*号代表所有

可以在后面的元素上设置你想要的margin和padding值，都会生效；

举一个例子：（就是因为这一个原因，累死宝宝了，想法是挺符合逻辑的，不过就是不是你想要的）

我是仿照imooc网站的的导航做的（全当练手，因为我是新手，什么都想试一试）

以下是代码部分

XML/HTML Code复制内容到剪贴板

css样式

CSS Code复制内容到剪贴板

效果图

先前我是死活标签hover的设置内容顶不到下边框的最左边，设置完代码后就可以了

以上这篇导航栏的多样设置简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。