首页 / CSS / 怎么使用css代码制作网站导航栏？（示例）

怎么使用css代码制作网站导航栏？（示例）

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了怎么使用css代码制作网站导航栏？（示例），小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1661字，纯文字阅读大概需要3分钟。

内容图文

本篇文章主要给大家介绍关于如何用css做导航栏的相关知识，希望对有需要的朋友有所帮助。对于任何一个网站来说，导航栏的存在是至关重要的，那么如果仅仅只是用html做出枯燥乏味的导航菜单，效果肯定是不佳的。这时css属性的重要性就体现出来了。

下面给大家列举出css导航代码的具体示例：

  1. 垂直导航栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>css垂直导航代码示例</title> 
<style>
ul
{
    list-style-type:none;
    margin:0;
    padding:0;
}
a
{
    display:block;
    width:60px;
    background-color:#dddddd;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>

以上效果如下图：

怎么使用css代码制作网站导航栏？（示例） - 文章图片

2.水平导航栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>css水平导航栏代码示例</title> 
<style>
ul
{
    list-style-type:none;
    margin:0;
    padding:0;
}
li
{
display:inline;
}
</style>
</head>

<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>

效果如下图：

怎么使用css代码制作网站导航栏？（示例） - 文章图片

这里主要涉及到的重要知识：

display：其 属性规定元素应该生成的框的类型。这个属性是用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型，如果使用 display 不谨慎会很危险，因为可能违反 HTML 中已经定义的显示层次结构。对于 XML，由于 XML 没有内置的这种层次结构，所有 display 是绝对必要的。

display:inline; -在默认情况下，<li>元素是块元素。在这里，我们删除换行符之前和之后每个列表项，以显示一行 。

那么以上就是针对在网页中css导航怎么做的这个问题进行了相关介绍，具有一定的参考价值。希望对大家有所帮助。

以上就是怎么使用css代码制作网站导航栏？（示例）的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的怎么使用css代码制作网站导航栏？（示例）全部内容，希望文章能够帮你解决怎么使用css代码制作网站导航栏？（示例）所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/411569.html

来源：【匿名】