HTML练习 | 百度搜索框
<!DOCTYPE html>
<head>
<title>百度首页</title>
<style>
.logo{
background:url('https://www.baidu.com/img/bd_logo1.png?where=super') 50px 30px no-repeat;
background-size: 70%;
height: 200px;
width: 400px;
margin: 200px auto 0 auto;
}
.search{
width: 640px;
height: 40px;
margin: auto;
font-size:0; /*两个Input框紧邻方法:父级标签及以上加font—size:0 */
}
.search01{
border:1px solid #b3b3b3;
width: 538px;
height: 38px;
padding: 0px;
vertical-align: top; /*两个Input框上不齐时方法一:上居中;方法二:folat*/
}
.search02{
border: 0;
padding: 0;
color: #FFFFFF;
font-size:15px;
background: #3388FF;
width: 100px;
height: 40px;
}
</style>
<body>
<div class="logo">
</div >
<div class="search">
<form action="https://www.baidu.com/s" method="get">
<input type="text" class="search01">
<input type="submit" value="百度一下" class="search02">
</form>
</div>
</body>
HTML练习 | 百度搜索框的更多相关文章
- Ajax以及类似百度搜索框的demo
public class Ajax01 extends HttpServlet{ @Override protected void service(HttpServletRequest request ...
- JavaScript实现模糊推荐的input框(类似百度搜索框)
如何用JS实现一个类似百度搜索框的输入框呢,再填充完失去焦点时,自动填充配置项,最终效果如下图: 实现很简单,但是易用性会上升一大截,需要用到的有jquery-ui的autocomplete,jque ...
- 使用 Vue.js 2.0+ Vue-resource 模仿百度搜索框
使用 Vue.js 2.0 模仿百度搜索框 <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...
- React实现最完整的百度搜索框
import React,{Component} from 'react' import ReactDOM,{render} from 'react-dom' import 'bootstrap/di ...
- Ajax跨域:Jsonp实例--百度搜索框下拉提示
Ajax跨域:Jsonp实例--百度搜索框下拉提示 一.总结 一句话总结:a.找好接口:b.用script标签的src引入文件(json数据):c.定义及实现上一步引入文件中的函数 1.如何找到一个网 ...
- window系统谷歌浏览器百度搜索框光标不能输入并且不显示光标----自制bug以及解决
--------------------bug无处不在------------------------- 今天在搞代码的时候,保存文件无意中犯了个致命错误,文件名称写入非法字符,可能与Windows系 ...
- JS---DOM---案例:模拟百度搜索框
模拟百度搜索框 我的思路整理: 1. 注册文本框抬起事件(onkeyup) 2. 处理函数: --->创建临时数组,循环遍历文本框键入的文字内容和keywords数组,用keyWords[i]. ...
- 【JavaScript_DOM 百度搜索框】
今天给大家带来的事一个简单的百度的历史搜索框,大家在搜索东西的时候,百度会自动给你显示你最近搜索过的一些东西,那这个拿js怎么做呢? 我们一起来学习吧 这是一个HTML页面: <!DOCTYPE ...
- js实现百度搜索框滑动固定顶部
现在很多主流系统例如百度.有道.爱奇艺等的搜索框都有一个特点,滑动到刚好看不到搜索框时,固定搜索框到顶部,这也算是一个对用户友好型的操 作. 在看了百度的js和css后自己摸索出来实现效果,还是学艺不 ...
- typecho博客组插件:openSug.js百度搜索框下拉提示免费代码
Typecho候选搜索增强插件:安装openSug插件即可获得带有“搜索框提示”功能的搜索框,让Typecho搜索更便捷! 支持百度.谷歌.雅虎.Yandex.360好搜.UC神马.酷狗.优酷.淘 ...
随机推荐
- Instruments Tutorial for iOS: How To Debug Memory Leaks【转】
If you're new here, you may want to subscribe to my RSS feed or follow me on Twitter. Thanks for vis ...
- POJ1753 Flip Game(位运算+暴力枚举)
Flip game is played on a rectangular 4x4 field with two-sided pieces placed on each of its 16 square ...
- 百度UEditor富文本编辑器去除自动追加p标签
本篇文章还原了我在遇到这个问题时的解决过程: 找到ueditor.all.js文件,搜索 me.addInputRule(function(root){ 或者直接搜索 //进入编辑器的li要套p标签 ...
- Windows实用功能
查看程序crash日志:"Computer Management"-"System Tools"-"Event Viewer"-" ...
- Jquery remove() empty() css()
1删除元素remove,empty remove() 和 empty()的区别 remove:包括选中的元素包括其子元素, empty:清除其子元素. 2.css属性 多属性使用{}括起来. &l ...
- kali linux之防火墙识别
通过检查回包,可能识别端口是否经过防火墙过滤,设备多种多样,结果存在一定的误差 Send Response Type SYN NO Filtered(先发送syn 如果不给回复 防火墙可 ...
- (获取qq群成员信息,并下载头像,每个群保存一个文件夹)
# 1.获取到自己qq里面所有的群,并且保存每个群里面的群成员信息到mongodb里面# 下载每个群的群成员的头像# 1.抓包,抓到获取自己所有qq群的接口 requests模块 https://qu ...
- 【spring cloud】并发测试问题
一,问题 并发测试,对外接口测试50个并发的时候开发报错,报错信息类似如下: {"status":"0500","message":&qu ...
- location的属性
http://localhost:8080/?a=b#/login location.host "localhost:8080" location.port 8080 locati ...
- 两种unix网络编程线程池的设计方法
unp27章节中的27.12中,我们的子线程是通过操作共享任务缓冲区,得到task的,也就是通过线程间共享的clifd[]数组,这个数组其实就是我们的任务数组,得到其中的connfd资源. 我们对这个 ...