效果图

html页面

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>模拟百度一下</title>

    <link rel="stylesheet" type="text/less" href="style/index.less">

    <script src="js/less.min.js"></script>

</head>

<body>

<div class="header">

    <ul class="header_nav">

        <li><a href="###">新闻</a></li>

        <li><a href="###">hao123</a></li>

        <li><a href="###">地图</a></li>

        <li><a href="###">视频</a></li>

        <li><a href="###">贴吧</a></li>

        <li><a href="###">学术</a></li>

        <li><a href="###">登录</a></li>

        <li><a href="###">设置</a></li>

        <li class="nav-more"><a href="###">更多产品</a></li>

    </ul>

    <div class="content">

        <img src="image/bd_logo.png" alt="">

        <div class="con-input">

            <span></span>

                <input type="text" class="search"><input type="button" class="btn" value="百度一下">

        </div>

    </div>

</div>

</body>

</html>

less样式部分

*{

  margin: 0;

  padding: 0;

  font-family:'微软雅黑';

}

@color-blue: #398bfb;

.header{

  width: 1000px;//给定宽度，就不会随窗口大写而改变

  height: 40px;

  line-height: 40px;

  margin: 0 auto;

  vertical-align: middle;

  .header_nav{  //导航栏部分

    float: right;

    li{

      list-style: none;

      float: left;

      margin-right: 10px;

      font-size: 16px;

      font-weight:bold;

      a{

        color:black;

      }

    }

    .nav-more{   //更多产品样式的重写

      width: 86px;

      height: 32px;

      font-size: 13px;

      line-height: 32px;

      text-align: center;

      background: @color-blue;

      a{

        text-decoration: none;

        color: #ffffff;

      }

    }

  }

  .content{  //中间搜索区域部分

    position: relative;

    clear: both;

    height: 62%;

    min-height: 181px;

    margin-top: 100px;

    text-align: center;

    img{   //logo部分

      width: 270px;

      height: 129px;

    }

    .con-input{   //input框

      margin-left: 20%;

      position: absolute;

      .search{

        width: 521px;

        height: 20px;

        padding: 7px;

        vertical-align: middle;

      }

      .btn{  //百度一下按钮

        width: 102px;

        height: 38px;

        background: @color-blue;

        text-align: center;

        line-height: 38px;

        color: #ffffff;

        font-size: 16px;

        font-weight: normal;

        cursor: pointer;

        border: none;

        vertical-align: middle;

      }

      span {  //相机部分

        background: url("../image/camera_new_5606e8f.png");

        background-position: 0 0;

        height: 18px;

        width: 18px;

        display: inline-block;

        zoom: 1;

        vertical-align: top;

        position: absolute;

        top: 14px;

        right: 112px;

        &:hover {

          background-position: 0 -18px;

        }

      }

    }

  }

}

