网页制作帮看看。

我就想知道，下面这个百度搜索和邮箱登录怎么做的。。

搜索框部分用JS+CSS配合设计就可以了，这样的代码网上有很多的。

给个例吧

-

HTML代码：
<div class="sidebarBlock" style="margin:0 auto; text-align:center;">
 

 <h3>仿百度搜索输入框提示JS代码（基于jquery.autocomplete.js插件）</h3>
  <form id="formkeyword" name="formkeyword" method="post" action="post.php">
  <div class="sidebarSearch">
    <input type="text" name="keyword" size="40" maxlength="255" value="" id="keyword" class="text"></input>
    <input type="submit" value="搜索" class="button"></input>
  </div>
  </form>
</div>
这是html的搜索框
JS代码：
<link href="css/jquery.autocomplete.css" type=text/css rel=stylesheet>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.autocomplete.js"></script>
<script language="javascript">
    $(document).ready(function() {
    $("#keyword").autocomplete("getajaxtag.php",
    {
    delay:10,
    minChars:1,
    matchSubset:1,
    matchContains:1,
    cacheLength:10,
    onItemSelect:selectItem,
    onFindValue:findValue,
    formatItem:formatItem,
    autoFill:false
    }
    );
    });
    function findValue(li) {
    if( li == null ) return alert("No match!");
    if( !!li.extra ) var sValue = li.extra[0];
    else var sValue = li.selectValue;
    }
    function selectItem(li) { findValue(li);}
    function formatItem(row) { return row[0];//return row[0] + " (id: " + row[1] + ")"//如果有其他参数调用row[1]，对应输出格式Sparta|896
    }
    function lookupAjax(){
    var oSuggest = $("#keyword")[0].autocompleter;
    oSuggest.findValue();
    return false;
    }
</script>
Ajax获取后台数据库代码：
getajaxtag.php
<?php
include_once ('conn/conn.php');
$keyword = iconv ( 'utf-8', 'GBK', js_unescape ( $_GET ['q'] ) );
$sql =mysql_query ( "SELECT DISTINCT(tagname) FROM uchome_tag WHERe  tagname LIKE '%" . $keyword . "%'  LIMIT 0,10" );
while ( $value = mysql_fetch_array ( $sql ) ) {
  echo $keyword = iconv ( 'GBK', 'utf-8', $value ['tagname'] ) . "n";
}
function js_unescape($str) {
  $ret = '';
  $len = strlen ( $str );
  for($i = 0; $i < $len; $i ++) {
    if ($str [$i] == '%' && $str [$i + 1] == 'u') {
    $val = hexdec ( substr ( $str, $i + 2, 4 ) );
    if ($val < 0x7f)
    $ret .= chr ( $val );
    else if ($val < 0x800)
    $ret .= chr ( 0xc0 | ($val >> 6) ) . chr ( 0x80 | ($val & 0x3f) );
    else
    $ret .= chr ( 0xe0 | ($val >> 12) ) . chr ( 0x80 | (($val >> 6) & 0x3f) ) . chr ( 0x80 | ($val & 0x3f) );
    $i += 5;
    } else if ($str [$i] == '%') {
    $ret .= urldecode ( substr ( $str, $i, 3 ) );
    $i += 2;
    } else
    $ret .= $str [$i];
  }
  return $ret;
}
?>

这是PHP的，不知道你是用什么编的。

邮箱登录部分就更简单了

