CSS导航栏(垂直导航栏、水平导航栏)

CSS导航栏(垂直导航栏、水平导航栏)

图片.png

导航栏
易用的导航对于任何网站都很重要。
通过使用 CSS,您可以将无聊的 HTML 菜单转换为美观的导航栏。

导航栏 = 链接列表
导航栏需要标准 HTML 作为基础。
在我们的实例中,将用标准的 HTML 列表构建导航栏。
导航栏基本上就是链接列表,因此使用 <ul> 和 <li> 元素会很有意义:
实例

图片.png

<!DOCTYPE html>
<html>
<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>
<p class="note"><span>注释:</span>我们将 href="#" 用于测试链接。在实际的网站中,用的是 URL。</p>
</body>
</html>
现在,从列表中删除项目符号以及外边距和内边距(填充):

图片.png

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

</style>
</head>
<body>
<p>在此例中,我们从列表中删除了项目符号及其默认的内边距和外边距。</p>
<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>

例子解释:
list-style-type: none; - 删除项目符号。导航条不需要列表项标记。
设置 margin: 0; 和 padding: 0; 删除浏览器的默认设置。


1、本站资源长期持续更新。
2、本资源基本为原创,部分来源其他付费资源平台或互联网收集,如有侵权请联系及时处理。
3、本站大部分文章的截图来源实验测试环境,请不要在生产环境中随意模仿,以免带来灾难性后果。

转载请保留出处:  www.zh-cjh.com珠海陈坚浩博客 » CSS导航栏(垂直导航栏、水平导航栏)

作者: cjh


手机扫一扫,手机上查看此文章:

一切源于价值!

其他 模板文件不存在: ./template/plugins/comment/pc/index.htm

未雨绸缪、居安思危!

数据安全、有备无患!

注意操作、数据无价!

一切源于价值!