手把手教会你导航栏的多样设置
来源：爱站网时间：2020-09-11编辑：网友分享
你会在CSS中实现导航栏的多样设置吗？今天小编就来简单的给大家分享下案例，给大家做个参考，随爱站技术频道小编看看吧！
你会在CSS中实现导航栏的多样设置吗？今天小编就来简单的给大家分享下案例，给大家做个参考，随爱站技术频道小编看看吧！
网页默认存在margin值和padding值，并且后面的元素对margin、padding的修改过程中并不会生效，因此在样式设置过程中首先对所有的元素的margin和padding值清0；
代码：*{padding：0px;margin:0px;} //*号代表所有
可以在后面的元素上设置你想要的margin和padding值，都会生效；
举一个例子：（就是因为这一个原因，累死宝宝了，想法是挺符合逻辑的，不过就是不是你想要的）
我是仿照imooc网站的的导航做的（全当练手，因为我是新手，什么都想试一试）
以下是代码部分
XML/HTML Code复制内容到剪贴板
- div class="nav">
- ul>
- li>a href="#">评论a>li>
- li>a href="#">问答a>li>
- li>a href="#">笔记a>li>
- li>a href="#">同学代码a>li>
- ul>
- div>
css样式
CSS Code复制内容到剪贴板
- *{
- margin:0px;
- padding:0px;
- }
- .nav{
- border-bottom:1px solid #c0c0c0;
- width:1000px;
- height:60px;
- margin-left:40px;
- //background-color:#c3ffdd;
- }
- ul li{
- list-style-type:none;
- width:120px;
- float:left;
- }
- li a{
- display:block;
- text-decoration:none;
- color:black;
- font-family:"微软雅黑";
- text-align:center;
- line-height:60px;
- }
- li a:hover,li a:active{
- color:#f00;
- }
- li a:focus{
- border-bottom:2px solid #f00;
- }
效果图
先前我是死活标签hover的设置内容顶不到下边框的最左边，设置完代码后就可以了
以上这篇导航栏的多样设置的案例就是小编分享给大家的内容了，喜欢这篇文章的话，希望大家多多支持爱站技术频道。
上一篇：CSS实现小三角的方法
下一篇：浅析响应式Web里的流式网格系统
