CSS导航栏(垂直导航栏、水平导航栏)
CSS导航栏(垂直导航栏、水平导航栏)
导航栏
易用的导航对于任何网站都很重要。
通过使用 CSS,您可以将无聊的 HTML 菜单转换为美观的导航栏。
导航栏 = 链接列表
导航栏需要标准 HTML 作为基础。
在我们的实例中,将用标准的 HTML 列表构建导航栏。
导航栏基本上就是链接列表,因此使用 <ul> 和 <li> 元素会很有意义:
实例
<!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>
现在,从列表中删除项目符号以及外边距和内边距(填充):
<!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; 删除浏览器的默认设置。
2、本资源基本为原创,部分来源其他付费资源平台或互联网收集,如有侵权请联系及时处理。
3、本站大部分文章的截图来源实验测试环境,请不要在生产环境中随意模仿,以免带来灾难性后果。
转载请保留出处: www.zh-cjh.com珠海陈坚浩博客 » CSS导航栏(垂直导航栏、水平导航栏)
作者: cjh
手机扫一扫,手机上查看此文章: |
一切源于价值!
其他 模板文件不存在: ./template/plugins/comment/pc/index.htm