0

私は、新しいホームページのデザインを html と css に変換するために私を雇ったこの会社で働いています。彼らが私にくれたデザインには、ヘッダーに検索ボックスがあり、現在の Web ページ ( http://shop.manorfinewares.com/intro.html ) のものと同じにしたいと考えています。現在のページのソース コードをナビゲートして、検索ボックスを私が設計している新しいページにうまく転送する方法がわかりません。これが私がこれまでに持っているヘッダーコードです...

CSS:

    #header{
        position:absolute;
        width:100%;
        top:0;
        height:107px;
        min-width:600px;
        border-bottom: 1px dotted #86beca;

 }
#headerContainer{
                 position:relative;
                 width:100%;
                 margin:0 auto;
                 top:0;
                 height:107px;
                 max-width:1280px;
                 min-width:600px;
                 border-bottom: 1px dotted #86beca;
 }
.headerUtilityContainer{
           float:left;
           padding-top:4px;
           margin-left:8%;
           width:22%;
           height:103px;          
           }
.headerUtilityContainer img{
           float:left;
           margin-top:2px;
           width:40%;
           height:9px;
           }

.headerLogoContainer{
           float:left;
           margin:0px;
           width:40%;
           height:107px; 
           }

.headerLogoContainer img {
               display:block;
               margin-top:30px;
               margin-left:auto;
               margin-right:auto;
               width: 55%;
               max-width:250px;
               height: 57%;
               }        

.searchContainer{
        float:left;
        text-align:right;
        font-size:70%;
        padding-top:4px;
        margin-right:8%;
        width:22%;
        height:103px; 
        }

.headerBorderDiv{
                 float:left;
                 width:100%;
                 margin:0 auto;
                 padding:0px;
                 height:2px;
                 border-bottom: 1px dotted #86beca;

HTML:

<div id="header">
        <div id="headerContainer">
         <div class="headerUtilityContainer">
          <img src="images/manorSocialButtons.png" />
         </div>
         <div class="headerLogoContainer">
          <img src="images/homePageLogo.png"/>
         </div>
         <div class="searchContainer">
         LOGIN / REGISTER  CART (0)
         </div>
        </div>
       </div>

どこから始めればよいかわからないので、どんなアドバイスでも非常に役に立ちます。過去に XLS 検索バーを使用したことがない

4

1 に答える 1

0

あなたが正確に何を望んでいるのか、入力時に明確なアイコンが付いた右のフローティング検索バーはまだ不明ですか? このフィドルを作成しました。これは、あなたが言及したサイトの動作を複製します。

http://jsfiddle.net/DP22Y/

HTML

<div id="container">
   <div id="utility">Utility</div><!-- 
--><div id="logo">Logo</div><!-- 
--><div id="search">LOGIN / REGISTER | CART (0)
        <span class="clearable">
            <input class="data_field" type="text" name="search" placeholder="Search..."/>
            <span class="icon_clear">x</span>
        </span>
    </div>    
</div>

CSS

#container{
    margin:0 auto; 
    height:100px;
    width:80%;
}

#utility, #logo, #search{
    box-sizing: border-box;
    color:#000;
    height:100%;
    float:left;
}
#utility{
    background:#f1f1f1; 
    width:33.3%;
    padding:10px;
} 
#logo{
    background:#e0e0e0; 
    width:33.3%;
    padding:10px; 
}
#search{
    background:#e9e9e9; 
    width:33.3%;
    padding:10px;
    text-align:right
}

#search > #data_field{
    margin:10px 0 10px;
    padding:5px;
    width:100px;
    float:right;
}

span.icon_clear{
    position:absolute;
    right:10px;
    top:0px;    
    display:none;
    cursor:pointer;
    font: bold 1em sans-serif;
    color:#38468F;  
}
span.icon_clear:hover{
    color:#f52;
}
.clearable{
    position:relative;
}
.data_field{
    padding-right:17px; /* add space for the 'x' icon*/
    width:100px;
}

jQuery

$(document).on('propertychange keyup input paste', 'input.data_field', function(){
    var io = $(this).val().length ? 1 : 0 ;
    $(this).next('.icon_clear').stop().fadeTo(300,io);
}).on('click', '.icon_clear', function() {
    $(this).delay(300).fadeTo(300,0).prev('input').val('');
});

機能に関する限り、それはまったく別の問題です。それは使用している言語によって異なります。ページのリロード時に結果を表示するか、それとも ajax を使用せずに表示するか、db スキームなどを使用します。しかし、基本的な検索は次のようになります。

  1. 検索フィールドをフォームで囲む
  2. フォームのアクションとメソッドを設定する
  3. アクションは、検索結果が表示されるページになります
于 2013-07-24T06:02:05.363 に答える