css 教学实例漂亮的搜索框

ttx9n · 发表于 2009-10-13 22:26:32

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

2232060.jpg

我就身教一回，代码如下：

复制代码代码如下:
<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"> </div>
<div class="s_2">
<input id="Text1" type="text" class="txt" value='搜索我们的产品..' onclick="this.value='';" />
</div>
<div class="s_3"> </div>
<div class="s_4"><input type="image" src="img/btnbg.jpg" class="btn" onclick="f();" /></div>
</div>
</body>
</html>

打包下载

qwe520 · 发表于 2022-10-26 07:27:38

非常vbcbvcvbvcb

白狐软件 · 发表于 2022-11-5 01:06:10

还不错啊

0y3yp · 发表于 2022-11-17 08:10:54

很好，谢谢分享

idy6_yus · 发表于 2023-1-7 14:01:04

看到这帖子真是高兴！

qq303604905 · 发表于 2023-3-11 20:29:01

还有人在不。。。。。。。。。。啊

jasonlong · 发表于 2024-3-26 07:20:48

不错的源码论坛

123456 · 发表于 2024-3-31 12:06:09

还可以不错

6hruhg · 发表于 2024-4-12 09:22:34

谢谢下载来看看

a971560 · 发表于 2024-7-1 00:32:53

啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦

账号		自动登录	找回密码
密码			立即注册

[CSS] css 教学实例漂亮的搜索框

相关帖子

[CSS] css 教学实例 漂亮的搜索框

相关帖子

[CSS] css 教学实例漂亮的搜索框