Einige gute Beispielcodes für Formulareffekte auf der Website-CSS-Tutorial-php.cn

Einige gute Beispielcodes für Formulareffekte auf der Website

伊谢尔伦

Freigeben： 2017-06-16 10:44:49

Original

1018 Leute haben es durchsucht

Lassen Sie uns heute über die detaillierte Verarbeitung und Erfahrung des Eingabefelds sprechen. Tatsächlich ist es nicht schwierig, eine Eingabe zu erstellen, die vollständig mit CSS-Standards, FF/IE7/IE6 und anderen gängigen Browsern kompatibel ist Benutzererfahrung. Klicken Sie zuerst, um den Effekt unten zu sehen!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表单效果</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
font-size:63%;
color:#000;
}
/*input*/
.input_on{
padding:2px 8px 0pt 3px;
height:18px;
border:1px solid #999;
background-color:#FFFFCC;
}
.input_off{
padding:2px 8px 0pt 3px;
height:18px;
border:1px solid #CCC;
background-color:#FFF;
}
.input_move{
padding:2px 8px 0pt 3px;
height:18px;
border:1px solid #999;
background-color:#FFFFCC;
}
.input_out{
/*height:16px;默认高度*/
padding:2px 8px 0pt 3px;
height:18px;
border:1px solid #CCC;
background-color:#FFF;
}
/*form*/
ul.input_test{
margin:20px auto 0 auto;
width:500px;
list-style-type:none;
}
ul.input_test li{
width:500px;
height:22px;
margin-bottom:10px;
}
.input_test label{
float:left;
padding-right:10px;
width:100px;
line-height:22px;
text-align:right;
font-size:1.4em;
}
.input_test p{
float:left;
_margin-top:-1px;
}
.input_test span{
float:left;
padding-left:10px;
line-height:22px;
text-align:left;
font-size:1.2em;
color:#999;
}
</style>
</head>
<body>
<ul class="input_test">
<li>
<label for="inp_name">姓名：</label>
<p><input id="inp_name" class="input_out" name="" type="text" onfocus="this.className=&#39;input_on&#39;;this.onmouseout=&#39;&#39;" onblur="this.className=&#39;input_off&#39;;this.onmouseout=function(){this.className=&#39;input_out&#39;};" onmousemove="this.className=&#39;input_move&#39;" onmouseout="this.className=&#39;input_out&#39;" /></p>
<span>请输入您的姓名</span>
</li>
<li>
<label for="inp_email">Email：</label>
<p><input id="inp_email" class="input_out" name="" type="text" onfocus="this.className=&#39;input_on&#39;;this.onmouseout=&#39;&#39;" onblur="this.className=&#39;input_off&#39;;this.onmouseout=function(){this.className=&#39;input_out&#39;};" onmousemove="this.className=&#39;input_move&#39;" onmouseout="this.className=&#39;input_out&#39;" /></p>
<span>请输入您的Email</span>
</li>
<li>
<label for="inp_web">网站：</label>
<p><input id="inp_web" class="input_out" name="" type="text" onfocus="this.className=&#39;input_on&#39;;this.onmouseout=&#39;&#39;" onblur="this.className=&#39;input_off&#39;;this.onmouseout=function(){this.className=&#39;input_out&#39;};" onmousemove="this.className=&#39;input_move&#39;" onmouseout="this.className=&#39;input_out&#39;" /></p>
<span>请输入您的网站</span>
</li>
</ul>
</body>
</html>

Nach dem Login kopieren

Die Farbe der Eingabe ändert sich, wenn die Maus darüber fährt. Wenn Sie außerdem auf den Titel (die Rolle von ) oder das Eingabefeld klicken, ändert sich die Farbe der Die Eingabe, in der der Cursor bleibt, unterscheidet sich auch von anderen Eingabefeldern. Der Unterschied besteht darin, dass dies die Rolle von JS in ist. Die User Experience sagt dem Benutzer, was eingegeben werden kann und wo sich die Eingabe gerade befindet. Darüber hinaus wird es durch das Umschalten der Tabulatortaste auf der Tastatur bequemer, nach der Eingabe des aktuellen Inhalts zum nächsten Eingabefeld zu wechseln. Dies ist die Rolle der angemessenen Layoutstruktur von CSS.

Die Gesamtstruktur ist durch

zeigt eine Zeile mit Inhalt an. Das Label zeigt den Titel an,
input steuert das Eingabefeld und Hier möchte ich auf die unterschiedliche Leistung von in verschiedenen Browsern eingehen. Das Festlegen der Zeilenhöhe für hat keine Auswirkung auf FF Eingabefeld. Die Standardhöhe unter dem Browser beträgt 16 Pixel, was der Schriftart entspricht. Der untere Rand beträgt 18 Pixel. Insbesondere wenn die größer gemacht werden muss, ist es besser, die Polsterung zu verwenden, um sie zu steuern.
Lassen Sie uns über den JS-Teil sprechen. Hier werden die vier Attribute der Maus verwendet, um die Mausbewegungen zu steuern. Es spielt keine Rolle, ob Sie JS nicht kennen, solange Sie den entsprechenden CSS-Stil definieren.
Das obige ist der detaillierte Inhalt vonEinige gute Beispielcodes für Formulareffekte auf der Website. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!