漂亮的会员登录表单样式

2008-10-27 16:26:00 | 【大中小】

+ LOGIN

请输入登陆的用户和密码

Username

Password

Get your Password ?

实现带图片的输入框样式，简单实用，兼容各种浏览器

查看全部代码 View Code

第一步：
点击这里下载样式表及图片

第二步：
在网页<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>

下载"漂亮的会员登录表单样式"

推荐给朋友

上一篇：漂亮的Css+Xhtml下来菜单
下一篇：不带关闭按钮的普通对联广告

漂亮的会员登录表单样式

下载"漂亮的会员登录表单样式"

相关资源