Die "Werbung" und "Über" zeigen lila, wenn ich meinen Code ausführen, während der Rest der Liste Elemente schwarz sind, wie sie sein sollten. Ich möchte auch die Umrisse auf der Suche loswerden und Glücksknöpfe fühlen. Umriss: keine; oder Grenze: keine; wird nicht funktionieren.Wenige Fehler auf meinem Google-Homepage-Projekt

HTML

<!DOCTYPE html> 
<html> 

<head> 
    <link rel="stylesheet" 
    type="text/css" 
    href="style.css"> 
</head> 

<body> 

<title>Google</title> 

<div class="options"> 
    <ul> 
      <li> <a href="button">Gmail</li> 
      <li> <a href="button">Images</li> 
      <li> <a href="button"><img src="http://www.myiconfinder.com/uploads/iconsets/256-256-f6227d477e683ae5bd1270aac11b93e5-grid.png"width="25px" height="25px"></li> 
      <li> <a href="button"><img src="https://d30y9cdsu7xlg0.cloudfront.net/png/338473-200.png"width="25" height="25"></li> 
      <li> <a href="button"><img src=https://lh3.googleusercontent.com/-gsXjacdjY8E/AAAAAAAAAAI/AAAAAAAAAAA/AI6yGXxkQbqvng1PHA5RhhTLQowbW3ykkQ/s32-c-mo/photo.jpg></li> 
    </ul> 
</div> 

<h1><img src=https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png></h1> 

<div class="fake-input"> 
    <input type="text"/> 
</div> 

<div class="buttons"> 
    <ul> 
     <li><input type="submit"input value="Google Search"></li> 
     <li><input type="submit"input value="I'm feeling lucky!"></li> 
    </ul> 
</div> 

<footer> 
<div class="footer"> 
    <ul style="float:left;list-style-type:none;"> 
      <li><a href="https://www.google.com/intl/en/ads/?fg=1">Advertising</li> 
      <li><a href="https://www.google.com/services/?fg=1">Business</li> 
      <li><a href="https://www.google.com/intl/en/about/">About</li> 
    </ul> 

    <ul style="float:right;list-style-type:none;"> 
      <li><a href="https://www.google.com/intl/en/policies/privacy/?fg=1">Privacy</li> 
      <li><a href="https://www.google.com/intl/en/policies/terms/?fg=1">Terms</li> 
      <li><a href="https://www.google.com/preferences?hl=en">Settings</li> 
    </ul> 
</div> 
</footer> 

</body> 
</html>

CSS

.options ul{ 
    text-align: right; 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
} 

.options li{ 
    font-size:14px; 
    padding: 5px; 
    display: inline; 
} 

a:link{ 
text-decoration:none; 
color:black; 
} 

img{ 
    border-radius:15px; 
    font-family: arial,sans-serif; 
} 

h1{ 
    text-align:center; 
    margin-top:160px; 
} 

h2{ 
    text-align:center; 

} 

input[type='text'] { 
    margin-left:375px; 
    width:500px; 
    height:50px; 
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAACrElEQVR42u2Xz2sTQRSAX8VSb1K8iNqKooJH2Ux6Ksn+iPQqxZMIehJB0do/IMhmQWsvHr2KSEGk0tSLIoWIYNUKij20F2/N7iaUZnYT0kYzzhMKs0HDJiTdLcwHDwKZSd63781LBiQSSW9JZdkhzfKm1Rz9mjZp/W9YdEU3vXv4HsQZ40FtNG36q5rls//Ej4tmbSS2T15Mvp3ExOPmEMQNbBtMMEyoljcFcQN7PqyAlqNfIG7gYQ0tYNIaxA1MrJPY3wImbUqBKAXSFv0tBSIVMOkvKRDtGKWN/T6FdqRAxFNoWwpEPIXqUqBT6ALU/UVgu8GW4GD3f6f9TRDYNJTDrk7YbtiqUumHwIYoUJuHERDAS0r4CvgFECgbY+cFAR7KT+g1POmCKFDNw6WggHc3fBtVb4CAoyauBgXIG+g1Xh5mRAGah6cggBd11fK/h7lOprIs0H6uRl6KAo5O7kOv4QmPiwJ4Jqqv4FiwCtXjvD2+tRmfK6kZ/ygI2HritK0rDVGgrClJ6DWMwYC/AGuCBMYcIC2V0CzvjmbRz3j3xUjn6CfeYreUJ2wQkGD75INPX1mFfsEFrrcIYCvdhC4paWQakxajpJMr0C9YFg54i7AsClRmh9/xnr0NHcInzZStk2aLwAcGMAD9pPIazvFKVDD5rdnhJeHLX5RTyRPQHpz5o66emMc9wdlPtvA8wF7Aq2BUHh1525qEo5JtR1WeOXpickO9cJIpyuD6xJmhYiZ5ytWSl3mlnuOaf+2zDaLDXmJrSgZ/MYVEugo+gSh+FkSBa4yd5Ul87DZ5XpFl/AyIEjzYjkau8WqshU2cr13HPbgX4gJOD97n465GZlyVvC9mSKloKI2iTnbwNT+gBX54H+IaXAtxJzE3ycSAFqSAFJACUkAikXD+AHj5/wx2o5osAAAAAElFTkSuQmCC); 
    background-position: 450px 7px; 
    background-repeat: no-repeat; 
} 

.buttons ul{ 
    text-align:center; 
    list-style-type:none; 
    margin:0; 
    padding:0; 
} 

.buttons li{ 
    background-color: #f2f2f2; 
    padding: 5px; 
    display: inline-block; 
    border:none; 
} 


input:focus { 
    outline-style: none; 
} 


.footer { 
    background: #f2f2f2; 
    position: fixed; 
    bottom: 0px; 
    width:95%; 
} 

.footer li{ 
    display:inline; 
    text-decoration: none; 
    font-family: arial,sans-serif; 
    font-size: small; 
    color: #666; 
}

Quelle

2017-07-04 Jacob Moore

Können Sie Entwickler-Tools verwenden, um zu sehen, wo Ihre CSS außer Kraft gesetzt wird? – sol

Ich weiß nicht, wie ich das machen soll, ich habe nur angenommen, dass ich etwas falsch gemacht habe. Ich weiß, wie man die Entwicklerwerkzeuge aufbaut, aber ich bekomme immer noch den Dreh raus. –

Dies könnte ein dummer Kommentar sein. Aber sind sie lila, weil sie vorher besucht wurden? – Cristophs0n

Die Links in der Fußzeile lila sind, weil Sie sie vor geklickt. Sie können dies außer Kraft setzen mit dem folgenden CSS:

footer li a:visited { /* visited selector used for links which have been visited or clicked on already */ 
    color: black; 
}

die Grenze einfach nutzen diese CSS-Code zu entfernen:

input[type=submit] { 
    border: none; 
}

Quelle

2017-07-04 08:27:47

funktioniert nicht ohne 'a: visited' – TheDarkKnight

Wörtlich peinlich, dass ich das mit gesundem Menschenverstand nicht herausgefunden habe. –

Wenige Fehler auf meinem Google-Homepage-Projekt

HTML

CSS

Antwort

Verwandte Themen