仿百度搜索结果界面

最新推荐文章于 2024-05-25 19:27:14 发布
最新推荐文章于 2024-05-25 19:27:14 发布
阅读量1.1k 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42303820/article/details/100639433
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #zuobiandiv{
            margin-top: 40px;
            padding-right: 0;
        }
    #sousuokuang {
        /*搜索框*/
        margin-top: 5px;
        float: left;
    }
    /*百度一下按钮*/
    #baiduyixia{

        border: 1px solid cornflowerblue;
        width: 105px;
        height: 26px;
        text-align: center;
        padding-top: 2px;
        background:#3385ff ;
        color: white;
        float: right;
    }
    #baiduyixia > a{
        text-decoration: none;
        color: white;
    }
    #baiduyixia > input {
        text-align: center;
    }
        /*右边登入*/
        #youbian{
            padding-left: 90%;
            margin-top: -2%;
        }
        #youbian > a {
            font-size: 10px;
            color: #333;
        /*    灰色条*/
        }
        #zhongjiantiao{
            margin-top: 22px;
            margin-left: -2%;
            border: 1px solid #F5F5F5;
            width: 1600px;
            height: 30px;
            background:#f8f8f8 ;
        }
        /*灰色条文字*/
        #zhongjiantiaowenzi{
            margin-left: 6.7%;
            float: left;
            margin-top: 5px;
        }
        #zhongjiantiaowenzi > a {
            font-size: 13px;
            text-decoration: none;
            margin-left: 20px;
            color: #323232;
        }
    /*    网页*/
        .wangye {
            float: left;

            margin-left: 100px;
            margin-top: 10px;
        }
        .wangye>a{
            font-size: 14px ;
            color: blue;
        }
        .wangye > a >em {
            color: red;
            font-style: normal;
        }
    /*    官方标志*/
        .xiaolan{
            margin-top: 14px;
            margin-left: 8px;
            border: 1px solid cornflowerblue;
            width: 31px;
            height: 12.56px;
            text-align: center;
            background:#2b99ff ;
            color: white;
            float: left;



        }
        .xiaolan > a,.xiaolan > a{
            font-size: 10px;
            color: white;
            text-decoration: none;
            padding-left: 5px;
            float: left;
        }
/*        搜索结果网页*/
.wangye2{
    margin-top: 40px;
    margin-left: 100px;
}
        .wenzi{
            width: 370px;
            float: left;
            margin-left: 15px;
        }

        .a {
            font-size: 13px;
            line-height: 34px;
            margin-right: 10px;
            color: black;
        }

        .a2 {
            font-size: 15px;
            margin-right: 12px;
            line-height: 38px;
            width: 54px;
            height: 36px;
            color: gray;
            text-decoration: none;
        }

        .a2:hover {
            color: black;
        }
        .a3{
            font-size: 12px;
            color: #222eff;
        }
        .a4{
            font-size: 13px;
            color: #A9A9A9;
        }

    </style>
</head>
<body>

<div id="zuobiandiv">
<!--图片-->
<div><img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_86d58ae1.png" style=" float: left;height: 30px;width: 90px;margin-right: 10px" alt="">
    <!--搜索框-->
    <div id="sousuokuang"><input type="text" style="width: 495px;height: 24px">
        <div id="baiduyixia"><a href="">百度一下</a>
        </div>
</div>
</div>
<div id="youbian">
    <a href="">百度首页</a>
    <a href="">消息</a>
    <a href="">设置</a>
    <a href="">登录</a></div>
<div id="zhongjiantiao">
    <div id="zhongjiantiaowenzi">
    <a href="">网页</a>
    <a href="">咨询</a>
    <a href="">视频</a>
    <a href="">图片</a>
    <a href="">知道</a>
    <a href="">文库</a>
    <a href="">贴吧</a>
    <a href="">采购</a>
    <a href="">地图</a>
    <a href="">更多>></a>
        </div>
</div>
    <div style="width: 50%">
<div>
    <div style="margin-left: 99px;margin-top: 8px;float: left"><spen style="font-size: 11px;color:#999">百度为您找到相关结果约100,000,000个</spen>
    </div>
    <div style="padding-top: 8px;margin-left: 562px;"><a href="" style="color: #999;font-size: 11px;text-decoration: none">搜索工具</a></div>
</div>

<div>
<div class="wangye">
    <a href=""><em>百度</em>一下,你就知道</a>
</div>
    <div class="xiaolan"><a href="">官网</a></div>
