如何实现首页顶部导航栏,导航栏左侧为logo和网站名称,导航栏右侧为登录按钮
时间: 2023-06-19 21:03:00 浏览: 84
实现首页顶部导航栏可以使用HTML和CSS,以下是一个简单的实现示例:
HTML代码:
```
<header>
<div class="logo">
<a href="#"><img src="logo.png" alt="Logo"></a>
<h1>网站名称</h1>
</div>
<div class="login">
<a href="#">登录</a>
</div>
</header>
```
CSS代码:
```
header {
background-color: #fff;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
height: 60px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
}
.logo img {
height: 40px;
}
.logo h1 {
margin: 0;
font-size: 24px;
font-weight: bold;
color: #333;
margin-left: 10px;
}
.login a {
display: inline-block;
background-color: #333;
color: #fff;
padding: 10px 20px;
border-radius: 5px;
text-decoration: none;
}
.login a:hover {
background-color: #555;
}
```
解释:
- 使用`<header>`标签来定义头部导航栏。
- 使用`<div class="logo">`来包裹logo和网站名称。
- 使用`<div class="login">`来包裹登录按钮。
- 使用CSS的`display: flex`属性来实现水平居中和分布两侧的布局。
- 使用CSS的`box-shadow`属性来添加阴影效果。
- 使用CSS的`background-color`属性来设置背景色。
- 使用CSS的`justify-content`属性来定义水平对齐方式。
- 使用CSS的`align-items`属性来定义垂直对齐方式。
- 使用CSS的`padding`属性来设置内边距。
- 使用CSS的`border-radius`属性来设置圆角。
- 使用CSS的`text-decoration`属性来去除链接下划线。
- 使用CSS的`:hover`伪类来设置鼠标悬停效果。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)