2016-04-27 9 views
0

Sehen Sie meine Website hier http://1-dot-speaklikewater.appspot.comWie man Text wie Logo in diesem Fall bildet?

und den Code

<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; 
} 

Das ist in Ordnung, aber die Bildqualität ist nicht gut, weil, wenn Benutzer verwischt die Seite das Bild bekam vergrößern.

Nein, ich möchte kein Bild als Logo verwenden. Ich möchte Text wie ein Logo verwenden.

Können Sie genau die gleiche Sache wie die obige Website tun, aber diesmal verwenden wir anstelle von Bild für Logo. Also sollte es so aussehen, aber die Mitte von "Home" und die Mitte des Textlogos sollten auf der gleichen Linie sein?

 
SpeakLike 
Water.com Home ... 

Können wir das erreichen?

Antwort

1

Können wir das erreichen?

Sicher hier ist ein Beispiel, wie man das macht;

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>

0

Ich gehe davon aus, dass Sie wissen, wie man Text anzeigt und formatiert, wenn Sie mich erklären müssen, sagen Sie es einfach.

Dies lässt das Problem der Zentrierung des Logos mit "Home". Sie haben zwei Möglichkeiten dieses

1) Margin

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

Dies verschiebt die .logo bis 20px zu tun. Passen Sie den Rand nach Bedarf an, um ihn richtig zu zentrieren.

2) Position

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

Dies macht das Gleiche, aber verwendet Positionierung statt Margen. Diese Option ist besser in Bezug auf weniger Hacky CSS.

0

Ja, Sie können ein <h1> Element verwenden und den Text entsprechend formatieren (Sie können sogar Webfonts verwenden, wenn Sie möchten). Etwas wie:

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>

Verwandte Themen