</div>
<div class="wangye2">
    <img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2920084749,2018893236&fm=58&s=39C718720E8EBE011B398BAC0300F024&bpow=121&bpoh=75" style="width: 110px;height: 68px;float: left;" alt="">
    <div class="wenzi">
        <spen style="font-size: 12px;">全球最大的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。</spen>
        <div>
            <a href=""style="font-size: 10px;color: green">https://www.baidu.com/</a>
            - <a href=""style="font-size: 10px;color: #666">百度快照</a>
            - <a href=""style="font-size: 10px;color: #666">7616条评价</a>
        </div>
    </div>
        </div>



        <div class="wangye">
            <a href=""><em>百度</em>一下,你就知道</a>
        </div>
        <div class="xiaolan"><a href="">官网</a></div>
    </div>
    <div class="wangye2"style="width: 10%">
        <img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2920084749,2018893236&fm=58&s=39C718720E8EBE011B398BAC0300F024&bpow=121&bpoh=75" style="width: 110px;height: 68px;float: left;" alt="">
        <div class="wenzi" style="margin-left: 120px;margin-top: -50px">
            <spen style="font-size: 12px;">全球最大的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。</spen>
            <div>
                <a href=""style="font-size: 10px;color: green">https://www.baidu.com/</a>
                - <a href=""style="font-size: 10px;color: #666">百度快照</a>
                - <a href=""style="font-size: 10px;color: #666">7616条评价</a>
            </div>
        </div>
    </div>


    <div class="wangye" style="margin-left: -490px;margin-top:40px">
        <a href=""><em>百度</em>一下,你就知道</a>
    </div>
    <div class="xiaolan"  style="margin-left: -370px;margin-top:45px"><a href="">官网</a></div>
</div>
<div class="wangye2"style="width: 10%">
    <img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2920084749,2018893236&fm=58&s=39C718720E8EBE011B398BAC0300F024&bpow=121&bpoh=75" style="width: 110px;height: 68px;float: left;" alt="">
    <div class="wenzi" style="margin-left: 120px;margin-top: -50px">
        <spen style="font-size: 12px;">全球最大的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。</spen>
        <div>
            <a href=""style="font-size: 10px;color: green">https://www.baidu.com/</a>
            - <a href=""style="font-size: 10px;color: #666">百度快照</a>
            - <a href=""style="font-size: 10px;color: #666">7616条评价</a>
        </div>
    </div>
</div>



