用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. FZU 2253 salty fish

    https://vjudge.net/problem/FZU-2253 题意:略 思路: 一开始改变区间,还以为是线段树...还是dp的题做得太少了. 这题一开始我们可以统计出一共有多少只翻身的咸鱼, ...

  2. js模块加载详解

    看着java中各种import加载,在回过头来看看javascript还在自己造轮子,写各种XX的模块加载框架,ECMASCRIPT6不知什么时候能够普及.不过DT归DT,该学的还是要学. 一 同步加 ...

  3. TestFlight使用方法

    1 说明 目前IOS版本APP上架前,很少有项目对上架包进行测试,而上架包是人工打包的,很有可能之前的测试包没有问题,可打出的上架包出现问题.苹果市场是有提供对上架包内部测试的,可以对上架包进行测试, ...

  4. 【PHP】linux+php5.1.6+mysql5.0.2+apache2.0.55安装配置说明（转）

    linux+php5.1.6+mysql5.0.2+apache2.0.55安装配置说明:一.mysql5.0.2的安装配置过程及说明:1. #tar -zvxf mysql-5.0.2-alpha. ...

  5. ReentrantLock实现原理及源码分析

    ReentrantLock是Java并发包中提供的一个可重入的互斥锁.ReentrantLock和synchronized在基本用法,行为语义上都是类似的,同样都具有可重入性.只不过相比原生的Sync ...

  6. 支付宝分库分表中间件--zdal简介

    中间件, 如果仅仅作为一名用户的话, 主要关注一下如何使用即可, 大多数情况下也就是配置. 下面简单的介绍一下支付宝的分库分表中间件--->zdal在web项目中的配置. 1, 在网上查阅相关资 ...

  7. 6. leetcode 136. Single Number

    Given an array of integers, every element appears twice except for one. Find that single one. Note: ...

  8. 使用Hibernate模板调用存储过程

    前提是该Dao类已经已经继承了org.springframework.orm.hibernate5.support.HibernateDaoSupport,并且在整个项目中已经配置好了事务,或者是手动 ...

  9. python 分支语句 循环语句

    分支语句 #if-else if a > b: print('aaa') else: print('bbb') #if-elif-else if a > b: print('a>b' ...

  10. ABP+AdminLTE+Bootstrap Table权限管理系统第二节--数据库脚本

    第一点,上一篇文章中我们讲到codefirst中一些问题包括如图 1,codefirst在执行的数据库迁移过程中产生了很多文件,对于强迫症的我而言特别不爽,这些是可以不用生成的啊 2,在codefir ...