【发布时间】：2011-03-30 12:02:06
【问题描述】：
好的，如果您查看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; }
谢谢！
【问题讨论】：
-
我只是喜欢他们的设计，尽管我的导航栏几乎是直接克隆的.. xD