效果图

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. SonarQube 中文教程 （1）- 简介

    SonarQube是什么 SonarQube 是一个用于代码质量管理的开源平台,用于管理源代码的质量. 通过插件形式,可以支持包括 java, C#, C/C++, PL/SQL, Cobol, Ja ...

  2. JavaScript 随意记

    js 志异: <script> // ----- 1 --------- alert(new Date()) alert(+new Date()) </script>

  3. windows系统如何查看端口被占用、杀进程

    1.首先启动windows的命令窗口 2.进入windows命令窗口之后,输入netstat -ano,就可以看到系统当前所有的端口使用情况 3.通过命令查找某一特定端口,在命令窗口中输入命令中输入n ...

  4. java 有序数组合并

    有序数组合并,例如: 数组 A=[100, 89, 88, 67, 65, 34], B=[120, 110, 103, 79, 66, 35, 20] 合并后的结果 result=[120, 110 ...

  5. javascript 删除 url 中指定参数,并返回 url

    // 删除url中某个参数,并跳转function funcUrlDel(name){ var loca = window.location; var baseUrl = loca.origin + ...

  6. selenium+java 数据驱动

    一.数据驱动测试概念 数据驱动测试是相同的测试脚本使用不同的测试数据执行,测试数据和测试行为完全分离. 二.实施数据驱动测试的步骤: 1.编写测试脚本,脚本需要支持程序对象.文件或者数据库读入测试数据 ...

  7. reactiveCocoa使用注意点

    @RACSubject信号 注意点:1如果一个页面需要多次发送这个消息,那么似乎会暴露一个bug,信号不会被销毁,等到发送第二个信号 时,第一个信号仍然会被发送,导致错误,比如一个tableView的 ...

  8. 《R语言入门与实践》第七章:程序

    前言 这一章讲了程序设计的相关知识,经过了: 算法分析 编码 得到最后的程序. if 语句 格式:if (this) {that} else if { another} else { another ...

  9. pyhton课堂随笔-基本画图

    %matplotlib inline import matplotlib as mpl import matplotlib.pyplot as plt import numpy as np impor ...

  10. ionic2使用cordova打包的环境搭建

    1.安装node.js(不用说了) 2.安装JDK(java的开发基础类库) 3.安装SDK(安卓开发集成包) 4.gradle( JAVA界的Weboack ,支撑app的编译,打包的流程) 5.安 ...