使用 HTML 和 CSS 模仿 apple.com 全局搜索输入字段

Question

好的，所以如果您查看 http://www.marioplanet.com 您会发现我正在尝试模仿 apple.com 的菜单栏设计，包括我的全局搜索栏。

现在，我正在尝试尽可能模仿 Apple 的全局搜索栏输入字段，因此我在这里需要一些帮助。

我希望该字段位于中间居中，我尝试使用 maring: auto auto; 但这不起作用。

我还想使用来自 Apple 网站的圆角技术，但我不知道该怎么做。那是 CSS3 吗？

我还需要一个显示为 Search 的灰色占位符字符串，但我想我可以使用 JS 来实现这一点。如果可以使用 HTML 或 CSS，请告诉我。

与输入字段左侧对齐的小聚光灯/放大镜图像很好，但不是必需的:)

好的，您可以查看该站点，但这里还有代码：

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：

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：

/* 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; }

谢谢！

Answer 1

在包含文本框的 div 上尝试 text-align: center;边框宽度：0px； margin-top: 6px; 要制作水印，请尝试 jquery 水印插件

圆角苹果将图像插入到跨度的两端。我见过放大镜是这样完成的，或者通过将图像设置为背景图像并添加填充以避免覆盖它。

如果您下载 firebug for firefox，这样您就可以自己探索标记和 CSS，这非常简单。

希望这有帮助。

Answer 2

我使用 Firebug 和 Web Developer 扩展来查找以下内容...

Apple 肯定使用 javascript（当然还有 css）来使搜索框看起来很漂亮。

如果您使用 noscript 关闭 javascript，您将看到一个正常的方形文本框。

您可以检查以下 javascript 和 css 文件以了解发生了什么。

http://images.apple.com/global/scripts/search_decorator.js

http://images.apple.com/global/nav/styles/nav css 文件中的.css

查看以下规则集

#globalsearch .search-wrapper .left

，

#globalsearch .search-wrapper .right

以下是用于创建搜索框的图像

http://images.apple.com/global/nav/images/searchfield_leftcap.png

http://images.apple.com/global/nav/images/searchfield_rightcap.png

我发现了以下有趣的事情。

• 他们有专用的脚本文件只是为了使搜索框看起来漂亮
• 他们不使用图像精灵。
• 我尝试 smush 以上图像之一，并且能够将其压缩 15%（它可能看起来微不足道，但当您查看有数百万人访问的网站时，这可能会成为一个很大的数字）