css 教學實例 漂亮的搜索框
發(fā)布時間：2009-10-13 22:26:32 作者：佚名 
我要評論
我要評論今天讓學生實現(xiàn)一個搜索框的效果，死活做不出來.
如圖：
我就身教一回，代碼如下：
<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='搜索我們的產(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>
打包下載
我就身教一回，代碼如下：
復制代碼
代碼如下:<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='搜索我們的產(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實現(xiàn)移動端固定懸浮半透明搜索框的相關(guān)資料,需要的朋友可以參考下2017-10-17
一款html5+css3實現(xiàn)的超酷綠色發(fā)光搜索表單2014-04-22- 作為一個專業(yè)的淘寶控，不知道從什么時候開始發(fā)現(xiàn)淘寶上居然還有語音搜索，好吧，因為好奇心作祟還是想一探究竟，不過我想仔細一點的人，都會發(fā)現(xiàn)在只有在webkit內(nèi)核的瀏覽2014-03-18
本文通過實例代碼給大家分享8款純CSS3實現(xiàn)的搜索框功能，代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-09-14
本范例僅僅使用了CSS3實現(xiàn),無需js代碼,可惜的是不能在ie下使用2013-05-02- 搜索框是我們經(jīng)常見到的網(wǎng)站功能，它的美觀直接影響著網(wǎng)站舒適度，一般我們都會下功夫美化搜索框。2009-12-03
這篇文章主要介紹了基于html css實現(xiàn)帶搜索圖標的搜索框功能,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-10-09
