用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. Oracle 10gR2分析函数

    Oracle 10gR2分析函数汇总 (Translated By caizhuoyi 2008‐9‐19) 说明:  1. 原文中底色为黄的部分翻译存在商榷之处,请大家踊跃提意见:  2. 原文中淡 ...

  2. luogu P2756 飞行员配对方案问题

    题目链接:P2756 飞行员配对方案问题 题目描述 英国皇家空军从沦陷国征募了大量外籍飞行员.由皇家空军派出的每一架飞机都需要配备在航行技能和语言上能互相配合的2 名飞行员,其中1 名是英国飞行员,另 ...

  3. Python进阶——笔记1

    1.*args 的用法 *args 和 **kwargs 主要用于函数定义. 你可以将不定数量的参数传递给一个函数. 这里的不定的意思是:预先并不知道, 函数使用者会传递多少个参数给你, 所以在这个场 ...

  4. matlab图片清晰度调整

    打开.fig文件后: 1.首先设置窗口中的文字大小和相关的图例 2.然后将窗口缩小到要在word中或者ppt中展示图片的大小(避免图片缩小减少清晰度) 3.调整横纵坐标说明,使得布局合理 4.点击Ei ...

  5. javac.exe、 java.exe、 java虚拟机三者之间的区别与联系

    JDK中 javac:Java编译器,将Java源代码换成字节代: java:Java解释器,直接从类文件执行Java应用程序代码: 先编译  *.java文件――――>*.class文件 运行 ...

  6. 初学安卓开发随笔之 Intent 用法

    首先,对于安卓开发,目前世界上流行的是使用的是Android studio 2.0 .(hh 学着来呗 书上说用这个,,) 今后就定一个计划 每天更新一个Android 随笔,增强一下自控力吧!!! ...

  7. Spring mybatis源码篇章-sql mapper配置文件绑定mapper class类

    前言:通过阅读源码对实现机制进行了解有利于陶冶情操,承接前文Spring mybatis源码篇章-MybatisDAO文件解析(二) 背景知识 MappedStatement是mybatis操作sql ...

  8. java服务端和用户端

    1.server Logintherad: package com.zdsofe.server; import java.io.InputStream; import java.io.OutputSt ...

  9. Python网络数据采集1-Beautifulsoup的使用

    Python网络数据采集1-Beautifulsoup的使用 来自此书: [美]Ryan Mitchell <Python网络数据采集>,例子是照搬的,觉得跟着敲一遍还是有作用的,所以记录 ...

  10. cxf的使用以及与SSH的整合

    经历过一小段忙碌的时间,终于有时间开始整理项目中曾遇到的技术难点,并不是什么新颖的技术难点,只是自己在这样方面所了解的不健全或者是没有了解透彻,现在都抽时间进行整理. 首先就是需要在ssh的系统中整合 ...