<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style>
/*整个盒子宽258，高40*/
.search{
width:258px;
height:40px;
background-color: pink;
margin:100px auto;
}
/*input搜索框宽200，高40，左边加了8px的内边距，没有边框，去掉外框线，文字的颜色初始为浅色的，左浮动*/
.search input{
width:208px;
height:40px;
background: url(C:/Users/高萍/Desktop/前端学习/images/left.jpg) no-repeat;
border:0;
padding:0;
outline-style:none;
padding-left:8px;
float:left;
color:#ccc;
}
/*按钮图片宽度42，高度40，没有边框和内边距，左浮动，当鼠标停留在按钮图片上时，鼠标光标变成"手"的指向.*/
.search button{
width:42px;
height:40px;
background:url(C:/Users/高萍/Desktop/前端学习/images/right.jpg) no-repeat;
border:0;
padding:0;
float:left;
cursor:pointer;
}
</style>
<script> //js部分，当Input输入框获得光标的时候，如果用户说第一次输入，也就是输入框中的文字还是“请输入...”的时候，输入框中的文字要清空，并且用户输入的文字
// 颜色要变成深颜色；当Input输入框失去焦点的时候，也就是输入框中的文字是空的，此时，输入框中的“请输入...”文字要复原，
window.onload=function(){
var txt=document.getElementById("txt");
txt.onfocus=function() { //获得焦点的时候
if(txt.value=="请输入..."){
txt.value=""; //输入框中的文字为空的表达
txt.style.color="#333"; //#333是深颜色
}
}
txt.onblur=function(){ //失去焦点的时候
if(txt.value=="")
{
txt.value="请输入...";
txt.style.color="#ccc"; //#ccc是浅色
}
}
}
</script>
</head>
<!--<body> 一个大盒子，左边是input搜索框，右边是按钮,搜索框中的文字是浅色的"请输入..."-->
<div class="search">
<input type="text"/ value="请输入..." id="txt">
<button></button>
</div>
</body>
</html>
