自己做的一个漂亮的搜索框.

二月13

现在网页美观可以说是每个站长都要注重的东西, 普通文本+按钮式的搜索框已经无法满足网页整体的美观. 所以制作一些更漂亮的搜索框则显得尤为重要. 本人也做了一个搜索框给大家分享,走的是比较简洁的路线希望大家喜欢.

这里是最终样式:

这个搜索框主要用了div+css没什么难度

也稍微提示一下制作此类关键点:

要把文本框变透明, 要在css里设置4条边框为无,不然默认情况下文本框边框为实线,然后把背景设为transparent (透明,如果有必要的话.)
提交按钮比较关键,为了不破坏整个搜索框的美观, 用原来的按钮式提交是不行D, 这里方法就是把Search做成图片形式的提交方法如下: <input type=”image” src=”图片地址”>. 我也百度过发现网上很多人用的是JS+图片的方法来提交(图片img标签里加入onclick属性), 这样比较复杂但是如果图片要和表单离开很远这个方法就比较好,不用把真个网页都放到一个表单里, 这里就不提供怎么做了, “百度一下tm”吧.

图片素材: 1. 2.

完整的HTML代码:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

<title>ljzlxj</title>

<style>

.search_bar {

background-color: transparent;

border-top-style: none;

border-right-style: none;

border-bottom-style: none;

border-left-style: none;

height: 25px;

width: 180px;

background-image: url(images/search_bar.jpg);

background-repeat: no-repeat;

background-position: left center;

position: relative;

}

.search_textfield {

border-top-style: none;

border-right-style: none;

border-bottom-style: none;

border-left-style: none;

background-color: transparent;

width: 110px;

}

.search_bar_Send {

background-color: transparent;

border-top-style: none;

border-right-style: none;

border-bottom-style: none;

border-left-style: none;

}

</style>

<body>

<form action=”#” method=”get”>

<div class=”search_bar”>

<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″>

<tr>

<td align=”right”>

<input class=”search_textfield” name=”search_textfield” type=”text” id=”textfield” value=”Search” maxlength=”50″ />

</td>

<td width=”47″ align=”left” valign=”middle” ><input type=”image” src=”images/search_bar_send.jpg” style=”height:25;width:45;” name=”search_send”/></td>

</tr>

</table>

</div>

</form>

</body>

</html>