Главная » 2010 » Март » 11 » Создание красивого поиска для сайтов на uCoz
22:40
Создание красивого поиска для сайтов на uCoz



В этом уроке будем создавать красивый поиск для сайтов на ucoz. Сейчас сделаем поиск который будет смотреться одинаково во всех браузерах, лично я на это надеюсь, так как проверял в опере, лисе, хроме и ie, но думаю в остальных будет смотреться также.

Начнём!

1)Для начала я создал картинку которая будет фоном поиска (293х60/01.gif)

2)Далее нашел небольшой значок с лупой и сделал спрайт (68х120/1.png)

3)Сам поиск:

Code
<form action="http://7ucoz.com/news/" id="poisk" method="post">   
<div style="position:relative;">   
    <input type="text" name="query" id="forma" value="search..." onfocus="if(this.value=='search...')this.value=''" onblur="if(this.value=='')this.value='search...'"/>   
    <input class="knp" name="sfSbm" type="submit" value="" />   
    <input name="a" value="14" type="hidden">   
</div>   
    </form>

Я добавил див с position:relative для того чтобы выровнять кнопку с лупой при помощи position:absolute.

4)В CSS:

Code
#poisk {   
background:url(images/01.gif) no-repeat;    
width:293px; /* ширина */   
height:60px; /* Высота */   
padding-top:17px; /* смещаем всё что внутри в низ, чтобы было ровно */   
}   

#forma {   
background:none; /* убираем белый фон */   
font-size:18px; /* размер шрифта */   
font-family:Verdana; /* Шрифт */   
color:#bba78b; /* цвет шрифта */   
margin-left:20px; /* смещаем в право слово search */   
border:none; /* убираем обводку */   
}   

.knp {   
background:url(images/1.png) no-repeat;   
width:60px;   
height:60px;   
border:none; /* убираем обводку */   
position:absolute; /* для того чтобы можно было сместить вверх */   
top:-16px; /* Смещаем вверх кнопку с лупой */   
}   

.knp:hover {   
background:url(images/1.png) 0px -60px no-repeat;   
cursor:pointer; /* курсор в виде руки */   
}

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

Демо

Источник:

[ Чтобы скачать файл зарегистрируйтесь, или войдите под своим логином ]

Битая ссылка!


Категория: Скрипты для uCoz | Просмотров: 2944 | Добавил: FOREVER | Рейтинг: 5.0/2
Всего комментариев: 4
0
а как поменять слово search на поиск????


0
В этом коде:
Code
<form action="http://7ucoz.com/news/" id="poisk" method="post">  
<div style="position:relative;">  
  <input type="text" name="query" id="forma" value="search..." onfocus="if(this.value=='search...')this.value=''" onblur="if(this.value=='')this.value='search...'"/>  
  <input class="knp" name="sfSbm" type="submit" value="" />  
  <input name="a" value="14" type="hidden">  
</div>  
  </form>

замени везде search... на поиск...

wink



0
Слушай, классный урок. Особенно для тех кто вообще мало шарит в скриптах.


0
тот же вопрос... КАК?


Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]