HTML and CSS Reference
In-Depth Information
#inhalt img {
border: 1px solid #222222;
webkit border radius: 5px;
}
Die Fußzeile, also das Adressfeld des Autohändlers, soll ähnlich wie der Kopfbereich
aussehen, jedoch eine Linie am oberen Rand erhalten, die Schrift soll kleiner und ohne
Schatten sowie zentriert ausgerichtet sein. Demzufolge muss der Datei
mobile.css
noch
folgende CSS-Definition hinzugefügt werden:
#kontakt {
background color: #fcc97d;
border top: 1px solid #666;
color: #222;
display: block;
font size: 10px;
font weight: bold;
padding: 5px 0;
text align: center;
text decoration: center;
}
Nach diesen eigentlich wenigen Zeilen CSS haben Sie eine Weboberfläche, die für das
iPhone und andere Touchscreen-Handys optimiert ist. Dabei musste, bis auf eine
zusätzliche Zeile, der HTML-Code nicht geändert werden, und die zwei komplett
unterschiedlichen Designs wurden einfach nur von einigen Zeilen CSS definiert.
Bild 1.7:
Fertig - die Webseite sieht jetzt
nach einer iPhone-Webanwendung aus.
