模仿带HTML和CSS的apple.com globalsearch输入字段 [英] Mimic apple.com globalsearch input field with HTML and CSS
问题描述
好的，所以如果您查看 http://www.marioplanet.com ，您会发现我我正在尝试模仿菜单栏(包括全局搜索栏)的apple.com设计.
OK, so if you check out http://www.marioplanet.com you can see that I am trying to mimic the design of apple.com for my menu bar, including my global search bar.
现在，我正在尝试模仿Apple的全局搜索栏输入栏，该栏应尽可能接近，因此在这里我需要一些帮助.
Now, I'm trying to mimic Apple's input field for the global search bar, as close as I possibly can, so I need some help here.
我希望该字段居中，我尝试使用maring: auto auto;将该字段居中，但这没用.
I would like the field to be centered in the middle, which I tried by using maring: auto auto; but that did not work..
我也想使用Apple网站上的圆角技术，但是我不确定该怎么做.那是CSS3吗?
I also would like to use the rounded corner technique, from Apple's site, but I'm not sure how to do that. Is that CSS3?
我还需要将灰色的占位符字符串读取为Search，但我想我可以为此使用JS.如果可以使用HTML或CSS，请告诉我.
I also need to have a grayed out placeholder string reading Search but I think I may be able to use JS for that. If can use HTML or CSS, please let me know.
与输入字段左侧对齐的小聚光灯/放大镜图像很好，但不是必需的:)
The little spotlight / magnifying glass image aligned to the left side of the input field is nice, but not necessary :)
好的，您可以签出该站点，但是下面的代码也是如此:
OK, you can check out the site, but here is the code as well:
index.htm:
index.htm:
<div id="globalheader" class="apple">
<!--googleoff: all-->
<ul id="globalnav">
<li id="gn-home"><a href="index.htm">Home</a></li>
<li id="gn-catalog"><a href="catalog.asp">Shop!</a></li>
<li id="gn-about"><a href="about.htm">About</a></li>
<li id="gn-contact"><a href="contact.htm">Contact</a></li>
<li id="gn-media"><a href="media.htm">Media</a></li>
</ul>
<div id="globalsearch">
<form id="searchform">
<div>
<input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" />
</div>
<div id="suggestions"></div>
</form>
</div>
<!--googleon: all-->
</div>
default.css:
default.css:
body {
background-color: #666666;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
#header {
background-color: #DDDDDD;
width: 1130px;
margin: 0px auto;
}
#content {
width: 1130px;
margin: 0px auto;
}
#leftcol {
background-color:#EBEBEB;
width: 200px;
height: 550px;
font-size:14px;
clear: both;
float: left;
}
#detail {
background-color:#FFFFFF;
width: 730px;
height: 550px;
font-size:12px;
float: left;
}
#rightcol {
background-color:#EBEBEB;
width: 200px;
height: 550px;
font-size:14px;
float: left;
}
#footer {
background-color:#DDDDDD;
width: 1130px;
height:90px;
font-size:12px;
text-align:center;
clear: both;
margin: 0px auto;
}
h1 {
color: #FF0000;
}
h2 {
color:#FF0000;
}
a:link {
color:#FF0000;
}
a:visited {
color:#FF0000;
}
a:hover {
color:#00FF00;
}
a:active {
color:#FF0000;
}
img {
border:none;
}
#eznetseal {
text-align:center;
}
a.trayIcon {
position: relative;
top: 20px;
}
a.trayIcon:hover {
top: 7px;
}
#twittericon {
left: 0px;
}
#facebookicon {
left: 22.5px;;
}
#youtubeicon {
left: 45px;;
}
#tray {
position:relative;
}
#container {
position:relative;
margin-top: -40px;
}
#nav li
{
display: inline;
}
#features
{
vertical-align: top;
}
globalsearch.css:
globalsearch.css:
/* BASIC RESET */
body, div, img, p { padding:0; margin:0; }
a img { border:0 }
/* HTML ELEMENTS */
body { font-family:"Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif; }
/* COMMON CLASSES */
.break { clear:both; }
/* SEARCH FORM */
#searchform { margin:auto auto; font-size:18px; }
#searchform div { color:#eeeeee; }
#searchform div input { font-size:18px; width:120px; }
#suggestions{ position: relative; left:235px; width:320px; display:none; }
/* SEARCHRESULTS */
#searchresults { border-width:1px; border-color:#919191; border-style:solid; width:320px; background-color:#a0a0a0; font-size:10px; line-height:14px; }
#searchresults a { display:block; background-color:#e4e4e4; clear:left; height:56px; text-decoration:none; }
#searchresults a:hover { background-color:#b7b7b7; color:#ffffff; }
#searchresults a img { float:left; padding:5px 10px; }
#searchresults a span.searchheading { display:block; font-weight:bold; padding-top:5px; color:#191919; }
#searchresults a:hover span.searchheading { color:#ffffff; }
#searchresults a span { color:#555555; }
#searchresults a:hover span { color:#f1f1f1; }
#searchresults span.category { font-size:11px; margin:5px; display:block; color:#ffffff; }
#searchresults span.seperator { float:right; padding-right:15px; margin-right:5px;
background-image:url(../images/shortcuts_arrow.gif); background-repeat:no-repeat; background-position:right; }
#searchresults span.seperator a { background-color:transparent; display:block; margin:5px; height:auto; color:#ffffff; }
谢谢！
推荐答案
我使用Firebug和Web Developer扩展来查找以下内容...
I used Firebug and Web Developer extension to find following...
Apple一定会使用javascript(当然还有CSS)来使搜索框看起来更可爱.
Apple definately use javascript ( and of course css) to make that search box look preety.
如果您使用noscript打开javascript，您将看到一个普通的方形文本框.
if you turn of javascript using noscript you will see a normal square text box.
您可以检查以下javascript和CSS文件，以了解发生了什么情况.
you can check following javascript and css files to figure out whats going on.
http://images.apple.com/global/scripts/search_decorator.js
http://images.apple.com/global/nav/styles /nav.css
css文件中的
查看以下规则集
in css files take a look at following rule set
#globalsearch .search-wrapper .left
和
#globalsearch .search-wrapper .right
以下是用于创建搜索框的图像
following are the images used to create the search box
http://images.apple.com/global/nav/images /searchfield_leftcap.png
http://images.apple.com/global/nav/images /searchfield_rightcap.png
我发现以下有趣的事情.
I found following interesting things.
- 他们有专用的脚本文件，只是为了使搜索框看起来更漂亮
- 它们不使用图像精灵.
- 我尝试涂抹上面的一张图片，并能够将其涂抹15％(看似微不足道，但当您浏览数以百万计的网站时，这个数字可能会很大)
- They have dedicated script file just to make that search box look pretty
- They do not use image sprites.
- I tried to smush one of the above images and was able to smush it by 15% ( it might look trivial but when you are looking at website visited by millions this can become a big number )
这篇关于模仿带HTML和CSS的apple.com globalsearch输入字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
