Verwenden Sie relative Positionierung und Offset, um eine schöne Eingabeschnittstelle_CSS/HTML zu erstellen

Durch die Verwendung relativer Positionierungs- und Offset-Attribute können Sie Schnittstellen gut implementieren, für die zuvor Bilder erforderlich waren, und die Implementierung ist auch sehr bequem. Wenn Benutzer beispielsweise bestimmte Informationen eingeben müssen, verwenden wir häufig die Struktur Titelleiste – Inhalt – OK-Schaltfläche. Das Folgende ist eine Eingabeschnittstelle, die unter Verwendung der relativen Positionierung und des Offsets von CSS-Stilen erstellt wurde. Die Hauptmerkmale sind:

Das Bild der Titelleiste ist nach oben versetzt. Verwenden Sie den Stil: top:-10px;position:relative;, um das Bild vom Container zu trennen und außerhalb des Containers zu positionieren (in diesem Beispiel ist der Bildcontainer ein div mit class="main"). Zu beachten ist jedoch, dass die Bildposition zwar außerhalb des Containers liegt, aber dennoch einen bestimmten Platz im Container einnimmt. In diesem Beispiel ist die Höhe des Grüns unabhängig davon, wie das Höhenattribut des .main-Selektors festgelegt ist Der Streifen wird niemals kleiner als 20 Pixel (die Höhe des Bildes) sein.
Ich habe auch die Offset-Attribute „oben“, „unten“, „links“ und „rechts“ für den Text in der Titelleiste verwendet. Zuerst wollte ich nur das Attribut „vertikal-align:middle“ verwenden, um den Text vertikal zu zentrieren Der Text wurde immer an der unteren Zeile ausgerichtet, aber der Versatz wurde erneut verwendet.
Der grüne Streifen verwendet einen CSS-Filter, um einen Verlaufseffekt zu erzeugen, aber leider heißt es, dass ihn nur der IE unterstützt:-(
Die Schaltfläche „OK“ am Ende verwendet ebenfalls relative Positionierungs- und Offset-Technologie.

CSS-Code:

a:link,a:active,a:visited{}{
Farbe: #2D4D97;
Textdekoration: keine;
}
a:hover {}{
text-decoration: none;
color: #FF9900;
}
.title{}{
color:#006600;
display:block;
height:20px;
width:65%;
border:none;
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorStr=#FFD9E7CB,endColorStr=#00FFFFFF);
}
.title span{}{
display:inline;
position:relative;
top:-4px;
}
.title img{}{
position:relative;
top : -10px;
links: 5px;
display:inline;
margin:0px 10px 0px 0px;
padding:0px;
height:20px;
}
. main{}{
margin:10px 20px 30px 20px;
padding: 10px 20px 10px 20px;
width:100%;
border:#CCCCCC 1px solid;
}
. main .item{}{
Vertical-align:middle;
margin:5px 0 5px 0;
}
.main .foot{}{
position:relative;
bottom :-10px;
left:80%;
display:block;
border:#CCCCCC 1px solid;
border-bottom:none;
width:15%;
text -align:center;
}
.main .foot a{}{
background-color:#F3FCE0;
padding:2px;
width:100%;
}
.main .foot a:hover{}{
background-color:#D8EBFE;
padding:2px;
width:100%;
}
HTML-Code:

http://www.cnblogs.com/images/cnblogs_com/oliverhuang/addRole.gif"> Bitte geben Sie die grundlegenden Informationen der Rolle ein

🎜> & lt; textArea name = "textfield2" cols = "50" rows = "5" & gt; & lt;/textarea & gt;
& lt;/div & gt;
& lt; div class = "foot">
OK