效果图

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. python数据库多字段插入

    # -*- co;ding: utf-8 -*-#企业详细信息写入数据库+征信得分import pymysqlfrom impala.dbapi import connect conn = pymys ...

  2. JavaScript基础数据类型(一)

    动态类型 JavaScript 是一种弱类型或者说动态语言.这意味着你不用提前声明变量的类型,在程序运行过程中,类型会被自动确定.这也意味着你可以使用同一个变量保存不同类型的数据: var foo = ...

  3. python识别图片

    import requestsfrom aip import AipOcr image = requests.get('https://static.pandateacher.com/7b5d6d8d ...

  4. T55359 家庭作业

    传送门 思路: 先按学分从大到小排序,根据贪心的思想尽可能地让作业的完成时间延后,这样就能有更多空间给那些限制比较严格的作业 设 f [ i ] 为点 i 向左的最小空闲时间 对于一个限制 t 的作业 ...

  5. 实验十一 团队项目设计完善&编码测试

    任务一: 根据OOD详细设计工作要点,修改完善团队项目系统设计说明书和详细设计说明,将完善后内容以<XX团队项目软件设计方案>为名发布在团队博客中,博文中要突出对完善内容的陈述说明,修改部 ...

  6. b/s 和c/s的区别

    简单解释: B/S最大优势为客户端免维护,适用于用户群庞大,或客户需求经长发生变化的情况. C/S功能强大,可以减轻服务器端压力,如果用户的需求特别复杂,用C/S. 全面: Client/Server ...

  7. spring配置JNDI（Java Naming and Directory Interface,Java命名和目录接口）数据源

    1.在tomcat下的server.xml的 <GlobalNamingResources> </GlobalNamingResources>添加下面代码 <Resour ...

  8. 了解Activity生命周期

    当用户浏览,退出和返回您的应用时,您应用中的activity实例会在其生命周期中的不同状态中进行转换. Activity类提供了许多回调,允许activity知道状态已更改:系统正在创建,停止或恢复a ...

  9. RecyclerView联动滑动失败

    RecyclerView联动滑动失败 我们在做Recyclerview联动滑动的时候,就是左边一个RecyclerView右边一个RecyclerView 我们希望左边的RecyclerView可以和 ...

  10. 远程桌面控制winsever，复制文件或者文件夹夹时出错提示“未指定的错误” 二（如何让远程电脑识别U盘）

    一.背景:   要给远程服务器安装数据库,把安装复制到服务器,出现复制文件或者文件夹夹时出错提示“未指定的错误”:通过映射网络分享文件方法来解决,发现服务器访问网络出现错误,ping分享文件电脑的IP ...