집 > 기사 > 웹 프론트엔드 > 웹사이트의 양식 효과에 대한 좋은 예제 코드

웹사이트의 양식 효과에 대한 좋은 예제 코드

伊谢尔伦원래의: 2017-06-16 10:44:491021검색

오늘은 입력 입력 상자를 처리하는 세부 사항과 경험에 대해 이야기하겠습니다. 실제로 CSS 표준, FF/IE7/IE6 등과 같은 주류 브라우저와 완전히 호환되고 충족되는 입력을 만드는 것은 어렵지 않습니다. 사용자 경험. 먼저 클릭하시면 아래 효과를 보실 수 있습니다!

<!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>

입력 항목 위에 마우스를 올리면 입력 색상이 변경됩니다. 또한, 제목(60ec1b46d8dc92ea48645ada07bb1f69의 역할)이나 입력 상자를 클릭하면 커서가 있는 입력 항목의 색상이 변경됩니다. 다른 입력 상자와도 다릅니다. 이것이 d5fd7aea971a85678ba271703566ebfd에서 JS의 역할입니다. 사용자 경험은 사용자에게 무엇을 입력할 수 있는지, 현재 입력이 어디에 있는지 알려줍니다. 또한 키보드의 Tab 키를 전환하여 현재 내용을 입력한 후 다음 입력창으로 이동하는 것이 더욱 편리해집니다. 이것이 CSS의 합리적인 레이아웃 구조의 역할입니다.

전체 구조는 ff6d136ddc5fdfeffaf53ff6ee95f185와 25edfb22a4f469ecb59f1190150159c6로 구성되며, 각 25edfb22a4f469ecb59f1190150159c6는 한 줄의 콘텐츠를 표시합니다. 2e1cf0710519d5598b1f0f14c36ba674 라벨은 제목을 표시하고, e388a4556c0f65e1904146cc1a846beeinput은 입력 상자를 제어하며, 45a2772a6b6107b401db3c9b82c049c2 설명 정보를 표시합니다. 여기서는 다양한 브라우저에서 d5fd7aea971a85678ba271703566ebfd의 행 높이 설정이 FF에 영향을 미치지 않으므로 패딩을 사용하여 텍스트 위치를 제어하는 것이 좋습니다. 입력 상자. 3b1c0bd85be58b211a2424d5fc9c2ab0브라우저의 기본 높이는 16px로, 하단 테두리를 추가하는 경우와 동일합니다. 특히 d5fd7aea971a85678ba271703566ebfd을 더 크게 만들어야 하는 경우 패딩을 사용하여 제어하는 것이 좋습니다. + 온블러(커서 이탈), 온포커스(커서 유지) , onmousemove(마우스 유지) 및 onmouseout(마우스 떠나기) 네 가지 속성은 마우스의 움직임을 제어하는 데 사용됩니다. 해당 CSS 스타일을 정의하기만 하면 JS를 몰라도 문제가 되지 않습니다.

위 내용은 웹사이트의 양식 효과에 대한 좋은 예제 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：