用less编写百度搜索静态效果的更多相关文章

  1. 教你编写百度搜索广告过滤的chrome插件

    1 前言 目前百度搜索列表首页里,广告5条正常内容是10条,而且广告都是前1到5条的位置,与正常内容的显示样式无异.对于我们这样有能力的开发者,其实可以简单的实现一个chrome插件,在百度搜索页面里 ...

  2. 百度搜索效果（jsonp法）

    百度搜索效果(jsonp法): 不需要放在服务器中,本地就可以执行 <!DOCTYPE html> <html> <head> <meta charset=& ...

  3. 利用autocomplete.js实现仿百度搜索效果（ajax动态获取后端[C#]数据）

    实现功能描述: 1.实现搜索框的智能提示 2.第二次浏览器缓存结果 3.实现仿百度搜索 <!DOCTYPE html> <html xmlns="http://www.w3 ...

  4. Ajax跨域实现淘宝/百度搜索下拉提示效果

    最近学到Ajax,觉得自己对与前后端的数据交互有了一个基本的了解.下面是Ajax应用到淘宝/百度的搜索功能的一个简单的小实例,就是输入一个词,下拉框中自动显示匹配的内容:

  5. js借助JSONP实现百度搜索框提示效果

    主要借助百度搜索的API,调用时会存在跨域问题,需要通过JSONP来解决这个问题,代码如下(代码中部分使用ES6语法): HTML <input type="text" id ...

  6. Web自动化框架LazyUI使用手册（2）--先跑起来再说（第一个测试用例-百度搜索）

    作者:cryanimal QQ:164166060 上篇文章中,简要介绍了LazyUI框架,本文便来演示,如何从无到有快速搭建基于lazyUI的工程,并成功运行第一个测试用例. 本文以百度搜索为例,选 ...

  7. 百度搜索 “Java面试题” 前200页（面试必看）

    前言 本文中的题目来源于网上的一篇文章<百度搜索 "Java面试题" 前200页>,但该文章里面只有题目,没有答案.因此,我整理了一些答案发布于本文.本文整理答案的原则 ...

  8. 开发一个chrome插件：将百度搜索热点屏蔽掉！

    每次百度搜索,搜索结果的右边总是出现些乱七八糟的搜索热点(推的都是些什么玩意,高校替课和我有毛关系,几个悲伤的热点我用星号顶掉了). 强迫症想把它隐藏掉,我用的是chrome浏览器,受adblock( ...

  9. Springboot+Vue实现仿百度搜索自动提示框匹配查询功能

    案例功能效果图 前端初始页面 输入搜索信息页面 点击查询结果页面 环境介绍 前端:vue 后端:springboot jdk:1.8及以上 数据库:mysql 核心代码介绍 TypeCtrler .j ...

随机推荐

  1. Ubuntu 18.04 LTS 常用软件安装杂记

    之前个人笔记本装的是 Linux Mint,用了一段时间但是体验不佳,所以打算换成 Ubuntu .作为一个 Linux 小白,当时配置一些软件环境费了不少时间.这次打算简单记录下,和大家分享一下我的 ...

  2. spring data jpa、Hibernate开启全球唯一UUID设置

    spring data jpa.Hibernate开启全球唯一UUID设置 原文链接:https://www.cnblogs.com/blog5277/p/10662079.html 原文作者:博客园 ...

  3. 移动端input“输入框”常见问题及解决方法

    转自 https://www.cnblogs.com/ljx20180807/p/9837748.html 1. ios中,输入框获得焦点时,页面输入框被遮盖,定位的元素位置错乱: 当页input存在 ...

  4. vue数据变动监测

    原文链接:https://blog.csdn.net/man_tutu/article/details/72148362 对象: 不能监测到: var vm = new Vue({ data:{ a: ...

  5. 解决macOS因为它来自身份不明的开发者,不显示允许任何来源 –安装文件下载损坏问题

    打开时提示"已损坏,打不开.您应该将它移到废纸篓"或身份验证,因为它来自身份不明的开发者,和不显示允许任何来源,图片解锁和应用程序问题(如图片/application应用程序损坏, ...

  6. ExtJs常用功能

    1.判断内容是否修改 1) var cgrid = query_panel.cgrid; var v = cgrid.getValues(); //console.log(v); if (v != & ...

  7. Python的类的下划线命名的区别

    首先,单下划线开头,这个常被用于模块中,在一个模块中以单下划线开头的变量和函数被默认当做内部函数,如果使用from  module  import  *导入时,这部分变量和函数不会被导入.注意,如果使 ...

  8. setting.xml

    <?xml version="1.0" encoding="UTF-8"?><settings xmlns="http://mave ...

  9. redist命令操作（一）--键key，字符串String

    1.Redis 字符串(String) 参考菜鸟教程:http://www.runoob.com/redis/redis-strings.html 设置指定key的值,如果原来有,覆盖 127.0.0 ...

  10. SQLite使用笔记

    前言 客户端存储信息的方法有好多种,在以往的项目中采用的是序列化记录到文件中的方式,即时通信项目中客户端的一些系统配置的保存也使用的这种方式,然而客户端保存聊天记录就不能使用这种方式(保存.读取.修改 ...