input搜索框实现--仿bing

最新推荐文章于 2024-07-16 11:07:16 发布

bigchubbyCat

最新推荐文章于 2024-07-16 11:07:16 发布

阅读量1.8k

点赞数

分类专栏： Javascript html JQuery

本文链接：https://blog.csdn.net/XYULILI/article/details/98208904

版权

本文介绍了如何实现一个类似于Bing搜索引擎的输入框效果，包括页面背景、Logo、搜索框和搜索按钮的设计。在页面宽度小于1000px时，背景能保持固定。文章提供了相关代码和图片资源。

摘要由CSDN通过智能技术生成

首先看一下页面实现效果

整个页面主要包括页面背景，logo，搜索框，搜索按钮
这里实现了页面在1000px内缩放时页面背景固定，代码如下：

background-image: url(bg.jpg);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-width:1000px;
    z-index: -10;
    zoom:1;
    background-color: #fff;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-position: center 0;

下面贴上完整代码

<!doctype html>
<html>
<head>
<title>bing search</title>
<!--解决浏览器兼容问题-->
<meta http-equiv="X-UA-Compatible" con

最低0.47元/天解锁文章

bigchubbyCat

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
input搜索框实现--仿bing

首先看一下页面实现效果整个页面主要包括页面背景，logo，搜索框，搜索按钮这里实现了页面在1000px内缩放时页面背景固定，代码如下：background-image: url(bg.jpg); position: fixed; top: 0; left: 0; width: 100%; height: 100%; min-width...
复制链接

扫一扫

专栏目录