仿百度搜索提示框效果

<!doctype html><html><head>    <meta charset="UTF-8">    <title>百度搜索提示框</title>    <style>        * { margin: 0;padding: 0; outline: none;}        .search101 {            width: 650px;            margin: 300px auto;            font-size: 0;        }        .sou1 {            width: 514px;            height: 40px;            color: #666;            font: 16px Microsoft YaHei;            border: 1px solid rgba(170,170,170,.9);            border-right: 0;            border-radius: 2px 0 0 2px;            background: rgba(255,255,255,.9);            padding: 0 30px 0 3px;            vertical-align: top;            display: inline-block;            transition: .2s;        }        .sou2 {            width: 100px;            height: 42px;            font: 16px Microsoft YaHei;            color: rgba(255,255,255,.9);            background: rgba(0,170,240,1);            border: 0;            border-left: 1px solid rgba(0,170,240,1);            border-radius: 0 2px 2px 0;            margin: 0 0 0 -1px;            vertical-align: top;            transition: .3s;            display: inline-block;            cursor: pointer;        }        .sou2:hover {            background: rgba(0,140,220,.9);        }        .sou1:focus {            color: #333;            border: 1px solid rgba(0,170,240,1);            border-right: none;        }    </style></head>

<body><div class="search101">    <form action="http://www.baidu.com/baidu" class="search-form" method="" id="search-form">        <input id="ipt1" name="tn" type="hidden" value="baidu" >        <input type="text" id="sou1" class="sou1" name="word" baiduSug=1 onmouseover="focus()">        <input type="submit" class="sou2" value="百度一下" >    </form></div>

<script charset="gbk" src="http://www.baidu.com/js/opensug.js"></script><script>    var txtObj = document.getElementById("alertSpan");

function show(str){        txtObj.innerHTML = str;    }    var params = {        "XOffset": 0,                   //提示框位置横向偏移量,单位px        "YOffset": 0,                   //提示框位置纵向偏移量,单位px        "width": 204,                   //提示框宽度,单位px        "fontColor": "#666",            //提示框文字颜色        "fontColorHI": "#222",          //提示框高亮选择时文字颜色        "fontSize": "16px",             //文字大小        "fontFamily": "微软雅黑",       //文字字体        "borderColor": "#d8d8d8",       //提示框的边框颜色        "bgcolorHI": "#e8e8e8",         //提示框高亮选择的颜色        "sugSubmit": true              //在选择提示词条是是否提交表单     };    BaiduSuggestion.bind("ipt1",params,show);</script></body></html>
时间: 2025-02-01 14:44:57

仿百度搜索提示框效果的相关文章

百度搜索提示框

<!doctype html><html><head><meta charset="UTF-8"><title>百度搜索提示框</title><style>* { margin: 0;padding: 0; outline: none;}.search101 { width: 650px; margin: 300px auto; font-size: 0;} .sou1 { width: 514px;

如何实现类似百度搜索提示的效果

用PHP+Mysql的方式来举个例子: 一.进行拼音转换 首先要建立一个关键词库.这库具体内容就是自己找了,然后导入到一个表里. 然后用程序将表里的关键词首字母.全拼转换成拼音后一一对应到表里存储. 拼音转换可以参考我另一个篇文章: 二.对比查询 在输出查询页面前,将库中关键词的内容按拼音索引并排序(mysql有按拼音排序功能,如果是utf8的字段用 ORDER BY CONVERT( your_sort_field USING gbk ) ;)读到变量里,按拼音顺序排序好.然后在页面搜索框输入

vue-resource使用 (vue仿百度搜索)

1.this.$http.get()方法2.this.$http.post()方法3.this.$http.jsonp()方法 (vue仿百度搜索) 在输入框中输入a, 然后在百度f12 ==> network ==> 复制js https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&json=1&p=3&sid=1440_25548_21098_20719&req=2&csor=1&c

提示框第三方库之MBProgressHUD iOS toast效果 动态提示框效果

提示框第三方库之MBProgressHUD iOS toast效果 动态提示框效果 2014-08-11 17:39 11614人阅读 评论(0) 收藏 举报  分类: iOS相关(20)  文章来自:http://blog.csdn.net/ryantang03/article/details/7877120 MBProgressHUD是一个开源项目,实现了很多种样式的提示框,使用上简单.方便,并且可以对显示的内容进行自定义,功能很强大,很多项目中都有使用到.到GitHub上可以下载到项目源码

确定和取消提示框效果

确定和取消提示框效果:在很多网页都有这样的效果,当点击一个按钮或者其他的对象会弹出一个提示框,如果点击确定则继续执行既定的程序,如果点击取消则会取消继续执行,代码实例如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="auth

JS组件Bootstrap实现弹出框和提示框效果代码

JS组件Bootstrap实现弹出框和提示框效果代码 作者:懒得安分 字体:[增加 减小] 类型:转载 时间:2015-12-08我要评论 这篇文章主要介绍了JS组件Bootstrap实现弹出框和提示框效果代码,对弹出框和提示框感兴趣的小伙伴们可以参考一下 前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编 辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的系统有一个友好的弹出提示框,自然能给用户

JS组件系列——Bootstrap寒冬暖身篇:弹出框和提示框效果以及代码展示

原文:JS组件系列--Bootstrap寒冬暖身篇:弹出框和提示框效果以及代码展示 前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的系统有一个友好的弹出提示框,自然能给用户很好的页面体验.前面几章介绍了bootstrap的几个常用组件,这章来看看bootstrap里面弹出框和提示框的处理.总的来说,弹出提示主要分为三种:弹出框.确定取消提示框.信

仿百度首页选项卡切换效果

效果:http://hovertree.com/texiao/jquery/71/ 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery仿百度首页选项卡切换效果 - 何问起</title> <base ta

Android AutoCompleteTextView控件实现类似百度搜索提示,限制输入数字长度

Android AutoCompleteTextView 控件实现类似被搜索提示,效果如下 1.首先贴出布局代码 activity_main.xml: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="f