左侧 CSS 徽标和右侧导航 - CSS

介绍

在网页设计中，CSS徽标和导航经常被用来指引用户，提高用户体验。本文介绍如何使用CSS实现左侧CSS徽标和右侧导航功能。

CSS徽标

CSS徽标一般出现在网页的左侧，可以让用户快速了解该网页使用的CSS样式。

HTML结构

CSS徽标可以使用一张图片实现，也可以使用HTML标签和CSS样式实现。以下是使用HTML标签和样式实现效果的代码片段：

<div class="css-logo">
  <span>CSS</span>
</div>

CSS样式

.css-logo {
  position: fixed;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  background-color: #0070ba;
  color: #fff;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  line-height: 50px;
  border-radius: 0 0 10px 0;
  z-index: 999;
}
.css-logo span {
  display: block;
  transform: rotate(-90deg);
  transform-origin: bottom left;
  margin-top: 35px;
  margin-left: -16px;
}

效果

CSS徽标的效果如下所示：

导航

网页的导航通常出现在页面的顶部，用来引导用户浏览网页的不同内容。以下是如何使用HTML和CSS实现一个简单的导航功能。

HTML结构

导航可以使用HTML的<ul>和<li>标签实现，以下是一个简单的导航结构的代码片段：

<nav>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">服务</a></li>
    <li><a href="#">关于</a></li>
    <li><a href="#">联系</a></li>
  </ul>
</nav>

CSS样式

以下是一个简单的导航样式的代码片段：

nav {
  height: 50px;
  background-color: #333;
  font-size: 0;
}
nav ul {
  height: 50px;
  display: inline-block;
  list-style: none;
  margin: 0;
  padding: 0;
}
nav ul li {
  height: 50px;
  display: inline-block;
}
nav ul li a {
  display: inline-block;
  height: 50px;
  line-height: 50px;
  padding: 0 20px;
  font-size: 16px;
  color: #fff;
  text-decoration: none;
}
nav ul li a:hover {
  color: #0070ba;
}

效果

导航的效果如下所示：