将搜索框从旧网站转移到新网站
[英] Transfer Search Box From Old Website to New Website
本文介绍了将搜索框从旧网站转移到新网站的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在这家公司工作，该公司聘请我将他们的新主页设计转换为 html 和 css.在他们给我的设计中，标题中有一个搜索框，他们希望与当前网页上的搜索框相同 (http://shop.manorfinewares.com/intro.html).我不确定如何导航他们当前页面的源代码，以便成功地将搜索框转移到我为他们设计的新页面.这是我到目前为止的标题代码...
CSS:
#header{位置:绝对；宽度:100%；顶部:0;高度:107px；最小宽度:600px；边框底部:1px 虚线 #86beca;}#headerContainer{位置:相对；宽度:100%；保证金:0 自动；顶部:0;高度:107px；最大宽度:1280px；最小宽度:600px；边框底部:1px 虚线 #86beca;}.headerUtilityContainer{向左飘浮;填充顶部:4px;左边距:8%；宽度:22%；高度:103px；}.headerUtilityContainer img{向左飘浮;边距顶部:2px;宽度:40%；高度:9px；}.headerLogoContainer{向左飘浮;边距:0px；宽度:40%；高度:107px；}.headerLogoContainer img {显示:块；边距顶部:30px;左边距:自动；边距右:自动；宽度:55%；最大宽度:250px；高度:57%；}.searchContainer{向左飘浮;文本对齐:右；字体大小:70%；填充顶部:4px;右边距:8%；宽度:22%；高度:103px；}.headerBorderDiv{向左飘浮;宽度:100%；保证金:0 自动；填充:0px;高度:2px；边框底部:1px 虚线 #86beca;
HTML:
<div class="headerLogoContainer"><img src="images/homePageLogo.png"/>
<div class="searchContainer">登录/注册购物车 (0)
任何建议都会非常有帮助，因为我不确定从哪里开始.我以前从未使用过 XLS 搜索栏
解决方案
目前还不清楚您到底想要什么，一个带有清晰图标的右侧浮动搜索栏?我为您创建了这个小提琴，它复制了您提到的网站的行为.
http://jsfiddle.net/DP22Y/
HTML
<div id="utility">Utility</div><!----><div id="logo">标志</div><!----><div id="search">登录/注册 |购物车 (0)<span class="clearable"><input class="data_field" type="text" name="search" placeholder="Search..."/><span class="icon_clear">x</span></span>
CSS
#container{保证金:0 自动；高度:100px；宽度:80%；}#utility, #logo, #search{box-sizing: 边框框；颜色:#000；高度:100%；向左飘浮;}#公用事业{背景:#f1f1f1;宽度:33.3%；填充:10px；}#商标{背景:#e0e0e0;宽度:33.3%；填充:10px；}#搜索{背景:#e9e9e9;宽度:33.3%；填充:10px；文本对齐:右}#搜索 >#data_field{边距:10px 0 10px;填充:5px；宽度:100px；浮动:右；}span.icon_clear{位置:绝对；右:10px；顶部:0px;显示:无；游标:指针；字体:粗体 1em sans-serif；颜色:#38468F；}span.icon_clear:悬停{颜色:#f52；}.clearable{位置:相对；}.data_field{填充右:17px;/* 为x"图标添加空格*/宽度: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 方案等.但基本的搜索将是这样的
- 用表单包裹搜索字段
- 为表单设置动作和方法
- Action 将是显示搜索结果的页面
I am working for this company that has hired me to turn a new home page design of theirs into html and css. In the design they gave me there is a search box in the header that they would like to be same as the one on their current webpage (http://shop.manorfinewares.com/intro.html). I am unsure how to navigate their current page's source code in order to successfully transfer the search box to the new page I am designing for them. Here is the header code that I have so far...
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>
ANY advice will be very helpful as I am not sure where to start. I have never worked with XLS search bars in the past
解决方案
It's still unclear as to what exactly you want, a right floated search bar with clear icon on input? I have created this fiddle for you, it replicates the behaviour of site you mentioned.
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('');
});
As far as the functionality is concerned, that is a different question altogether. That depends on what language you are using, do you want to make the results appear on page reload or without that using ajax, whats the db scheme etc. But the basic search would be something like this
- Wrap search field with a form
- Set an action and method for the form
- Action will be the page the search results will be shown on
这篇关于将搜索框从旧网站转移到新网站的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