<form onsubmit="return chkinput2(this);" method="post" action=" http://www.hao123.com/sendmail.php" name="loginmail">
    <td align="middle"> </td>
    <strong><font color="#cc6600">邮箱快速登陆</font></strong> <input style="FONT-SIZE: 12px" tabindex="1" size="18" name="user" /> 信箱：<select tabindex="2" size="1" name="site">
    <option selected="selected">请选择信箱</option>
    <option value="163.com">@163.com 网易</option>
    <option value="sina.com">@sina.com 新浪</option>
    <option value="126.com">@126.com 网易</option>
    <option value="cn.yahoo.com">@yahoo.com.cn 雅虎</option>
    <option value="163.net">@163.net</option>
    <option value="21cn.com">@21cn.com</option>
    <option value="sohu.com">@sohu.com 搜狐</option>
    <option value="tom.com">@tom.com</option>
    <option value="vip.163.com">@vip.163.com</option>
    <option value="263.net">@263.net</option>
    <option value="vip.sina.com">@vip.sina.com新浪VIP</option>
    <option value="mail.china.com">@mail.china.com</option>
    <option value="china.com">@china.com</option>
    <option value="netease.com">@netease.com</option>
    <option value="yeah.net">@yeah.net</option>
    <option value="etang.com">@etang.com 亿唐</option>
    <option value="xinhuanet.com">@xinhuanet.com新华网</option>
    <option value="eyou.com">@eyou.com 亿邮</option>
    <option value="citiz.net">@citiz.net 上海热线</option>
    <option value="56.com">@56.com</option>
    <option value="188.com">@188.com</option>
    <option value="gmail.com">@gmail.com</option>
    </select> 密码： <input style="FONT-SIZE: 12px" tabindex="3" size="15" type="password" name="pass" /> <input style="FONT-SIZE: 12px" tabindex="4" onclick="setTimeout('clearpass()',1000)" type="submit" name="Submit2" value="登录" />
</form>
<table border="0" cellspacing="0" cellpadding="0" width="778">
<form action=" http://www.baidu.com/s" name="f">
    </form>
    <tbody>
    </tbody>
</table>

方法很多，自己试试吧，觉得你应该是新手

百度搜索你可以直接上百度看他的代码 这里就不重复了 邮箱登陆是用简单的HTML语言写的表单提交 然后用过一门后台语言判断之后决定是否正确登录到邮箱

这个应用到了webserviceS业务，通过调用接口实现的，就好比支付宝的网银支付一样

http://www.baidu.com/search/freecode.html

 这个是在百度搜索帮助中心的链接，里面有几种样式，选好之后放到你的网页代码里面去就可以了。

有表单的..通过js改变表单的提交地址  action="这个就是提交地址"

这个是连接到数据库的查询而已，没什么技术含量。

如果你需要知道如何做，必须学会一门语言，和一种数据库

百度搜索就不说了，这个是百度给你的代码你照搬就可以了。或者看这位同学留得地址。邮箱登陆的代码给你贴上来，你研究研究。

<form name="mail" method="post" onsubmit="MailLogin.sendMail();return false;" action="" target="_blank"> <table cellspacing="0"> <tr><td width="30px" nowrap>帐号</td><td colspan=2><input type="text" id="hao_mail_username" name="hao_mail_username" value=""></td></tr> <tr><td>邮箱</td><td colspan=2><select id="hao_mail_options" onchange="MailLogin.change(this)"><option>--请选择--</option><option>@163.com 网易</option><option>@126.com 网易</option><option>登录百度</option><option>人人网</option><option>@sina.com 新浪</option><option>@yahoo.com.cn</option><option>@yahoo.cn</option><option>@sohu.com 搜狐</option><option>@tom.com</option><option>@21cn.com</option><option>@yeah.net</option><option>51.com</option><option>天涯社区</option><option>ChinaRen</option><option>以下请在弹出页登录↓</option><option>QQ空间</option><option>@qq.com</option><option>@gmail.com</option><option>@hotmail.com</option><option>@139.com</option><option>开心网</option></select></td></tr> <tr><td>密码</td><td><input id="hao_mail_passwd" name="hao_mail_passwd" type="password" value=""></td><td><button type="submit">登录</button></td></tr> </table></form>

如以上回答内容为低俗、色情、不良、暴力、侵权、涉及违法等信息，可以点下面链接进行举报！

点此我要举报以上问答信息