</div>
<!--    另一半-->
    <div style="width: 40%;float: left;margin-top: -320px;margin-left: 120px;border-left:1px solid #e1e1e1">
    <div style="padding-left: 10px">
        <div>
            <span> <b>百度高管</b></span>
            <a href="" class="a3" style="margin-left:224px">收起</a>
            <img  style="width: 20px;height: 10px" src="img/16.png">
            <table>
                <tr>
                    <td><img src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2274909088,1858101302&fm=58&bpow=800&bpoh=933" style="width: 75px;height: 75px;padding-right: 8px"></td>
                    <td><img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=150676725,3314356719&fm=58&bpow=854&bpoh=1280" style="width: 75px;height: 75px;padding-right: 8px"></td>
                    <td><img src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=1524638461,1039713376&fm=179&app=42&f=JPEG?w=121&h=140" style="width: 75px;height: 75px;padding-right: 8px"></td>
                    <td><img src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=3914165086,579907443&fm=58&bpow=2560&bpoh=3840" style="width: 75px;height: 75px;"></td>

                </tr>
                <tr>
                    <td style="text-align: center"><a href="" class="a3">李彦宏</a></td>
                    <td style="text-align: center"><a href="" class="a3">余正钧</a></td>
                    <td style="text-align: center"><a href="" class="a3">张亚勤</a></td>
                    <td style="text-align: center"><a href="" class="a3">王海峰</a></td>
                </tr>
                <tr class="a4">
                    <td style="text-align: center">百度创始人</td>
                    <td style="text-align: center">百度集团首</td>
                    <td style="text-align: center">百度总裁</td>
                    <td style="text-align: center">百度集团首</td>
                </tr>
                <tr class="a4">
                    <td style="text-align: center">董事长CEO</td>
                    <td style="text-align: center">席财务官</td>
                    <td style="text-align: center"></td>
                    <td style="text-align: center">席技术官</td>
                </tr>
                <tr>
                    <td><img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=1408084656,2148118768&fm=58&bpow=1856&bpoh=2784" style="width: 75px;height: 75px;padding-right: 8px"></td>
                    <td><img src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=158325503,3532205281&fm=179&app=42&f=JPEG?w=121&h=140" style="width: 75px;height: 75px;padding-right: 8px"></td>
                    <td><img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=4057859808,3682885315&fm=58&bpow=1000&bpoh=1500" style="width: 75px;height: 75px;padding-right: 8px"></td>
                    <td><img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3405652569,3625832956&fm=58&bpow=2480&bpoh=3720" style="width: 75px;height: 75px;"></td>
                </tr>
                <tr>
                    <td style="text-align: center"><a href="" class="a3">沈抖</a></td>
                    <td style="text-align: center"><a href="" class="a3">梁志祥</a></td>
                    <td style="text-align: center"><a href="" class="a3">王路</a></td>
                    <td style="text-align: center"><a href="" class="a3">崔珊珊</a></td>
                </tr>
            </table>
        </div>
        <div style="margin-top: 20px">
            <span ><b>百度旗下产品</b></span>
            <a href="" class="a3" style="margin-left:194px">展开</a>
            <img  style="width: 20px;height: 10px" src="img/15.png">
            <table>
                <tr>
                    <td><img src="https://ss2.bdstatic.com/8_V1bjqh_Q23odCf/pacific/1910589539.png" style="width: 75px;height: 75px; padding-right: 8px"></td>
                    <td><img src="https://ss2.bdstatic.com/-fo3dSag_xI4khGkpoWK1HF6hhy/wisegame/wh%3D68%2C68/sign=a26062838f0a19d8cb568c030bd6b4b3/e4dde71190ef76c6c930c0199216fdfaaf516725.jpg" style="width: 75px;height: 75px;padding-right: 8px"></td>
                    <td><img src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=3988331986,1314110986&fm=85&app=79&f=PNG?w=121&h=75&s=7597673AECA1480316B7B3FA0300702B" style="width: 75px;height: 75px;padding-right: 8px"></td>
                    <td><img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3351978174,3395656223&fm=58&bpow=400&bpoh=400" style="width: 75px;height: 75px;"></td>
                </tr>
                <tr>
                    <td style="text-align: center"><a href="" class="a3">百度搜索</a></td>
                    <td style="text-align: center"><a href="" class="a3">百度APP</a></td>
                    <td style="text-align: center"><a href="" class="a3">百度糯米</a></td>
                    <td style="text-align: center"><a href="" class="a3">百度地图</a></td>
                </tr>
                </tr>
                <tr class="a4">
                    <td style="text-align: center">全球最大中</td>
                    <td style="text-align: center">有事搜一搜</td>
                    <td style="text-align: center">本地精品生</td>
                    <td style="text-align: center">亿万人在用</td>
                </tr>
                <tr class="a4">
                    <td style="text-align: center">文搜索引擎</td>
                    <td style="text-align: center">没事看一看</td>
                    <td style="text-align: center">活指南</td>
                    <td style="text-align: center">的专业地图</td>
                </tr>
            </table>
        </div>
    </div></div>
