Question

我的目标是在3个导航栏链接的左上角放置我的徽标。我当然要HTML文件和CSS样式表！

谢谢

<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top">
<div class="container">
<a class="navbar-brand" href="#">
<img src="/1.png" alt="Plug" height="250" width="250">
          </a>

家（当前）关于服务联系

Answer 1

我早些时候告诉我，我不会为您编写代码。我想我很无聊，反正为您编写了一个代码段。希望它对您的项目有所帮助！

body{
/*SO relevant*/
font-family:Helvetica, sans serif;
background:gray;
/*Important*/
margin:0;
}
#content{
/*SO relevant*/
background:#121212;
color:white;
padding:5px;
/*Important*/
margin-top:35px;/*Navbar height+padding x 2*/
}
#navbar{
/*Important*/
height:35px;
position:fixed;
top:0;
width:100%;
/*SO relevant*/
background:white;
}
.navbar-box{
/*Important*/
height:25px;/*Height minus padding x2*/
padding:5px;
display:inline-block;
}
.navbar-box:hover{
/*SO relevant*/
background:gray;
color:white;
}
.l{
/*If you want your links to be to the right*/
float:right;
}
.l a{
/*So relevant*/
text-decoration:none;
color:black;
/*Important*/
display:block;
height:35px;
}
.l:hover > a{
/*If your want your links to hover white*/
color:white;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="navbar">
<div class="navbar-box">LOGO</div>

<div class="navbar-box l">
<a href="javascript:void(0);">link #3</a>
</div>

<div class="navbar-box l">
<a href="javascript:void(0);">link #2</a>
</div>

<div class="navbar-box l">
<a href="javascript:void(0);">link #1</a>
</div>

</div>
<div id="content">
page content goes here...<br>some text to enable scrolling...<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text
</div>
</body>
<html>

Answer 2

body{
/*SO relevant*/
font-family:Helvetica, sans serif;
background:gray;
/*Important*/
margin:0;
}
#content{
/*SO relevant*/
background:#121212;
color:white;
padding:5px;
/*Important*/
margin-top:35px;/*Navbar height+padding x 2*/
}
#navbar{
/*Important*/
height:35px;
position:fixed;
top:0;
width:100%;
/*SO relevant*/
background:white;
}
.navbar-box{
/*Important*/
height:25px;/*Height minus padding x2*/
padding:5px;
display:inline-block;
}
.navbar-box:hover{
/*SO relevant*/
background:gray;
color:white;
}
.l{
/*If you want your links to be to the right*/
float:right;
}
.l a{
/*So relevant*/
text-decoration:none;
color:black;
/*Important*/
display:block;
height:35px;
}
.l:hover > a{
/*If your want your links to hover white*/
color:white;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="navbar">
<div class="navbar-box">LOGO</div>

<div class="navbar-box l">
<a href="javascript:void(0);">link #3</a>
</div>

<div class="navbar-box l">
<a href="javascript:void(0);">link #2</a>
</div>

<div class="navbar-box l">
<a href="javascript:void(0);">link #1</a>
</div>

</div>
<div id="content">
page content goes here...<br>some text to enable scrolling...<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text
</div>
</body>
<html>

如何编写在左上角带有网站徽标的NavBar :)

2 个答案: