仿bing搜索页面制作（大概）

My0720

已于 2022-05-29 19:19:36 修改

阅读量1.2k

点赞数 3

分类专栏： HTML 文章标签： css html

于 2022-05-29 19:10:36 首次发布

本文链接：https://blog.csdn.net/My0720/article/details/125034574

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

导航部分

搜索框

网页底部

导航部分

从bing的搜索界面由上往下看，首先是导航部分，忽略logo

主要是无序列表套a标签构成，最右侧的点击设置先不看（js还没学，以后再补上)

主要代码如下：

<div class="header">
            <div class="counter">
                <!-- <div class="mg"><img src="./logo.png" alt=""></div> -->
                <ul>
                    <li>
                        <a href="https://cn.bing.com/images/trending?form=Z9LH">图片</a>
                    </li>
                    <li>
                        <a href="https://cn.bing.com/videos/trending?form=Z9LH1">视频</a>
                    </li>
                    <li>
                        <a href="https://cn.bing.com/search?q=Bing+translate&FORM=TTAHP1">翻译</a>
                    </li>
                    <li class="focus">
                        ···
                        <ul class="extra">
                            <li><a href="#">学术</a></li>
                            <li><a href="#">词典</a></li>
                            <li><a href="#">地图</a></li>
                            <li><a href="#">MSN</a></li>
                            <li><a href="#">TakeLessons</a></li>
                            <li><a href="#">Office</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
        <div class="idkey">
            <a href="https://login.live.com/login.srf?wa=wsignin1.0&rpsnv=13&id=264960&wreply=https%3a%2f%2fcn.bing.com%2fsecure%2fPassport.aspx%3frequrl%3dhttps%253a%252f%252fcn.bing.com%252fchrome%252fnewtab%253fFORM%253dBEHPTB%2526wlexpsignin%253d1%26sig%3d22DF59A3702D6DD3066A4813714B6C0F&wp=MBI_SSL&lc=2052&CSRFToken=16f9a01d-8475-45c6-a9f6-17478cb14dbc&aadredir=1">登录</a>
            <img src="./图片1.png">
        </div>

其中包含了鼠标放置在“···”上面会出现的盒子部分，效果如下，与bing大同小异。

搜索框

由图可见，“国内版”与“国际版”可切换，搜索图标点击可实现搜索（忽略语音搜索）

那么，得有两个小盒子来实现切换功能，要注意鼠标放在盒子上后盒子的变化。另外要实现图标搜索，需要用到label标签。

以下是注意部分：

<div class="search">
            <div class="switch">
                <div class="common one">国内版</div>
                <div class="common two"><a href="./nice_.html">国际版</a></div>
            </div>
            <form target="_blank" method="get" action="https://www.baidu.com/s" class="sbox">
                <input type="text" placeholder="请输入搜索内容" name="word" class="sk">
                <input type="submit" value="搜索" class="submit" id="submit">
                <label for="submit"><img src="./搜索_search (2).svg" class="sc"></label>
            </form>
        </div>

网页底部

bing国内版底部有上图所示说明（由a标签构成），我大致做了一个

<footer>
        <!-- 底部说明 -->
        <div class="explain">
            <!-- 版心 -->
            <nav class="container">
                <ul class="fr">
                    <li><a href="#">增值电信业务经营许可证：合字B2-20090007</a></li>
                    <li><a href="#"></a></li>
                    <li><a href="#">京ICP备10036305号-7</a></li>
                    <li><a href="#">京公网安备11010802022657号</a></li>
                    <li><a href="#">隐私与Cookie</a></li>
                    <li><a href="#">法律声明</a></li>
                    <li><a href="#">帮助</a></li>
                </ul>
            </nav>
        </div>
    </footer>

“版心”是之后制作整个网页接触到的，此处可以不用，因为按理来说版心适用于整个页面的盒子，使主要部分集中于页面中间。

