我尝试将导航栏品牌定位在左侧,以更改字体和大小,并且应该是可单击的文本,并在右侧进行导航。我试图添加一个div或class ID,但无法正常工作。
我尝试将其放在li中,但我不知道这是否有所不同,因为我需要对正确的导航栏进行分类,以便我可以主动对其进行样式设置。
html {
max-width: 1024px;
min-width: 320px;
}
body {
max-width: 1024px;
min-width: 320px;
margin-left: auto;
margin-right: auto;
font-family: arial;
}
/*Navbar*/
/* Add a black background color to the top navigation */
.logo {
padding-top: 10px;
}
.topnav {
padding-top: 10px;
padding-bottom: 10px;
}
/* Style the links inside the navigation bar */
.topnav a {
font-family: 'Roboto Condensed', sans-serif;
list-style-type: none;
text-align: center;
display: inline;
font-size: 17px;
text-decoration: none;
color: #1d1d1d;
padding: 10px;
}
/* Change the color of links on hover */
.topnav a:hover {
color: red;
}
/* Add a color to the active/current link */
.topnav a.active {
color: red;
}
/* Right-aligned section inside the top navigation */
.topnav-right {
float: right;
}
/*Navbar end*/
<body>
<!--Header-->
<header>
<!--Logo-->
<div class="topnav">
<div class="topnav-right">
<a href="selectTopic?html" class="topic">HTML 5</a>
<a class="active" href="#home">Home</a>
<a href="#search">Blog</a>
<a href="#search">About</a>
<a href="#search">FAQ</a>
<a href="#about">Contact</a>
</div>
</div>
</div>
</header>