如何实现首页顶部导航栏，导航栏左侧logo和网站名称在同一行，导航栏右侧为登录按钮

实现首页顶部导航栏可以通过HTML和CSS来完成。

首先，在HTML中创建一个顶部导航栏的容器，如一个div元素：

<div class="top-nav-container">
  <div class="logo-container">
    <img src="logo.png" alt="Logo">
    <h1>网站名称</h1>
  </div>
  <button class="login-button">登录</button>
</div>

接着，使用CSS来设置顶部导航栏的样式，包括布局、颜色、字体等：

.top-nav-container {
  display: flex; /* 使用flex布局 */
  justify-content: space-between; /* 左右对齐 */
  align-items: center; /* 垂直居中 */
  background-color: #333; /* 背景色 */
  color: #fff; /* 字体颜色 */
  padding: 10px; /* 内边距 */
}

.logo-container {
  display: flex; /* 使用flex布局 */
  align-items: center; /* 垂直居中 */
}

.logo-container img {
  width: 50px; /* logo宽度 */
  height: auto; /* 自适应高度 */
  margin-right: 10px; /* logo与网站名称之间的间距 */
}

.logo-container h1 {
  font-size: 24px; /* 字体大小 */
  font-weight: bold; /* 字体粗细 */
  margin: 0; /* 去掉网站名称的上下间距 */
}

.login-button {
  background-color: #fff; /* 背景色 */
  color: #333; /* 字体颜色 */
  border: none; /* 去掉边框 */
  padding: 8px 16px; /* 内边距 */
  font-size: 16px; /* 字体大小 */
  cursor: pointer; /* 鼠标样式 */
}

这样就可以实现顶部导航栏，其中logo和网站名称使用flex布局在同一行，登录按钮在导航栏右侧。