この場合、ロゴのようにテキストを作成する方法は？

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

テキストを表示してスタイルを設定する方法を知っていると仮定します。説明が必要な場合は、そのようにしてください。

これは、ロゴを「ホーム」にセンタリングする問題を残します。あなたは、これが20ピクセルまで.logoをシフトします。この

1）マージン

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

を行うための2つのオプションがあります。適切に中心を合わせるために必要に応じて余白を調整します

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>