如何在這種情況下使文字像徽標？

看到這裏我的網站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 ...

我們能做到嗎？

來源

2016-04-27 Tum

我們能做到這一點？

當然這裏是一個例子如何做到這一點;

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>

來源

2016-04-27 18:26:10

我打算假設你知道如何顯示文本和樣式，如果你需要我解釋，就這麼說吧。

這留下了標誌居中與「家」的問題。你有兩個選擇這樣做

1）保證金

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

這將轉移.logo高達20像素。根據需要調整邊距以正確居中。

2）位置

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

這做同樣的事情，但使用的定位，而不是利潤。這個選項在減少hacky CSS方面更好。

來源

2016-04-27 17:59:23 amflare

是的，您可以使用<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>

來源

2016-04-27 18:04:18 johnniebenson

如何在這種情況下使文字像徽標？

回答

相關問題