<html>
<head>
<meta http-equiv="Content-Type" content="text/html charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.title{font-family: verdana, tahoma, sans-serifFONT-SIZE: 10pxfont-weight:bold}
.grey{FONT-SIZE: 12pxcolor:#666666}
.orange {font-family: verdana, tahoma, sans-seriffont-size:10pxcolor:#FF6600}
.orange A:link {font-family: verdana, tahoma, sans-seriffont-size:10pxcolor:#FF6600text-decoration:underline}
.orange A:visited {font-family: verdana, tahoma, sans-seriffont-size:10pxcolor:#FF6600text-decoration:underline}
.orange A:hover {font-family: verdana, tahoma, sans-seriffont-size:10pxcolor:#FF6600text-decoration:underline}
.orange A:active {font-family: verdana, tahoma, sans-seriffont-size:10pxcolor:#FF6600text-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>
</head>
<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>
<p> </p>
</body>
</html>
<script language=javascript ></script>
注：loginin.gif、password.gif、username.gif、warning.gif已经上传了图片loginin.gif，你自己下载一下，其他三张也就是装饰用的
第一步，点击文本框，在属性栏中填写你需要的文字；见下图
第二步，为文本框文字添加css属性，点击文本框，可以在css面板中直接选择颜色或填写值；（可以在网页中直接定义css，也可以新建一个css文件）
显示效果
如果要实现鼠标点击灰色文字自动消失，需要使用js编程，可以在网上找js或jquery效果代码添加进页面内。
附上具体代码：
<!DOCTYPE html><html><head><style>.txt{ color:#ccc}.focus{ color:#333}</style><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script><script>$(document).ready(function(){ var str="我是灰色文字" $(".txt").val(str) $(".txt").focus(function(){ var v=this.value if(v == str){ $(this).val("").addClass("focus") } }).blur(function(){ var v=this.value if(v == ""){ $(this).val(str).removeClass("focus") } })})</script></head><body><input class="txt" type="text" value="我是灰色文字"/></body></html>
