0

我正在为这家公司工作，该公司聘请我将他们的新主页设计转换为 html 和 css。在他们给我的设计中，标题中有一个搜索框，他们希望与当前网页（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 回答