0
Ich versuche, ein Symbol oder .png rechts von dem Text "Benutzername" in einem Login-Feld für meine Website zu zeigen, aber ich kann es nicht angezeigt werden. Ich habe geübt, eine einfache HTML-Seite zu erstellen, und ich kann es auf dem Bildschirm einer einfachen Seite erscheinen lassen, aber ich kann es nicht neben "Benutzername" erscheinen lassen, wenn ich es mit meiner Login-Seite versuche. Ich habe versucht, Code für ein. Png und .ico neben dem "Benutzernamen" und in meiner .css-Datei unter dem zugehörigen Header, aber es kann nicht angezeigt werden. Die .png- und .ico-Dateien befinden sich im Stammordner. Ich habe eine Reihe von Tutorials gelesen und angeschaut, habe viele verschiedene Codebeispiele ausprobiert usw. Alle Vorschläge wären willkommen!Symbol in HTML wird nicht auf der Webseite angezeigt?
Ich habe versucht, ohne Glück diesen Code platzieren:
<img src = 'sunny.png' style='vertical-align: middle' />
Anmeldungs HTML-Code:
$(document).ready(function() {
\t $('#logo').addClass('animated fadeInDown');
\t $("input:text:visible:first").focus();
\t });
\t $('#username').focus(function() {
\t \t $('label[for="username"]').addClass('selected');
\t });
\t $('#username').blur(function() {
\t \t $('label[for="username"]').removeClass('selected');
\t });
\t $('#password').focus(function() {
\t \t $('label[for="password"]').addClass('selected');
\t });
\t $('#password').blur(function() {
\t \t $('label[for="password"]').removeClass('selected');
\t });body {
\t background: url("../images/photo_bg.jpg") no-repeat center center fixed;
\t background-size: cover;
\t font-size: 16px;
\t font-family: 'Lato', sans-serif;
\t font-weight: 300;
\t margin: 0;
\t color: #666;
}
/* Typography */
h1#title {
\t font-family: 'Roboto Slab', serif;
\t font-weight: 300;
\t font-size: 3.2em;
\t color: white;
\t text-shadow: 0 0 10px rgba(0,0,0,0.8);
\t margin: 0 auto;
\t padding-top: 180px;
\t max-width: 300px;
\t text-align: center;
\t position: relative;
\t top: 0px;
}
h1#title span span {
\t font-weight: 400;
}
h2 {
\t <img style='vertical-align:middle;' src='gmail.png' width="30">
<div style='vertical-align:middle; display:inline;'>
Your text here
</div>
\t text-transform: uppercase;
\t color: white;
\t font-weight: 400;
\t letter-spacing: 1px;
\t font-size: 1.4em;
\t line-height: 2.8em;
}
a {
\t text-decoration: none;
\t color: #666;
}
a:hover {
\t color: #aeaeae;
}
p.small {
\t font-size: 0.8em;
\t margin: 20px 0 0;
}
/* Layout */
.container {
\t margin: 0;
}
.top {
\t margin: 0;
\t padding: 0;
\t width: 100%;
\t background: -moz-linear-gradient(top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
\t background: -webkit-linear-gradient(top, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
\t background: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
\t filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#99000000', endColorstr='#00000000',GradientType=0); /* IE6-9 */
}
.login-box {
\t background-color: white;
\t max-width: 340px;
\t margin: 0 auto;
\t position: relative;
\t top: 80px;
\t padding-bottom: 30px;
\t border-radius: 5px;
\t box-shadow: 0 5px 50px rgba(0,0,0,0.4);
\t text-align: center;
}
.login-box .box-header {
\t background-color: #665851;
\t margin-top: 0;
\t border-radius: 5px 5px 0 0;
}
.login-box label {
\t font-weight: 700;
\t font-size: .8em;
\t color: #888;
\t letter-spacing: 1px;
\t text-transform: uppercase;
\t line-height: 2em;
}
.login-box input {
\t margin-bottom: 20px;
\t padding: 8px;
\t border: 1px solid #ccc;
\t border-radius: 2px;
\t font-size: .9em;
\t color: #888;
}
.login-box input:focus {
\t outline: none;
\t border-color: #665851;
\t transition: 0.5s;
\t color: #665851;
}
.login-box button {
\t margin-top: 0px;
\t border: 0;
\t border-radius: 2px;
\t color: white;
\t padding: 10px;
\t text-transform: uppercase;
\t font-weight: 400;
\t font-size: 0.7em;
\t letter-spacing: 1px;
\t background-color: #665851;
\t cursor:pointer;
\t outline: none;
}
.login-box button:hover {
\t opacity: 0.7;
\t transition: 0.5s;
}
.login-box button:hover {
\t opacity: 0.7;
\t transition: 0.5s;
}
.selected {
\t color: #665851!important;
\t transition: 0.5s;
}
/* Animation Delay */
#logo {
-webkit-animation-duration: 1s;
-webkit-animation-delay: 2s;
}
.login-box {
-webkit-animation-duration: 1s;
-webkit-animation-delay: 1s;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<body>
\t <div class="container">
\t \t <div class="top">
\t \t \t <h1 id="title" class="hidden"><span id="logo">Daily <span>UI</span></span></h1>
\t \t </div>
\t \t <div class="login-box animated fadeInUp">
\t \t \t <div class="box-header">
\t \t \t \t <h2>Log In</h2>
\t \t \t </div>
\t \t \t <label for="username">Username</label>
\t \t \t <br/>
\t \t \t <input type="text" id="username">
\t \t \t <br/>
\t \t \t <label for="password">Password</label>
\t \t \t <br/>
\t \t \t <input type="password" id="password">
\t \t \t <br/>
\t \t \t <button type="submit">Sign In</button>
\t \t \t <br/>
\t \t \t <a href="#"><p class="small">Forgot your password?</p></a>
\t \t </div>
\t </div>
</body>
Sie möchten bei Bearbeitung einen anderen Stich nehmen? Diese Code Snippets sind ziemlich da :) – UncaughtTypeError
Ist dieser HTML-Code in CSS-Datei versehentlich? (H2-Selektor) –