Question

请在此处查看我的网站http://1-dot-speaklikewater.appspot.com

和代码

<img style="vertical-align: middle;" src="speaklikewaterlogo.png" />
<a href='index.jsp' class='linkButton' >Home</a>


 .linkButton:link, .linkButton:visited {
    background-color: white;
    color: black;
    border: 2px solid green;
    padding: 7.5px 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

.linkButton:hover, .linkButton:active {
    background-color: green;
    color: white;
}

这没关系，但图像质量不好，因为当用户放大页面时图像变得模糊。

不，我不想使用图片作为徽标。我想像徽标一样使用Text。

你可以做与上述网站完全相同的事情，但这次我们使用Text代替图片作为徽标。所以看起来应该是这样，但是“Home”的中间和文本标识的中间应该在同一条线上？

SpeakLike
Water.com  Home ...

我们能实现吗？

Answer 1

我们能实现吗？

当然这是一个如何做到这一点的例子;

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  display: inline-block;
  line-height: 44px;
  vertical-align: middle;
}

li a {
  background-color: white;
  color: black;
  border: 2px solid green;
  padding: 7.5px 15px;
  text-align: center;
  text-decoration: none;
  display: block;
  line-height: 1;
  font-weight: bold;
}

.logo-box {
  margin-right: 10px;
}

.logo-line {
  display: block;
  line-height: 22px;
  color: #D42424;
  font-weight: bold;
}

<ul>
  <li>
    <div class="logo-box">
      <span class="logo-line">SpeakLike</span>
      <span class="logo-line">Water.com</span>
    </div>
  </li>
  <li><a href="index.jsp" class="linkButton">Home</a></li>
  <li><a href="onlineUser.jsp" class="linkButton">Online Users</a></li>
  <li><a href="method.jsp" class="linkButton">Method</a></li>
  <li><a href="lesson.jsp" class="linkButton">Lesson</a></li>
  <li><a href="conversation.jsp" class="linkButton">Conversation</a></li>
  <li><a href="register.jsp" class="linkButton">Register</a></li>
  <li><a href="login.jsp" class="linkButton">Login</a></li>
</ul>

Answer 2

如果您需要我解释，我会假设您知道如何显示文字和样式，只是这样说。

这就留下了以“Home”为中心的问题。你有两个选择来做这个

1）保证金

.logo {
  margin-top: -20px;
}

这会使.logo向上移动20px。根据需要调整边距以正确居中。

2）职位

.logo {
  position: relative;
  top: -20px
}

这也是一样，但使用的是定位而不是边距。在具有较少hacky CSS方面，此选项更好。

Answer 3

是的，您可以使用<h1>元素并相应地设置文本样式（如果您愿意，甚至可以使用Web字体）。类似的东西：

h1 {
  color: #cc0000;
  font-family: "Times New Roman", serif;
  width: 100px;
  word-wrap: break-word;
  font-size: 20px;
  float: left;
}

ul {
  list-style-type: none;
  position: relative;
  top: 30px;
}

ul li {
  float: left;
  margin: 0 10px;
}

<h1>SpeakLikeWater.com</h1>

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Lorem</a></li>
    <li><a href="#">Ipsum</a></li>
    <li><a href="#">Dolor</a></li>
  </ul>
</nav>

在这种情况下如何制作像徽标一样的文字？

3 个答案: