geben Sie dem input-Tag eine Art von "text ", einen Namen und eine ID von "s":

4

Geben Sie einen " Button" -Tag für die Suche -Taste und geben ihm eine Klasse von . " btn " Um Ihren Code konform zu halten, sollten Sie auch einen Titel :

Suche

der " Button" -Tag ist ein neuer Tag, der die Taste, um natürlich mit dem Eingabefeld , eine viel bessere Funktion gegenüber dem Vorjahr " Bild "-Typ von Eingabefeld ausrichten können. Sie können die " btn " Klasse Stil verwenden Sie die Schaltfläche mit reinem CSS Variablen oder ein Hintergrundbild .
5

Geben schließenden Tags für Ihre formset und Form. Das ausgefüllte HTML sollte in etwa so aussehen :

< /form>
6

im Kopf des HTML-Dokuments oder in einer separaten CSS-Stylesheet erstellen Sie Ihre CSS-Deklarationen für jedes Element . Werfen Sie einen Blick auf Ihre Photoshop-Bild und bestimmen Sie die Breite und Höhe der Suchleiste , einschließlich der Raum oberhalb und unterhalb des Eingabefeldes und Knopf. Geben Sie diese Höhe und Breite in die " mainsearch " ID Erklärung . Andere Dinge zu beachten könnte die Positionierung der Bar , Randbreite und Hintergrund sein . Wenn es auf der rechten Seite ein Navigationsmenü platziert werden muss , zum Beispiel , sollten Sie einen " float: right " . Variable
7

Geben Variablen in der Klasse , die Sie beabsichtigen " Suchleiste ". Suche auf alle Bars auf der Website bewerben. Dies reduziert die Anzahl der wiederholten Stylesheets , da Sie die " . Suchleiste " -Klasse mit einer anderen Form ID auf der gleichen Seite wieder verwenden kann , zum Beispiel. Wiederholte Klassen-Variablen könnten gehören Polsterung , Ränder , Rahmen -und Hintergrundfarbe .
8

Style your Eingabefeld mithilfe der Suchleiste Klasse durch die Eingangswahlschalter gefolgt . Variablen, die in der Eingabe -Klasse gehören sind Dinge wie Breite, Höhe, Farbe von Text , Schriftart und Stil , Grenzen , Hintergrund , Polsterung und Margen. Jede dieser Variablen sollte mit den Abmessungen und Effekt-Einstellungen in der Photoshop-Datei , die durch Betrachten der Layer-Optionen und mit dem Auswahl-Werkzeug Pixel messen bestimmt werden kann.
9

Fügen Sie einen Stil für Ihre Suche Taste. Sie können die meisten Arten Taste in CSS durch eine Kombination von Rahmen und Schlagschatten Variablen erreichen oder Sie können ein Hintergrundbild verwenden . Die wichtigen Variablen für die Schaltfläche Stil zählen sind die Höhe und Breite . Ein Beispiel für eine Schaltfläche Stil ist wie folgt:

searchbar button.btn {

width: 32px ;

Höhe : . 32px ;

text- indent: - 9999px ;

background: # CCCCCC URL ( searchbutton.png ) no-repeat oben rechts ;

}

Dieser Stil passt das Bild Dimension von 32 Pixel breit um 32 Pixel hoch , schiebt die Schaltfläche "Submit Search" Text aus den Augen , damit es nicht zu überlagern die Taste und platziert die Suchtaste Grafik oben rechts neben der Schaltfläche Container , damit es nicht abgeschnitten wird.
10

Fertig von der Umsetzung Ihrer gewünschten Suchbegriff Skript oder Funktion in Ihren HTML-Formular . Dies wird typischerweise durch Zugabe von der Skript- Dateinamen oder den Pfad zur " Aktion" Variable in der Form-Tag gemacht, aber einige Skripte können weitere Schritte , wie das Hinzufügen von Javascript, um den Kopf Ihrer HTML-Seite , wo der Suchleiste platziert werden gehören .