用Html模仿百度一下你就知道、、、、

-------------------------------

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style text="text/css">
  .top{
    width:100%;
    height:64px;}
.top>.title{
    height:64px;
    float:right;}
.top>.title>span{
    line-height:64px;
    float:right;}
.top>.title>span>a{
    font-size:13px;
    font-family:"宋体";
    text-decoration:underline;
    color:#333}
.top>.title>span>.bold{
    font-weight:bold;}
.list{
    border:0;
    height:25px;
    width:60px;
    background:#36F;
    color:#fff;}
    <!----->
.logo{
    height:130px;
    width:270px;
    text-align:center;}
.search{
    text-align:center;}
.input{
    width:540px;
    height:36px;}
.btn{
    border:0;
    width:100px;
    height:40px;
    background:#36F;
    font-size:15px;
    color:#fff;}
    <!------>
    .foot{width:100%;
    position:absolute;
    bottom:100px;}
.foot>.link{
    text-align:center;
    margin-bottom:10px;}
.foot>.link>a{
    font-size:12px;
    font-family:"宋体";
    text-decoration:underline;}
.copyright{
    text-align:center;}
p,p>a{
    font-size:12px;
    font-family:"宋体";
    color:#666;}
  </style>
 </head>
 <body >
  <div class="top" >
      <div class="title">
          <span>
              <a class="bold" href="#">新闻</a>&nbsp;
             <a class="bold" href="#">hao123</a>&nbsp;
              <a class="bold" href="#">地图</a>&nbsp;
             <a class="bold" href="#">视频</a>&nbsp;
              <a class="bold" href="#">贴吧</a>&nbsp;
              <a href="#">登陆</a>&nbsp;
            <a href="#">设置</a>&nbsp;
             <input class="list" type="submit" value="更多产品" name="submit" />&nbsp;
         </span>
     </div>
 </div>
<!----->
 <div class="body" >
    <div align="center" class="pic">
        <img class="logo" src="bd_logo1.png"  />
    </div>
    <div class="search">
        <form>
            <label for="search"></label>
            <input class="input" type="text" name="search" id="search" value="" /><input class="btn" type="submit" value="百度一下" name="submit" />
        </form>
    </div>
</div>
<!----->
<div class="foot">
    <div class="link">
        <a href="#">把百度设为主页</a>&nbsp;
        <a href="#">关于百度</a>&nbsp;
        <a href="#">About Baidu</a>
    </div>
    <div class="copyright">
        <p>
            ©2015 Baidu <a href="#">使用百度前必读</a> <a href="#">意见反馈</a> 京ICP证030173号
        </p>
    </div>
</div>
<!----->
 </body>
</html>

用到的图片：

-----------------------------------------

------------------------------------------------------

--------------------------------------------------------------------

用Html模仿百度一下你就知道的更多相关文章

  1. java开发_模仿百度文库_OpenOffice2PDF_注意事项

    在模仿百度文库的操作过程中,有很多朋友反映出来的一些问题,是我想起了写这篇blog. 主要是让大家在做的过程中注意一些东西,否则达不到想要的效果. 第一步:我们先从 java开发_模仿百度文库_Ope ...

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

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

  3. 模仿百度首页“元宵节汤圆”动图，并实现360°不停旋转（CSS3的animation动画效果）

    模仿百度首页“元宵节汤圆”动图,并实现360°不停旋转(CSS3的animation动画效果) 效果图: 切图地址: https://ss1.bdstatic.com/5eN1bjq8AAUYm2zg ...

  4. 模仿百度首页“元宵节汤圆”动图（js的定时任务：setInterval）

    模仿百度首页“元宵节汤圆”动图:(js的定时任务:setInterval) 原理:需要一张切图,通过不断定位使得图片就像一帧一帧的图片在播放从而形成了动画 效果图: 切图地址: https://ss1 ...

  5. C# Winform模仿百度日历

    想写博客不知道从何处开始,就从回忆开始吧. 第一个就从自定义日历控件开始 产生背景: 大概2015年时候有个项目要用到日历,用默认日历展示给用户看,用户毫不客气都说界面太丑,最好做成像百度日历那样方便 ...

  6. css模仿百度首页

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. 运用html常用标签和css定位等学做模仿百度导航页面

    导航部分文字链接,鼠标触碰变颜色,除百度logo引用图片外,其它均代码编写.注释部分是一开始用的百度一下截图做的按钮,后来用div填充颜色写了一个按钮.效果图如下. HTML代码如下: <!DO ...

  8. ajax 模仿百度下拉

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  9. VUE模仿百度搜索框，按上下方向键及回车键实现搜索选中效果

    逻辑介绍: 1.表单获取焦点时,显示搜索建议框 2.输入内容时,请求后台接口,并将返回的数据展示在搜索建议框内 3.表单获取焦点情况下,按键盘上下箭头可实现搜索列表项的切换,按回车可以选择当前激活的选 ...

随机推荐

  1. input输入框自动填充黄色背景解决方案

    chrome表单自动填充后,input文本框的背景会变成偏黄色的,这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性,然后对其赋予以下样式: ...

  2. 【Vue】详解Vue组件系统

    Vue渲染的两大基础方式 new 一个Vue的实例 这个我们一般会使用在挂载根节点这一初始化操作上: new Vue({ el: '#app' }) 注册组件并使用—— 全局注册 通过Vue.comp ...

  3. Java 多态的实现原理

    一个对象变量可以指示多种实际类型的现象称为多态 允许不同类的对象对同一消息做出响应.方法的重载.类的覆盖正体现了多态. 1.多态的机制 1.1 本质上多态分两种 .编译时多态(又称静态多态) .运行时 ...

  4. （转）maven镜像路径配置

    很多maven包无法自动下载怎么办?设置maven镜像setting.xml <mirror> <id>repo2</id> <mirrorOf>cen ...

  5. C# 代码规范和质量检查工具 StyleCop.Analyzers

    简介 原来一直用 ReSharper 来进行代码质量检查,不过毕竟是收费的,所以想找个免费的可以推广给公司的同事也一起用.搜索了一下,找到了StyleCop,但是我在 VS 2015里安装 Style ...

  6. 小程序server-3-搭建WebSocket 服务

    小程序server-3-搭建WebSocket 服务: 1.安装 Node 模块 使用 ws 模块来在服务器上支持 WebSocket 协议,下面使用 NPM 来安装: cd /var/www/wxp ...

  7. Java项目 打war包方法

    我们可以运用DOS命令来手工打war包: 首先,打开DOS命令行,敲入"jar",我们发现它提示不是内部或外部的命令这样的错误,这时八成是你的JAVA环境没有配置好,我们可以用JA ...

  8. Linux(2)文件和权限

    用户目录 位于/home/user, 称为用户目录或家目录, 表示方法: /home/user ~ 相对路径和绝对路径 绝对路径 从 / 目录开始描述的路径外绝对路径 cd /home cd /usr ...

  9. spring Bean类自动装载实现

    先贴spring的开发文档,有助于大家学习http://shouce.jb51.net/spring/beans.html#beans-factory-class 一直想研究一下spring bean ...

  10. NYOJ--128--前缀式计算（表达式求值）

    前缀式计算 时间限制:1000 ms  |  内存限制:65535 KB 难度:3   描述 先说明一下什么是中缀式: 如2+(3+4)*5这种我们最常见的式子就是中缀式. 而把中缀式按运算顺序加上括 ...