Как сделать текст как логотип в этом случае?

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 вместо изображения для логотипа. Таким образом, это должно выглядеть так, но середина «Главная» и середина текстового логотипа должны быть в одной строке?

 
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

Я собираюсь предположить, что вы знаете, как отображать текст и стилизовать его, если вам нужно, чтобы я объяснял, просто скажите это.

Это оставляет проблему с центрированием логотипа с помощью «Главная». У вас есть два варианта, чтобы сделать это

1) MARGIN

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

Это сместит .logo до 20px. При необходимости отрегулируйте маржу, чтобы правильно центрировать.

2) Положение

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

Это делает то же самое, но использует позиционирование вместо полей. Этот вариант лучше с точки зрения менее хакерского CSS.

Answer 3

Да, вы можете использовать элемент <h1> и начертить текст соответствующим образом (вы даже можете использовать веб-шрифты, если хотите). Что-то вроде:

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>