<!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练习 | 百度搜索框的更多相关文章

  1. Ajax以及类似百度搜索框的demo

    public class Ajax01 extends HttpServlet{ @Override protected void service(HttpServletRequest request ...

  2. JavaScript实现模糊推荐的input框(类似百度搜索框)

    如何用JS实现一个类似百度搜索框的输入框呢,再填充完失去焦点时,自动填充配置项,最终效果如下图: 实现很简单,但是易用性会上升一大截,需要用到的有jquery-ui的autocomplete,jque ...

  3. 使用 Vue.js 2.0+ Vue-resource 模仿百度搜索框

    使用 Vue.js 2.0 模仿百度搜索框 <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...

  4. React实现最完整的百度搜索框

    import React,{Component} from 'react' import ReactDOM,{render} from 'react-dom' import 'bootstrap/di ...

  5. Ajax跨域：Jsonp实例--百度搜索框下拉提示

    Ajax跨域:Jsonp实例--百度搜索框下拉提示 一.总结 一句话总结:a.找好接口:b.用script标签的src引入文件(json数据):c.定义及实现上一步引入文件中的函数 1.如何找到一个网 ...

  6. window系统谷歌浏览器百度搜索框光标不能输入并且不显示光标----自制bug以及解决

    --------------------bug无处不在------------------------- 今天在搞代码的时候,保存文件无意中犯了个致命错误,文件名称写入非法字符,可能与Windows系 ...

  7. JS---DOM---案例：模拟百度搜索框

    模拟百度搜索框 我的思路整理: 1. 注册文本框抬起事件(onkeyup) 2. 处理函数: --->创建临时数组,循环遍历文本框键入的文字内容和keywords数组,用keyWords[i]. ...

  8. 【JavaScript_DOM 百度搜索框】

    今天给大家带来的事一个简单的百度的历史搜索框,大家在搜索东西的时候,百度会自动给你显示你最近搜索过的一些东西,那这个拿js怎么做呢? 我们一起来学习吧 这是一个HTML页面: <!DOCTYPE ...

  9. js实现百度搜索框滑动固定顶部

    现在很多主流系统例如百度.有道.爱奇艺等的搜索框都有一个特点,滑动到刚好看不到搜索框时,固定搜索框到顶部,这也算是一个对用户友好型的操 作. 在看了百度的js和css后自己摸索出来实现效果,还是学艺不 ...

  10. typecho博客组插件:openSug.js百度搜索框下拉提示免费代码

      Typecho候选搜索增强插件:安装openSug插件即可获得带有“搜索框提示”功能的搜索框,让Typecho搜索更便捷! 支持百度.谷歌.雅虎.Yandex.360好搜.UC神马.酷狗.优酷.淘 ...

随机推荐

  1. Struts2 校验数据问题

    我们会经常遇到一下问题,例如我在前端输入数据,把数据发送到和后台,我首先要校验这个数据, 比如说:前端必须输入一个日期类型的数据,后端才能正确接收,要是输入一个不是日期型的数据, 那么后端就要把数据打 ...

  2. document.domain 跨域问题

    document.domain用来得到当前网页的域名. 比如在地址栏里输入:javascript:alert(document.domain); //www.315ta.com我们也可以给docume ...

  3. java实现链式队列

    java实现链式队列...比较简单 package datastruct; public class QueueLink implements Queue { // 定义一个节点内部类 class N ...

  4. C#转java

    懂C#的话,转Java也不是那么难,毕竟,语言语法还是相似的.尝试了下Java,说说自己的体会吧. 一,Java和C#都是完全面向对象的语言.在面向对象编程的三大原则方面,这两种语言接近得不能再接近. ...

  5. Ecliplse导入maven项目applicationContext.xml报错：Referenced file contains errors (http://www.springframework.org/schema/context/spring-context-3.1.xsd). For more information, right click on the message in

    刚刚导入的maven项目的Spring配置文件报错: 大体意思是说: 引用的文件包含错误(http://www.springframework.org/schema/context/springing ...

  6. servlet-mysql实现简单用户登录注册

    环境:IDEA Maven 效果截图: 项目结构: 类说明: ConnectionUtil:负责数据库连接和释放 UserDao:数据库增删改查操作 User:用户Bean,只用注册和登录的话可以不要 ...

  7. F题（水题）

    给出一个有N个数的序列,编号0 - N - 1.进行Q次查询,查询编号i至j的所有数中,最大的数是多少.   例如: 1 7 6 3 1.i = 1, j = 3,对应的数为7 6 3,最大的数为7. ...

  8. [Swift实际操作]九、完整实例-(5)创建BaseViewController作为控制器的基类

    本文将给项目中的所有视图控制器,创建一份基类.该基类用来定义一些共用的属性和方法. 首先在用来放置视图控制器类的文件夹上点击鼠标右键,打开右键 菜单. 选择[New File]创建文件选项. 在弹出的 ...

  9. python参数传递：对象的引用

    大家都知道在python中,一切皆对象,变量也不再具有类型,变量仅仅是对象的一个引用,我们通常用变量来测类型,通常测得就是被这个变量引用得对象的类型. python采用的是传递对象的引用,为了方便说明 ...

  10. Exadata 18.1新特性--云平台存储节点升级

    1.传统方式的存储节点升级流程: (1).将存储节点升级包下载到数据库服务器,通常是DB01上. (2).解压缩存储节点升级包. (3).用升级包中的patchmgr工具滚动或非滚动地升级每个存储节点 ...