<p id="3xtv7"></p>

          <noframes id="3xtv7">

                  建站知識

                  Welcome to Beijing RuiHeng TianLong Technology Co., Ltd.

                  CSS搜索框樣式

                  時間:  來源:網站建設公司  作者:網站制作公司  點擊量:
                  搜索框是我們在瀏覽各個網站時最常見到的網站功能之一,其實對于從事 網站建設 工作的人員來說,我們不僅僅是要將它的功能優化,對于它的美觀度也不可忽視。下面帶大家做一個簡單的搜索框,大家都mark起來吧! 效果圖: 文中所用到的圖片: 首先,我們將它分
                  搜索框是我們在瀏覽各個網站時最常見到的網站功能之一,其實對于從事網站建設工作的人員來說,我們不僅僅是要將它的功能優化,對于它的美觀度也不可忽視。下面帶大家做一個簡單的搜索框,大家都mark起來吧!
                  效果圖: 
                  文中所用到的圖片:
                  首先,我們將它分成左右兩邊,左側呢就是我們搜索框,右側就只有圖片,因此html布局應該這樣寫:
                  <body style="background:#FC9">
                  <div class="search">
                                              <input name="" type="image" id="sear" src="images/search.jpg"/>右側的圖標
                                              <div class="text"> <input type="text" value="請輸入關鍵字" onfocus="if (value =='請輸入關鍵字'){value =''}" onblur="if (value ==''){value='請輸入關鍵字'}" id="tex" name="textfield" /></div>左側的搜索框
                  </div>
                  </body>
                  這里body先隨便給個顏色,方便看我們搜索框的顏色。
                  接下來就是CSS樣式啦:
                  <style type="text/css">
                  .search  {width:220px; height:30px; margin-top:45px; margin-left:50%;}
                  .search  #sear {width:40px; height:30px; float:right;}
                  .text  {width:160px; height:28px; float:left; padding-left:15px;}
                  #tex { width:100%; height:28px; background:#fff; line-height:28px; padding-left:5px; border:none; color:#999;}
                  </style>
                  到這里一個搜索框可以說已經完成啦,具體樣式可根據自己的需要再進行調整。

                  本文TAG標簽:
                  返回關閉本頁
                  上一篇:jQuery鼠標滑過時,彈出登錄框    下一篇:JQuery實例-標簽頁效果
                  推薦閱讀

                  Copyright © 2010-2021 北京瑞恒天龍科技有限公司  All Rights Reserved  |  北京網站建設知名服務商  |  北京網站制作 | 京ICP備11004170號-1   京公網安備110107000463號
                  地址:北京市海淀區永定路長銀大廈B座  非工作時間:15810379666  服務熱線:010-89941606 座機:010-89941606 轉801/802/803/804  版權所有 盜版必究!

                  在線咨詢
                  關閉
                  電話咨詢
                  網站制作電話
                  010-89941606
                  侮辱丰满的人妻HD高清
                  <p id="3xtv7"></p>

                          <noframes id="3xtv7">