css教学实例(学生：Dream.Sky)

今天让学生实现一个搜索框的效果，死活做不出来，如图：

我就身教一回，代码如下：[ 点击下载]

< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
     < title > css教学(学生：Dream·Sky) </ title >
     < style  type ="text/css" >
        .search { background : url(img/searchbg.jpg) ; width : 250px ; height : 37px ; }
         /* 这里之所以用两个div是为了解决float:left的时候，margin-left在ie与ff下的不同解析 */
        .s_1 { float : left ; width : 12px ; }
        .s_3 { float : left ; width : 2px ; }
        
        .s_2 { float : left ; width : 185px ; }
        .s_4 { float : left ; width : 25px ; }
        .txt { width : 170px ; border : 0 ; margin-top : 8px ; color : #CCCCCC ; }
        .btn { margin-top : 5px ; }
     </ style >
     < script  type ="text/javascript" >
         function  f(){
            alert(document.getElementById( " Text1 " ).value);
        }
     </ script >
</ head >
< body >
< div  class ="search" >
     < div  class ="s_1" > &nbsp; </ div > <!-- 这里需要加空格，否则火狐下无效 -->
     < div  class ="s_2" >
         < input  id ="Text1"  type ="text"  class ="txt"  value ='搜索我们的产品..'  onclick ="this.value='';"   />
     </ div >
     < div  class ="s_3" > &nbsp; </ div >
     < div  class ="s_4" >< input  type ="image"  src ="img/btnbg.jpg"  class ="btn"  onclick ="f();"   /></ div >
</ div >
</ body >
</ html >