Поле ввода глобального поиска apple mimic с HTML и CSS

Хорошо, поэтому, если вы посмотрите http://www.marioplanet.com , вы увидите, что я пытаюсь имитировать дизайн Apple .com для моей строки меню, включая мою глобальную панель поиска.

Теперь я пытаюсь имитировать поле ввода Apple для глобальной панели поиска, как можно ближе, поэтому мне нужна помощь здесь.

Я бы хотел, чтобы поле было центрировано по центру, что я попытался с помощью maring: auto auto; , но это не сработало ..

Я также хотел бы использовать технику закругленных углов с сайта Apple, но я не уверен, как это сделать. Это CSS3?

Мне также нужно иметь закрашенную серым цветом строку-заполнитель, читающую Поиск , но я думаю, что смогу использовать JS для этого. Если вы можете использовать HTML или CSS, пожалуйста, дайте мне знать.

Небольшое изображение прожектора / увеличительного стекла, выровненное по левой стороне поля ввода, приятно, но не обязательно:)

Хорошо, вы можете проверить сайт , но вот код также:

index.htm:


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

Спасибо!

1
задан Qcom 16 August 2010 в 15:16
поделиться

2 ответа

Я использовал расширение Firebug и Web Developer, чтобы найти следующие ...

Apple определенно использует javascript (и, конечно, css), чтобы окно поиска выглядело красиво.

если вы выключите javascript с помощью noscript, вы увидите обычное квадратное текстовое поле.

Вы можете проверить следующие файлы 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

Я нашел следующие интересные вещи

  • У них есть специальный файл сценария, чтобы окно поиска выглядело красиво.
  • Они не используют спрайты изображений.
  • Я попытался смазать одно из приведенных выше изображений, и мне удалось сместить его на 15% (это может показаться тривиальным, но когда вы смотрите на веб-сайт, который посещают миллионы, это может стать большим числом)
1
ответ дан 2 September 2019 в 22:07
поделиться

div, содержащий текстовое поле try text-align: center; ширина границы: 0 пикселей; margin-top: 6px; для установки водяного знака попробуйте плагин водяного знака jquery

Для закругленных углов яблоко вставляет изображения в промежутки с любого конца. Я видел увеличительное стекло, сделанное таким образом или установив изображение как background-image и добавив отступы, чтобы избежать его перезаписи.

Если бы я был на вашем месте, я бы загрузил firebug для firefox, чтобы вы могли самостоятельно изучить разметку и CSS, это довольно просто.

Надеюсь, это поможет.

1
ответ дан 2 September 2019 в 22:07
поделиться