16:34 Делаем своими руками красивый поиск | |
![]() Начнём! 1)Для начала я создал картинку которая будет фоном поиска (293х60/01.gif) ![]() ![]() Code <form action="http://Rucoz.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> 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; /* курсор в виде руки */ } | |
|
Всего комментариев: 0 | |