</div>
</body>
</html>在这里插入代码片
防脱发的小萌新
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
初学Web开发----尽可能的模仿BAIDU的搜索页面（只用HTML书写）
m0_74299308的博客
09-10 433
初学Web开发课后作业，只用HTML 尽可能的模仿BAIDU的搜索页面
【前端】如何实现一个类似于百度搜索数据展示的页面？
m0_64210833的博客
03-28 750
如何实现一个类似于百度搜索数据展示的页面？
精仿百度搜索UI界面，首页/搜索页/结果页/我的，支持搜索网页，网盘资源，文档，图片，源码，影视资源，音乐，歌曲，视频等，界面漂亮颜值高，视频商城小工具等
最新发布
我的昵称：程序员SUMER（全网同名）
05-25 891
精仿百度搜索UI界面，首页/搜索页/结果页/我的，支持搜索网页，网盘资源，文档，图片，源码，影视资源，音乐，歌曲，视频等，界面漂亮颜值高，视频商城小工具等
ES+HBase【案例】仿百度搜索04：开发仿百度搜索项目
weixin_40612128的博客
03-17 4255
一、介绍 这个搜索引擎项目主要涉及到数据采集、数据存储、建立索引和数据展现环节。 针对一个搜索引擎项目而言，它的数据基本上都是来源于互联网上的公开数据，想要获取这些数据就需要使用爬虫工具了，目前市面上有一些爬虫产品，但是在使用的时候基本上都需要二次开发，所以企业里面都会有专门的爬虫工程师负责这个工作。 我们在开发这个搜索引擎项目的时候就不再针对爬虫数据采集模块进行扩展了，到时候我会提供一个数据接口，大家通过接口可以直接获取到一些互联网上的公开数据。 1、数据格式 数据大致格式是这样的： 我们在开发这个搜索
21行业垂直搜索引擎源码（仿百度带蜘蛛）
06-04
21行业垂直搜索引擎源码（仿百度带蜘蛛）程序是和搜猫整合的 
仿百度搜索结果
weixin_44329441的博客
09-08 542
源代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>百度搜索页面</title> <style> .left{ height: 34px; ...
Vue 仿百度搜索功能实现代码
08-31
如果用户按下回车键，会打开一个新的窗口，跳转到百度搜索结果页面。 总的来说，这个示例展示了如何使用Vue.js和vue-resource实现一个简单的搜索功能，包括发送JSONP请求获取数据、更新视图以及处理用户输入。在...
仿百度首页搜索html模板
10-11
在仿百度搜索模板中，我们需要对搜索框和按钮进行美化。以下是一些基本的CSS样式示例： ```css .search-form { display: flex; align-items: center; } .search-input { width: 300px; padding: 8px; border:...
搜索引擎课设设计，仿百度搜索界面
02-24
对于前端界面，项目描述提到是仿照百度搜索界面。这涉及到HTML、CSS和JavaScript的知识，用于构建用户友好的交互界面。HTML用于构建页面结构，CSS负责样式设计，而JavaScript则可以处理用户输入和与后端的交互。 ...
仿百度搜索引擎PHP源码
02-16
【标题】"仿百度搜索引擎PHP源码"是一个基于PHP编程语言开发的搜索引擎系统，它的设计灵感来源于百度，旨在提供一个类似百度的用户界面和搜索体验。这个系统的核心目标是为用户提供快速、准确的信息检索功能，使得...
UI界面 仿百度网盘简单框架
05-28
本项目“UI界面 仿百度网盘简单框架”旨在为开发者提供一个模仿百度网盘的UI设计基础，以实现更加直观、易用的文件管理体验。下面我们将深入探讨这个项目的相关知识点。 首先，UI界面的设计注重简洁性和一致性。...
【超炫】仿百度页面，仿百度搜索框提示效果源代码（包括html,css文件）
04-13
仿百度页面，仿百度搜索框提示效果源代码（包括html,css文件） 效果演示：http://bdwww.cszhan.top/ 【超炫】仿百度搜索引擎首页html代码静态 网址导航源码 仿百度首页搜索html模板 仿百度首页关键词内容列表信息展示，包括html,css文件
模仿百度搜索结果分页插件
04-30
模仿百度搜索结果分页插件，可自定义页数，每页显示多少条，显示多少页，自定义url参数等。
仿新版百度首页html模板
08-22
高仿新版百度首页html模板 DIV+CSS的 详细不多说，自己下来看就知道
仿百度搜索框源码
01-17
仿百度搜索框源码
利用jQuery和css实现的模仿百度搜索列表页面的分页的足迹效果
09-03
利用jQuery和css实现的模仿百度搜索列表页面的分页的足迹效果，主要运用css的border属性来实现三角形，jQuery实现切换和选中的效果：
仿百度搜索主页源码
weixin_42303820的博客
09-06 2908
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>百度一下，你就知道</title> <style> #biao{ text-align: right; } /*上面的文...
模仿“百度”页面的html代码
热门推荐
Liangsm_的博客
11-25 5万+
模仿“百度”页面的html代码<!DOCTYPE html> <html lang="en"><head class="ui semantic"> <meta charset="UTF-8"> <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> --> <!-- //<meta
仿百度页面
代码小菜鸟
09-27 2866
百度 <head> <meta charset="utf-8"> <title>百度一下，你就知道</title> </head> <body> <table border="0px" width="1900px" height="955px"> <tr> <td align="right"> <a hr
仿百度文库：文档在线预览技术解析与实现
4. 如果需要，对转换后的Flash进行优化，如分页加载，添加加密机制，或整合登录界面。 这个过程涉及的技术和工具对于构建一个类似于百度文库的在线文档预览系统至关重要，确保用户可以在不下载原始文件的情况下安全...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值