| + LOGIN |
| Username |
| Password |
| Get your Password ? |
实现带图片的输入框样式,简单实用,兼容各种浏览器
第一步:
点击这里下载样式表及图片
第二步:
在网页<head>区添加样式定义
<style type="text/css">
.title{font-family: verdana, tahoma, sans-serif;FONT-SIZE: 10px;font-weight:bold}
.grey{FONT-SIZE: 12px;color:#666666}
.orange {font-family: verdana, tahoma, sans-serif;font-size:10px;color:#FF6600}
.orange A:link {font-family: verdana, tahoma, sans-serif;font-size:10px;color:#FF6600;text-decoration:underline}
.orange A:visited {font-family: verdana, tahoma, sans-serif;font-size:10px;color:#FF6600;text-decoration:underline}
.orange A:hover {font-family: verdana, tahoma, sans-serif;font-size:10px;color:#FF6600;text-decoration:underline}
.orange A:active {font-family: verdana, tahoma, sans-serif;font-size:10px;color:#FF6600;text-decoration:underline}
textarea, input, select{
background: #FFFFFF;
border: 1px solid #CCCCCC;
color: #000000;
font-family: verdana, tahoma, sans-serif;
font-size: 0.95em;}
.username{
background-image:url(images/username.gif);
background-position: 1px 1px;
background-repeat:no-repeat;
padding-left:20px;
height:20px;
FONT-SIZE: 12px;}
.password{
background-image:url(images/password.gif);
background-position: 1px 1px;
background-repeat:no-repeat;
padding-left:20px;
height:20px;
FONT-SIZE: 12px;}
</style>
第三步:
在网页<body>区添加以下代码
<table width="208" border="0" align="center" cellpadding="5" cellspacing="0">
<tr>
<td bgcolor="#F4F4F4" class="title">+ LOGIN</td>
</tr>
<tr>
<td class="grey"><img src="images/warning.gif" width="16" height="16" align="absmiddle"> 请输入登陆的用户和密码</td>
</tr>
<tr>
<td class="title">Username</td>
</tr>
<tr>
<td><input name="Username" type="text" class="username" size="30"></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td class="title">Password</td>
</tr>
<tr>
<td><input name="Password" type="password" class="password" size="30"></td>
</tr>
<tr>
<td class="orange"><a href="#">Get your Password ? </a></td>
</tr>
<tr>
<td align="right"><img src="images/loginin.gif" width="70" height="21"></td>
</tr>
</table>




