用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. HDU 5616 Jam's balance(DP)

    题目网址:http://acm.hdu.edu.cn/showproblem.php?pid=5616 题目: Jam's balance Time Limit: 2000/1000 MS (Java ...

  2. # .NET切面编程——PostSharp

    目录 概念 实现方式 .Net平台的切面实现 PostSharp示例 概念 Aspect-Oriented Programming(AOP):想想OOP是不是有些熟悉,AOP翻译过来的意思就是面向切面 ...

  3. 新浪微博的OAuth2认证过程

    1. 创建应用 在weibo.com上申请一个应用,获取app key和app secret, 填写redirect uri 2. 获取code 通过在浏览器访问 https://api.weibo. ...

  4. GIT - 代码管理工具之命令集

    GIT 是一个快速.可扩展的分布式版本控制系统,它具有极为丰富的命令集,对内部系统提供了高级操作和完全访问.它会把你的每次提交的文件的全部内容都会记录下来. GIT特点 速度 简单的设计 对非线性开发 ...

  5. Java使用拦截器的两种方式

    拦截器是个好东西,之前用到过,现在记录一下,供以后参考使用! 其一,使用org.aspectj.lang.annotation.Aspect 先上代码: package com.test.interc ...

  6. javascript编码规范总结

    1.嵌入规则 Javascript程序应该尽量放在.js的文件中,需要调用的时候在页面中以<script src="filename.js">的形式包含进来.Javas ...

  7. 利用GPU实现大规模动画角色的渲染

    0x00 前言 我想很多开发游戏的小伙伴都希望自己的场景内能渲染越多物体越好,甚至是能同时渲染成千上万个有自己动作的游戏角色就更好了. 但不幸的是,渲染和管理大量的游戏对象是以牺牲CPU和GPU性能为 ...

  8. SharePoint 2016 配置工作流环境

    前言 SharePoint 2016 默认创建工作流的时候,工作流平台只包含2010版本,如果想要使用状态机工作流,需要单独安装workflow manager 1.0才可以,下面,我们为大家介绍一下 ...

  9. 浅谈Vue不同场景下组件间的数据交流

    浅谈Vue不同场景下组件间的数据“交流”   Vue的官方文档可以说是很详细了.在我看来,它和react等其他框架文档一样,讲述的方式的更多的是“方法论”,而不是“场景论”,这也就导致了:我们在阅读完 ...

  10. 数据结构随笔-php实现队列

    队列(Queue): 满足先进先出(FIFO)的规则: 下面使用php实现一个简单的循环队列模型: 初始状态的队列,队列长度为0,队头和队尾的指针相同均位于队列的开始: 入队操作:队尾指针向后移动,长 ...