本篇文章主要给大家介绍关于如何用css做导航栏的相关知识,希望对有需要的朋友有所帮助。对于任何一个网站来说,导航栏的存在是至关重要的,那么如果仅仅只是用html做出枯燥乏味的导航菜单,效果肯定是不佳的。这时css属性的重要性就体现出来了。
下面给大家列举出css导航代码的具体示例:垂直导航栏
css垂直导航代码示例
ul
{
list-style-type:none;
margin:0;
padding:0;
}
a
{
display:block;
width:60px;
background-color:#dddddd;
}
HomeNewsContactAbout
以上效果如下图:
2.水平导航栏
css水平导航栏代码示例
ul
{
list-style-type:none;
margin:0;
padding:0;
}
li
{
display:inline;
}
HomeNewsContactAbout
效果如下图:
这里主要涉及到的重要知识:
display:其 属性规定元素应该生成的框的类型。这个属性是用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型,如果使用 display 不谨慎会很危险,因为可能违反 HTML 中已经定义的显示层次结构。对于 XML,由于 XML 没有内置的这种层次结构,所有 display 是绝对必要的。
display:inline; -在默认情况下,
元素是块元素。在这里,我们删除换行符之前和之后每个列表项,以显示一行 。
那么以上就是针对在网页中css导航怎么做的这个问题进行了相关介绍,具有一定的参考价值。希望对大家有所帮助。
如果觉得《php导航条css代码生成器 怎么使用css代码制作网站导航栏?(示例)》对你有帮助,请点赞、收藏,并留下你的观点哦!