css 教學(xué)實(shí)例 漂亮的搜索框
發(fā)布時(shí)間：2009-10-13 22:26:32 作者：佚名 
我要評(píng)論
我要評(píng)論今天讓學(xué)生實(shí)現(xiàn)一個(gè)搜索框的效果，死活做不出來.
如圖：
我就身教一回，代碼如下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>css教學(xué)(學(xué)生：Dream·Sky)</title>
<style type="text/css">
.search{background:url(img/searchbg.jpg);width:250px;height:37px;}
/*這里之所以用兩個(gè)div是為了解決float:left的時(shí)候，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='搜索我們的產(chǎn)品..' 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>
打包下載
我就身教一回，代碼如下：
復(fù)制代碼
代碼如下:<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>css教學(xué)(學(xué)生：Dream·Sky)</title>
<style type="text/css">
.search{background:url(img/searchbg.jpg);width:250px;height:37px;}
/*這里之所以用兩個(gè)div是為了解決float:left的時(shí)候，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='搜索我們的產(chǎn)品..' 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>
打包下載
相關(guān)文章
HTML實(shí)現(xiàn)移動(dòng)端固定懸浮半透明搜索框
這篇文章主要介紹了HTML實(shí)現(xiàn)移動(dòng)端固定懸浮半透明搜索框的相關(guān)資料,需要的朋友可以參考下2017-10-17
一款html5+css3實(shí)現(xiàn)的超酷綠色發(fā)光搜索表單2014-04-22- 作為一個(gè)專業(yè)的淘寶控，不知道從什么時(shí)候開始發(fā)現(xiàn)淘寶上居然還有語音搜索，好吧，因?yàn)楹闷嫘淖魉钸€是想一探究竟，不過我想仔細(xì)一點(diǎn)的人，都會(huì)發(fā)現(xiàn)在只有在webkit內(nèi)核的瀏覽2014-03-18
本文通過實(shí)例代碼給大家分享8款純CSS3實(shí)現(xiàn)的搜索框功能，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2017-09-14
CSS3實(shí)現(xiàn)的可伸縮搜索框效果(無js)
本范例僅僅使用了CSS3實(shí)現(xiàn),無需js代碼,可惜的是不能在ie下使用2013-05-02- 搜索框是我們經(jīng)常見到的網(wǎng)站功能，它的美觀直接影響著網(wǎng)站舒適度，一般我們都會(huì)下功夫美化搜索框。2009-12-03
基于html css實(shí)現(xiàn)帶搜索圖標(biāo)的搜索框功能
這篇文章主要介紹了基于html css實(shí)現(xiàn)帶搜索圖標(biāo)的搜索框功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-10-09
