数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用 CSS 创建具有左对齐和右对齐链接的导航栏？
要使用 CSS 创建一个具有左对齐和右对齐链接的导航栏，用户应该对 CSS 弹性盒布局 有基本的了解。首先，我们将使用 HTML 创建包含五个链接的导航栏结构，然后我们将使用 CSS 设计导航栏并将链接对齐到导航栏的左侧和右侧，并应用弹性盒布局属性以确保链接的正确定位。
我们有一个包含五个链接的导航菜单，我们的任务是使用 CSS 创建一个具有左对齐和右对齐链接的导航栏。在本文中，我们将实施以下步骤来使用 CSS 创建具有左对齐和右对齐链接的导航栏
使用 HTML 创建导航菜单结构
以下是上述步骤的 HTML 实现
<body> <nav> <div class="left-links"> <a class="links selected" href="/index.htm" target="_blank">Home</a> <a class="links" href="/market/login.jsp" target="_blank"> Login</a> <a class="links" href="/market/index.asp" target="_blank"> Courses</a> </div> <div class="right-links"> <a class="links" href="/about/contact_us.htm" target="_blank"> Contact Us</a> <a class="links" href="/latest/certifications" target="_blank">Certification</a> </div> </nav> <h3> To create a navigation bar with left-aligned and right-aligned links with CSS </h3> <p>Click on the above links to explore our website <span>TutorialsPoint</span>. </p> </body>
使用 CSS 对齐链接
- 我们使用了 nav 类来设计导航栏。我们使用了 display 属性来应用弹性盒布局，使用 CSS position 和 top 属性将导航栏固定在顶部。
- 然后，我们使用 CSS width 设置了尺寸，使导航栏使用整个宽度，并使用 background-color 和 color 属性设置导航栏的外观。
- 在下一步中，我们使用了 left-links 类来设置 flex-grow、flex-shrink 和 flex-basis 属性，使用 flex 简写表示法。这将“主页”、“登录”和“注册”链接设置为左侧，其中左侧弹性项目的初始长度设置为 200px。
- 然后，我们为 links 类中的所有链接应用了样式，其中我们设置了其 font-family、font-size，应用了 padding，使用 text-decoration 去除了链接的下划线，并使用 text-align 属性居中对齐。
- 最后，我们设置了悬停时链接的颜色和 span 标签的文本颜色。
以下是上述步骤的 CSS 实现
body {
margin: 0px;
margin-top:60px;
}
nav {
display: flex;
position: fixed;
top: 0;
width: 100%;
background-color: #031926;
color: white;
overflow: auto;
height: auto;
}
.left-links {
flex: 1 1 200px;
}
.links {
font-family: Verdana, sans-serif;
display: inline-block;
text-align: center;
padding: 14px;
color: white;
text-decoration: none;
font-size: 15px;
}
.links:hover {
background-color: #04af2f;
}
span {
color: #04af2f;
}
完整示例代码
以下是使用 CSS 创建具有左对齐和右对齐链接的导航栏的完整示例代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
body {
margin: 0px;
margin-top:60px;
}
nav {
display: flex;
position: fixed;
top: 0;
width: 100%;
background-color: #031926;
color: white;
overflow: auto;
height: auto;
}
.left-links {
flex: 1 1 200px;
}
.links {
font-family: Verdana, sans-serif;
display: inline-block;
text-align: center;
padding: 14px;
color: white;
text-decoration: none;
font-size: 15px;
}
.links:hover {
background-color: #04af2f;
}
span {
color: #04af2f;
}
</style>
</head>
<body>
<nav>
<div class="left-links">
<a class="links selected" href="/index.htm"
target="_blank">Home</a>
<a class="links" href="/market/login.jsp"
target="_blank"> Login</a>
<a class="links" href="/market/index.asp"
target="_blank"> Courses</a>
</div>
<div class="right-links">
<a class="links" href="/about/contact_us.htm"
target="_blank"> Contact Us</a>
<a class="links" href="/latest/certifications"
target="_blank">Certification</a>
</div>
</nav>
<h3>
To create a navigation bar with left-aligned and
right-aligned links with CSS
</h3>
<p>Click on the above links to explore our website
<span>TutorialsPoint</span>.
</p>
</body>
</html>
结论
在本文中，我们学习并了解了如何使用 CSS 创建具有左对齐和右对齐链接的导航栏。我们使用 HTML 使用 nav、div 和 anchor 标签创建导航栏的结构，并应用 CSS 弹性盒布局 属性来实现链接的左右对齐。弹性盒布局使设计具有响应性。
更新于：2024年9月5日
11K+ 浏览量
广告