效果图

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. vue v-if:"TypeError: Cannot read property 'length' of undefined"

    在使用v-if判断一个数组大小为0时,会出现 length 是undefined的错误:[Vue warn]: Error in render: "TypeError: Cannot rea ...

  2. CSRF、XSS、clickjacking、SQL 的攻击与防御

    CSRF攻击 原理: 跨站请求伪造.是一种挟制用户在当前已登录的Web应用程序上执行非本意的操作的攻击方法. 网站通过cookie来实现登录功能.而cookie只要存在浏览器中,那么浏览器在访问含有这 ...

  3. [大数据面试题]hadoop核心知识点

    * 面试答案为LZ所写,如需转载请注明出处,谢谢. * 这里不涉及HiveSQL和HBase操作的笔试题,这些东西另有总结. 1.MR意义. MR是一个用于处理大数据的分布式离线计算框架,它采用”分而 ...

  4. 方程的解_NOI导刊2010提高

    方程的解 给定x,求\(a_1+a_2+...+a_k=x^x\ mod\ 1000\)的正整数解解的组数,对于100%的数据,k≤100,x≤2^31-1. 解 显然x是可以快速幂得到答案的,而该问 ...

  5. prometheus监控示例

    prometheus架构图 prometheus 各组件介绍 Prometheus Server: 使用pull方式采集监控数据,在该组件上配置监控数据的采集和告警规则. Client Library ...

  6. flutter安装教程（win7）

    本文是在安装flutter的时候,所遇到的问题参考的各个文档整理集合.此次是在win7上安装的问题记录.因为当初安装的时候针对win7的文档比较少,而且各个文档的解释比较散,本人遇到问题也是找了很久才 ...

  7. MySQL常用的七种表类型（转）

    MySQL常用的七种表类型(转)   其实MySQL提供的表类型截至到今天已经有13种,各有各的好处,但是民间流传的常用的应该是7种,如果再细化出来,基本上就只有两种:InnoDB.MyIASM两种. ...

  8. RPA简介

    开篇: 公司正在全面推广RPA,正好借此机会学习一下,发现国内对RPA的了解较少,萌生了在博客园开博,同时锻炼一下自己的输出能力,纯笔记,如有不足之处,请指正,共勉. 阅读目录: 1. 什么是RPA ...

  9. .gitconfig

    [user] name = 1111 email = 111@111.com[credential] helper = store

  10. JavaScript中的this详解

    前言 this用法说难不难,有时候函数调用时,往往会搞不清楚this指向谁?那么,关于this的用法,你知道多少呢? 下面我来给大家整理一下关于this的详细分析,希望对大家有所帮助! this指向的 ...