个人认为最难的还是各个盒子的布局，我起初我自己大概写个数字来测，后来在bing页面检查，不过bing用到的东西太多了，所以也不可能照搬它的布局。

以下是完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Search_in</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        html,body,a,div,span,strong,ul,ol,li,p,input {
            /* font-weight: inherit;
            font-size: inherit; */
            list-style: none;
            border-spacing: 0;
            border: 0;
            border-collapse: collapse;
            text-decoration: none;
        }
        body {
            background-image: url(./风景.jpg);
            background-position: 25% 25%;
        }
        .box {
            margin-left: 170.729px;
            margin-right: 170.740px;
            width: 1365.860px;
            height: 624px;
            /* background-color: pink; */
        }
        .header {
            margin-right: 755.115px;
            width: 465.750px;
            height: 31.198px;
            /* background-color: skyblue; */
            /* float: left; */
            display: inline-block;
        }
        .counter {
            /* margin-left: 160px; */
            display: inline-block;
        }
        /* .mg {
            float: left;
        }
        .mg img {
            width: 154px;
        } */
        .counter li {
            float: left;
        }
        .counter li a,.focus{
            display: block;
            font-size: 14px;
            color: #FFFFFFCC;
            width: 40px;
            height: 39px;
            margin-right: 36px;
            margin-top: 15px;
            cursor: pointer;
        }
        .counter a:hover {
            color: white;
        }
        .counter .focus:hover {
            color: #fff;
        }
        .counter .extra {
            width: 155px;
            height: 243px;
            background-color: #fff;
            border-radius: 6px;
            position: absolute;
            top: 39px;
            padding-top: 4px;
            padding-bottom: 4px;
            display: none;
            box-shadow: 0 4px 12px 1px rgb(0 0 0 / 14%);
            z-index: 1;
        }
        .counter .extra li {
            display: block;
            width: 135px;
            height: 37px;
            color: #666;
            font-size: 14px;
            padding-left: 20px;
            text-align: left;
        }
        .counter .extra a {
            display: block;
            color: #666;
        }
        .counter .focus:hover .extra{
            display: block;
        }
        .counter .extra li:hover {
            background-color: rgba(206, 194, 194, 0.3);
            color: #010101;
        }
        .idkey {
            width: 145px;
            height: 31.198px;
            /* background-color: green; */
            float: right;
        }
        .idkey a {
            display: inline-block;
            font-size: 14px;
            color: #FFFFFFCC;
            /* width: 40px;
            height: 39px; */
            margin-right: 5px;
            margin-top: 15px;
            cursor: pointer;
            float: left;
        }
        .idkey img {
            width: 32px;
            height: 32px;
            float: left;
            margin-top: 8px;
        }
        .search {
            width: 596px;
            height: 52px;
            /* background-color: blue; */
            margin-left: 228px;
            position: relative;
            top: 15%;
            right: 30px;
            box-sizing: border-box;
        }
        .switch {
            width: 160px;
            height: 37px;
            /* background-color: #fff; */
            position: absolute;
            margin-top: -40px;
            margin-left: 20px;
            /* z-index: 2; */
        }
        .switch .common {
            display: inline-block;
            line-height: 26px;
            font-size: 16px;
            text-align: center;
            cursor: pointer;
            padding: 6px 14px 5px 14px;
            font-family: 'Microsoft YaHei',Arial, Helvetica, sans-serif;
            margin-right: 4px;
            width: 48px;
            height: 26px;
            background-color: #fff;
            border-radius: 24px;
            color: #010101;
            cursor: auto;
        }
        .switch .one {
            
            float: left;
            /* z-index: 1; */
        }
        .switch .two {
            color: #666;
            background-color: rgba(255,255,255,.75);
            float: right;
        }
        .switch a {
            color: #666;
        }
        .switch .two:hover {
            background-color: rgba(255,255,255,.5);
            cursor: pointer;
            /* 切换国际版one和two交换即可 */
        }
        /* .sbox {
            width: 586px;
            height: 52px;
            background-color: #fff;
            padding-right: 10px;
            border-radius: 24px;
        } */
        .sk {
            width: 485.417px;
            height: 21.333px;
            background-color: #fff;
            border-radius:24px;
            border: 0;
            padding: 12px 10px 12px 16px;
            font-size: 16px;
            /* margin-right: 10px; */
        }
        .submit {
            cursor: pointer;
            background-color: #4a68e0;
            width: 64px;
            height: 44px;
            border: 0;
            border-radius:24px;
            color:#fff;
            font-size: 16px;
            display: none;
        }
        .sc {
            width: 32px;
            height: 32px;
            position: absolute;
            left: 465px;
            top: 7px;
        }
        .explain {
            height: 36px;
            background-color: #333;
            padding: 0 170px;
            position: absolute;
            bottom: 0px;
            right: 0px;
            left: 0px;
        }
        .explain ul li {
            float: left;
            margin-right: 50px;
        }
        .explain ul a {
            color: #666;
            font-size: 14px;
            line-height: 36px;
        }
        .explain ul a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="header">
            <div class="counter">
                <!-- <div class="mg"><img src="./logo.png" alt=""></div> -->
                <ul>
                    <li>
                        <a href="https://cn.bing.com/images/trending?form=Z9LH">图片</a>
                    </li>
                    <li>
                        <a href="https://cn.bing.com/videos/trending?form=Z9LH1">视频</a>
                    </li>
                    <li>
                        <a href="https://cn.bing.com/search?q=Bing+translate&FORM=TTAHP1">翻译</a>
                    </li>
                    <li class="focus">
                        ···
                        <ul class="extra">
                            <li><a href="#">学术</a></li>
                            <li><a href="#">词典</a></li>
                            <li><a href="#">地图</a></li>
                            <li><a href="#">MSN</a></li>
                            <li><a href="#">TakeLessons</a></li>
                            <li><a href="#">Office</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
        <div class="idkey">
            <a href="https://login.live.com/login.srf?wa=wsignin1.0&rpsnv=13&id=264960&wreply=https%3a%2f%2fcn.bing.com%2fsecure%2fPassport.aspx%3frequrl%3dhttps%253a%252f%252fcn.bing.com%252fchrome%252fnewtab%253fFORM%253dBEHPTB%2526wlexpsignin%253d1%26sig%3d22DF59A3702D6DD3066A4813714B6C0F&wp=MBI_SSL&lc=2052&CSRFToken=16f9a01d-8475-45c6-a9f6-17478cb14dbc&aadredir=1">登录</a>
            <img src="./图片1.png">
        </div>
        <div class="search">
            <div class="switch">
                <div class="common one">国内版</div>
                <div class="common two"><a href="./nice_.html">国际版</a></div>
            </div>
            <form target="_blank" method="get" action="https://www.baidu.com/s" class="sbox">
                <input type="text" placeholder="请输入搜索内容" name="word" class="sk">
                <input type="submit" value="搜索" class="submit" id="submit">
                <label for="submit"><img src="./搜索_search (2).svg" class="sc"></label>
            </form>
        </div>
    </div>
    <footer>
        <!-- 底部说明 -->
        <div class="explain">
            <!-- 版心 -->
            <nav class="container">
                <ul class="fr">
                    <li><a href="#">增值电信业务经营许可证：合字B2-20090007</a></li>
                    <li><a href="#"></a></li>
                    <li><a href="#">京ICP备10036305号-7</a></li>
                    <li><a href="#">京公网安备11010802022657号</a></li>
                    <li><a href="#">隐私与Cookie</a></li>
                    <li><a href="#">法律声明</a></li>
                    <li><a href="#">帮助</a></li>
                </ul>
            </nav>
        </div>
    </footer>
</body>
</html>

My0720

关注

3
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
仿bing搜索页面制作（大概）

目录导航部分搜索框网页底部<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&
复制链接

扫一扫