纵享丝滑！CSS课程网站横版导航栏打造指南

前端

2022-12-05 23:37:17

打造专业且实用的 CSS 课程网站横版导航栏

在当今信息爆炸的互联网时代，网站作为企业或个人的线上门面，其设计和功能性至关重要。清晰明了的导航栏不仅能提升用户体验，更能为网站带来专业感和美观度。本文将为你详细解析横版导航栏的测量、样式和代码示例，助你轻松打造网站导航的专业与便捷！

一、横版导航栏的测量及样式

1、总体盒子测量及样式

宽度：与网站内容区域宽度一致，保持协调性。
高度：通常在 30px 到 50px 之间，取决于元素数量和字体大小。
背景颜色：与网站整体风格一致，形成鲜明对比，便于识别。

2、左侧盒子测量及样式

宽度：根据 Logo 或网站名称长度确定。
高度：与总体导航栏高度相同，保证统一性。
文字样式：与网站整体风格一致，清晰易读。

3、中间盒子测量及样式

宽度：根据导航菜单项目数量和长度确定。
高度：与总体导航栏高度相同，保持统一性。
菜单项样式：统一样式，确保简洁性和一致性。

4、右侧盒子测量及样式

宽度：根据登录按钮、搜索框或社交媒体图标尺寸确定。
高度：与总体导航栏高度相同，保持统一性。
元素样式：与网站整体风格一致，与导航菜单项有所区分。

二、横版导航栏代码示例

1、HTML 标签结构

<div class="navbar">
  <div class="navbar-left">
    <a href="#" class="navbar-logo">Logo</a>
  </div>
  <div class="navbar-center">
    <ul class="navbar-menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
  <div class="navbar-right">
    <a href="#" class="navbar-login">Login</a>
    <form class="navbar-search">
      <input type="text" placeholder="Search">
      <button type="submit">Search</button>
    </form>
  </div>
</div>

2、CSS 样式

/* 导航栏总体样式 */
.navbar {
  width: 100%;
  height: 50px;
  background-color: #333;
}

/* 左侧盒子样式 */
.navbar-left {
  float: left;
  width: 200px;
  height: 50px;
}

/* 左侧盒子Logo样式 */
.navbar-logo {
  font-size: 24px;
  color: #fff;
}

/* 中间盒子样式 */
.navbar-center {
  float: left;
  width: calc(100% - 200px - 200px);
  height: 50px;
}

/* 中间盒子菜单样式 */
.navbar-menu {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

/* 中间盒子菜单项样式 */
.navbar-menu li {
  float: left;
  margin-right: 20px;
}

/* 中间盒子菜单项链接样式 */
.navbar-menu li a {
  font-size: 16px;
  color: #fff;
  text-decoration: none;
}

/* 中间盒子菜单项链接悬停样式 */
.navbar-menu li a:hover {
  color: #ccc;
}

/* 右侧盒子样式 */
.navbar-right {
  float: right;
  width: 200px;
  height: 50px;
}

/* 右侧盒子登录按钮样式 */
.navbar-login {
  font-size: 16px;
  color: #fff;
  text-decoration: none;
}

/* 右侧盒子登录按钮悬停样式 */
.navbar-login:hover {
  color: #ccc;
}

/* 右侧盒子搜索框样式 */
.navbar-search {
  float: right;
  margin-right: 20px;
}

/* 右侧盒子搜索框输入框样式 */
.navbar-search input {
  width: 150px;
  height: 25px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

/* 右侧盒子搜索框按钮样式 */
.navbar-search button {
  width: 50px;
  height: 25px;
  background-color: #333;
  color: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
}