导航栏的多样设置简单实例
导航栏的多样设置简单实例
发布时间:2016-12-27 来源:查字典编辑
摘要:注意:觉得简单的人,别说话,悄悄的。。。。我也纯属是记录网页默认存在margin值和padding值,并且后面的元素对margin、padd...

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

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

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

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

举一个例子:(就是因为这一个原因,累死宝宝了,想法是挺符合逻辑的,不过就是不是你想要的)

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

以下是代码部分

XML/HTML Code复制内容到剪贴板 <divclass="nav"> <ul> <li><ahref="#">评论</a></li> <li><ahref="#">问答</a></li> <li><ahref="#">笔记</a></li> <li><ahref="#">同学代码</a></li> </ul> </div>

css样式

CSS Code复制内容到剪贴板 *{ margin:0px; padding:0px; } .nav{ border-bottom:1pxsolid#c0c0c0; width:1000px; height:60px; margin-left:40px; //background-color:#c3ffdd; } ulli{ list-style-type:none; width:120px; float:left; } lia{ display:block; text-decoration:none; color:black; font-family:"微软雅黑"; text-align:center; line-height:60px; } lia:hover,lia:active{ color:#f00; } lia:focus{ border-bottom:2pxsolid#f00; }

效果图

导航栏的多样设置简单实例1

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

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

原文地址:http://www.cnblogs.com/king-ying/archive/2016/05/19/5509276.html

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新 Div+Css教程学习
热门 Div+Css教程学习
网页设计子分类