Хорошо, поэтому, если вы посмотрите 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; }
Спасибо!
Я использовал расширение 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
Я нашел следующие интересные вещи
div, содержащий текстовое поле try text-align: center; ширина границы: 0 пикселей; margin-top: 6px;
для установки водяного знака попробуйте плагин водяного знака jquery
Для закругленных углов яблоко вставляет изображения в промежутки с любого конца. Я видел увеличительное стекло, сделанное таким образом или установив изображение как background-image
и добавив отступы, чтобы избежать его перезаписи.
Если бы я был на вашем месте, я бы загрузил firebug для firefox, чтобы вы могли самостоятельно изучить разметку и CSS, это довольно просто.
Надеюсь, это поможет.