百度搜索结果页面

于 2019-09-08 20:09:44 发布
阅读量658 收藏 3
点赞数 1
分类专栏： 前端 文章标签： 结果
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42199230/article/details/100636846
版权

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .er{
            width: 640px;
            /*background-color: pink;*/
        }

        .er > div {
            float: left;

        }

        .left-box {
            width: 538px;
            height: 34px;
            /*background-color: greenyellow;*/
            border: 1px solid #3385ff;
        }

        .right-box {
            height: 36px;
            width: 100px;
            background-color: cornflowerblue;
            text-align: center;
            line-height: 36px;
            color: #fff;

        }
        input {
            outline: none;
            border: 0;
            height: 32px;
            width: 500px;
            margin-left: 5px;
        }
        .ding{
            height: 50px;
            width: 100%;
            border-bottom:solid 1px lightgray;
        }
       .ding .center{
            float: left;
        }
        .ding img{
            float: left;
            line-height: 50px;

        }
        .ding .wen{
            height: 50px;
            text-align: right;
        }
        .ding .wen span{
            margin: 0 5px;
            line-height: 50px;
        }

        .dao{
            height: 40px;
            width: 100%;
            background-color: rgb(248,248,248);
        }
        .dao .kon{
            height: 40px;
            width: 10%;
            float: left;
        }
        .dao .han{
            height: 40px;
            width: 50%;
            float: left;
        }
        .dao .han span{
            line-height: 40px;
            margin-left: 15px;
        }
        .di{
            height: 800px;
            width: 100%;

        }
        .di >.d_left{
            height: 100%;
            width: 10%;

            float: left;
        }
        .di >.d_center{
            height: 100%;
            width: 60%;
            border-right:solid 2px gray ;
            float: left;

        }
        .di >.d_center p{
           font-size: 12px;
            margin-top: -3px;
        }
        .dc{
               height: 150px;
               width: 80%;

           }
        .dc .dc_left{
            height: 100%;
            width: 20%;

            float: left;
        }
        .dc .dc_right{
            height: 179px;
            width: 80%;
            float: left;
        }
        .d_right{
            height: 200px;
            width: 29.5%;
            float: right;
        }
        .d_right .dr_center div{
               height:279px;
               width: 30%;
               float:left;
               text-align: center;
               font-size: 12px;
           }
        .d_right .dr_center p{
           margin: 3px;
        }
        .d_right .dr_center span  a{
        color: blue;
        }

    </style>
</head>
<body>
<div class="san">
   <!--顶部-->
 <div class="ding">
    <img src="baidu.jpg" alt="" height="40" width="10%">
    <div class="center" >
        <div  class="er">
        <div class="left-box">
        <input type="text">
        <img src="" alt="">
        </div>
        <div class="right-box">
        百度一下
        </div>
        </div>
    </div>
    <div class="wen">
        <span>百度首页</span>
        <span>设置</span>
        <span>登录</span>
    </div>
 </div>
    <!--导航-->
 <div class="dao">
     <div class="kon"></div>
     <div class="han">
         <span>网页</span>
         <span>资讯 </span>
         <span>视频 </span>
         <span>图片 </span>
         <span>知道 </span>
         <span>文库</span>
         <span>贴吧</span>
         <span>采购 </span>
         <span>地图 </span>
         <span>更多»</span>
     </div>
 </div>
    <!--主体-->
 <div class="di">
     <div class="d_left"></div>
     <div class="d_center">
         <p>百度为您找到相关结果约54 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;更多</p>
         <div class="dc">
             <div class="dc_top"><a href=""><h3><span style="color: red">百度</span>一下，你就知道</h3></a></div>
             <div class="dc_left">
                 <img src="u=357489844,4049484276&fm=26&gp=0.jpg" alt="" height="90%" width="100%">
             </div>
             <div class="dc_right">通常情况下，我们用空格键来打出多个空格，而在编写代码时，通过空格键、Tab键以及回车键打出的空格，都会被HTML（超文本标记语言）自动忽略。HTML将这样的键视为空白字符，并显示为单个空白间隔。尽管CSS提供了多种样式的空格和缩进，但是在HTML中也有一些工具可以让你自己定义空格。</div>
         </div>
         <div class="dc">
             <div class="dc_top"><a href=""><h3><span style="color: red">百度</span>一下，你就知道</h3></a></div>
             <div class="dc_left">
                 <img src="baidu.jpg" alt="" height="90%" width="100%">
             </div>
             <div class="dc_right">通常情况下，我们用空格键来打出多个空格，而在编写代码时，通过空格键、Tab键以及回车键打出的空格，都会被HTML（超文本标记语言）自动忽略。HTML将这样的键视为空白字符，并显示为单个空白间隔。尽管CSS提供了多种样式的空格和缩进，但是在HTML中也有一些工具可以让你自己定义空格。</div>
         </div><div class="dc">
         <div class="dc_top"><a href=""><h3><span style="color: red">百度</span>一下，你就知道</h3></a></div>
         <div class="dc_left">
             <img src="baidu.jpg" alt="" height="90%" width="100%">
         </div>
         <div class="dc_right">通常情况下，我们用空格键来打出多个空格，而在编写代码时，通过空格键、Tab键以及回车键打出的空格，都会被HTML（超文本标记语言）自动忽略。HTML将这样的键视为空白字符，并显示为单个空白间隔。尽管CSS提供了多种样式的空格和缩进，但是在HTML中也有一些工具可以让你自己定义空格。</div>
     </div>
     </div>

     <div class="d_right">
         <div class="dr_top">附近房价开始你发送到</div>
         <div class="dr_center">
             <div>
                 <img src="u=357489844,4049484276&fm=26&gp=0.jpg" alt="" width="100%" height="30%">
                 <span><a href="">电风扇</a></span>
                 <p>时代峻峰黄寺</p>
                 <p>时代峻峰黄寺</p>
             </div>
             <div>
                 <img src="u=357489844,4049484276&fm=26&gp=0.jpg" alt="" width="100%" height="30%">
                 <span><a href="">电风扇</a></span>
                 <p>时代峻峰黄寺</p>
                 <p>时代峻峰黄寺</p>
             </div>
             <div>
                 <img src="u=357489844,4049484276&fm=26&gp=0.jpg" alt="" width="100%" height="30%">
                 <span><a href="">电风扇</a></span>
                 <p>时代峻峰黄寺</p>
                 <p>时代峻峰黄寺</p>
             </div>
         </div>
     </div>
     <div class="d_right">
         <div class="dr_top">附近房价开始你发送到</div>
         <div class="dr_center">
             <div>
                 <img src="u=357489844,4049484276&fm=26&gp=0.jpg" alt="" width="100%" height="30%">
                 <span><a href="">电风扇</a></span>
                 <p>时代峻峰黄寺</p>
                 <p>时代峻峰黄寺</p>
             </div>
             <div>
                 <img src="u=357489844,4049484276&fm=26&gp=0.jpg" alt="" width="100%" height="30%">
                 <span><a href="">电风扇</a></span>
                 <p>时代峻峰黄寺</p>
                 <p>时代峻峰黄寺</p>
             </div>
             <div>
                 <img src="u=357489844,4049484276&fm=26&gp=0.jpg" alt="" width="100%" height="30%">
                 <span><a href="">电风扇</a></span>
                 <p>时代峻峰黄寺</p>
                 <p>时代峻峰黄寺</p>
             </div>
         </div>
     </div>
     <div class="d_right">
         <div class="dr_top">附近房价开始你发送到</div>
         <div class="dr_center">
             <div>
                 <img src="u=357489844,4049484276&fm=26&gp=0.jpg" alt="" width="100%" height="30%">
                 <span><a href="">电风扇</a></span>
                 <p>时代峻峰黄寺</p>
                 <p>时代峻峰黄寺</p>
             </div>
             <div>
                 <img src="u=357489844,4049484276&fm=26&gp=0.jpg" alt="" width="100%" height="30%">
                 <span><a href="">电风扇</a></span>
                 <p>时代峻峰黄寺</p>
                 <p>时代峻峰黄寺</p>
             </div>
             <div>
                 <img src="u=357489844,4049484276&fm=26&gp=0.jpg" alt="" width="100%" height="30%">
                 <span><a href="">电风扇</a></span>
                 <p>时代峻峰黄寺</p>
                 <p>时代峻峰黄寺</p>
             </div>
         </div>
     </div>
 </div>   

</div>

</body>
</html>

运行结果：
在这里插入图片描述

迹然
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
搜索结果页
weixin_50989977的博客
03-12 2422
1.跳转到搜索结果页 01组件 新建组件 02配置路由index.js 03跳转 1 传入搜素页面 2展示搜索结果 04跳转 传参 05阻止子元素冒泡 .stop阻止冒泡 阻止默认行为。prevent 06联想 2根据搜索关键字获取搜索结果 3.展示到列表中 5.此时不能滚动 设置样式 6.设置固定定位 7.设置样式 让头部 不挡住 8.添加方法获取api 引入 1.发强求 f发请求 铺到页面中去list 判断所有的内容是否加载完成 ...
html 显示搜索结果,搜索结果页.html
weixin_36054508的博客
06-04 927
搜索结果页$axure.utils.getTransparentGifPath = function() { return 'resources/images/transparent.gif'; };$axure.utils.getOtherPath = function() { return 'resources/Other.html'; };$axure.utils.getReloadPat...
[译] 搜索结果页的最佳实践
weixin_34235371的博客
03-28 159
原文地址：Best Practices for Search Results 原文作者：Nick Babich 译文出自：掘金翻译计划 译者：sunui 校对者：iloveivyxuan、Graning 搜索就像是用户和系统之间的一次对话：用户用一次查询来表达他们需要的信息，而系统用一组结果做为回应。搜索结果页恰恰是整个搜索体验中的一个关键部分：它提供了让用户参与对话的机会，来指导用户的...
百度搜索结果页url参数详解
jianhuili的CSDN博客
07-15 2344
在百度首页输入任意关键词搜索之后，我们跳转到搜索结果页面，在浏览器的网址栏我们可以看到很长的一串url地址。那么，你真的了解这一串url的含义吗? 　　s?：搜索 　　百度搜索结果页使用了重定向，因此我们看到的不是search.php?这样的url格式 　　wd：当前搜索的关键词 　　即输入的关键词的urlencode字符串，编码格式为gbk或者utf-8，默认编码格式为utf-8。用于作
模仿百度搜索结果分页插件
04-30
模仿百度搜索结果分页插件，可自定义页数，每页显示多少条，显示多少页，自定义url参数等。
PHP实现抓取百度搜索结果页面【相关搜索词】并存储到txt文件示例
01-21
本文实例讲述了PHP实现抓取百度搜索结果页面【相关搜索词】并存储到txt文件。分享给大家供大家参考，具体如下： 一、百度搜索关键词【软件开发网】 【软件开发网】搜索链接 ...
CrawlerBaidu:简单爬虫爬出百度搜索结果页面
06-04
本项目"**CrawlerBaidu**"是一个简单的示例，展示了如何利用Python编写爬虫来抓取百度搜索结果页面的数据。该项目的核心库是**BeautifulSoup4**，一个强大的用于解析HTML和XML文档的工具。 首先，我们需要了解**...
PHP爬取百度搜索结果
08-14
主要用来爬取百度的搜索结果中的标题和链接放到txt中-------------------------
百度搜索结果页面解析脚本python
09-17
自己写的一个可以根据用户输入的关键字，进行百度搜索，并对续页页面进行解析自动列出所有标题、摘要、URL的python脚本。
javascript 自动标记来自搜索结果页的关键字
10-29
使用javascript自动标记来自搜索结果页的关键字的实现代码。
Android 调用第三方导航（百度、高德、腾讯）以及坐标转换
04-20
View.OnClickListener onClickListener=new View.OnClickListener() { @Override public void onClick(View view) { switch (view.getId()) { case R.id.baidu_btn: if (MDMUtil.appIsInstalled( getContext(),"com.baidu.BaiduMap")) {//传入指定应用包名 try { double[] gd_lat_lon ; if(RoutingXModel.isGpslatlon){ gd_lat_lon= gaoDeToBaidu(xModel.poc_lon,xModel.poc_lat); }else{ gd_lat_lon= new double[2]; gd_lat_lon[0]=xModel.poc_lon; gd_lat_lon[1]=xModel.poc_lat; } Intent intent = Intent.getIntent("intent://map/direction?" + "destination=latlng:" + gd_lat_lon[1] + "," + gd_lat_lon[0]+ "|name:我的目的地" + //终点 "&mode=driving&" + //导航路线方式 "&src=appname#Intent;scheme=bdapp;package=com.baidu.BaiduMap;end"); intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK); getContext().startActivity(intent); //启动调用 } catch (URISyntaxException e) { Log.e("intent", e.getMessage()); } } else {//未安装 //market为路径，id为包名 //显示手机上所有的market商店 Toast.makeText(getContext(), "您尚未安装百度地图", Toast.LENGTH_LONG).show(); Uri uri = Uri.parse("market://details?id=com.baidu.BaiduMap"); Intent intent = new Intent(Intent.ACTION_VIEW, uri); if (intent.resolveActivity(getContext().getPackageManager()) != null){ getContext().startActivity(intent); } } dismiss(); break; case R.id.gaode_btn: if (MDMUtil.appIsInstalled( getContext(),"com.autonavi.minimap")) { Intent intent = new Intent(); intent.setAction(Intent.ACTION_VIEW); intent.addCategory(Intent.CATEGORY_DEFAULT); intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK); double[] gd_lat_lon ; if(!RoutingXModel.isGpslatlon){ gd_lat_lon= bdToGaoDe(xModel.poc_lat,xModel.poc_lon); }else{ gd_lat_lon= new double[2]; gd_lat_lon[0]=xModel.poc_lon; gd_lat_lon[1]=xModel.poc_lat; } //将功能Scheme以URI的方式传入data Uri uri = Uri.parse("androidamap://navi?sourceApplication=appname&poiname=fangheng&lat;=" + gd_lat_lon[1] + "&lon;=" + gd_lat_lon[0] + "&dev=0&style=4"); intent.setData(uri); //启动该页面即可 getContext().startActivity(intent); } else { Toast.makeText(getContext(), "您尚未安装高德地图", Toast.LENGTH_LONG).show(); Uri uri = Uri.parse("market://details?id=com.autonavi.minimap"); Intent intent = new Intent(Intent.ACTION_VIEW, uri); if (intent.resolveActivity(getContext().getPackageManager()) != null){ getContext().startActivity(intent); } } dismiss(); break; case R.id.tencent_btn: Intent intent = new Intent(); intent.setAction(Intent.ACTION_VIEW); intent.addCategory(Intent.CATEGORY_DEFAULT); intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK); double[] gd_lat_lon ; if(!RoutingXModel.isGpslatlon){ gd_lat_lon= bdToGaoDe(xModel.poc_lat,xModel.poc_lon); }else{ gd_lat_lon= new double[2]; gd_lat_lon[0]=xModel.poc_lon; gd_lat_lon[1]=xModel.poc_lat; } //将功能Scheme以URI的方式传入data Uri uri = Uri.parse("qqmap://map/routeplan?type=drive&to;=我的目的地&tocoord;=" + gd_lat_lon[1]+ "," + gd_lat_lon[0]); intent.setData(uri); if (intent.resolveActivity(getContext().getPackageManager()) != null) { //启动该页面即可 getContext().startActivity(intent); } else { Toast.makeText(getContext(), "您尚未安装腾讯地图", Toast.LENGTH_LONG).show(); } dismiss(); break; case R.id.cancel_btn2: dismiss(); break; } } };
Android生成Market分享链接
09-19 1万+
Android生成Market分享链接 本文介绍一下在Android中如何生成Market链接和Market分享链接。 主要有以下五种方式： 1：使用Java包名搜索App  2：使用Java包名定位App  3：借助关键词搜索App  4：通过开发者名称搜索App  5：组合查询 以下为正文内容介绍： 方式一：使用Java包名
通过打开android应用市场来定位你的app
iteye_8846的博客
06-24 411
在我们自己开发的app中，往往要打开android market，比如很多的app都有评分的功能，需要打开一个android market，我们要打开某个app，但是这个app并没有安装在客户的手机上，我们就需要打开一个android market定位到这个app，以便让客户下载。 通过app包名直接定位到你的App： http://market.android.com/details?id...
程序进入Android Market(网页或者应用)
tibaloga
07-14 448
在实际需求，有可能会有给应用评价这样的功能，通常这样的功能都会跳转到Android Market来让用户评论。 (自己服务器上的数据，总是不那么可信嘛，对吧) 那么如何进入自己应用的评价页面呢? 1. 网页版 通过网页进入自己应用。比如，你的应用名叫: 苏州实时交通 包名为: com.yfz.bus 那只要通过下面的URL即可进入： "https://market.android.com/...
Android 浏览器自定义scheme：market://协议
学习记录
09-09 1万+
目前的浏览器中，自定义schemed的有UC，还有FireFox。大部分的浏览器没做这个点，因为这个点实际使用的时候确实意义不大。 原生的android 浏览器要做自定义sheme，要处理2个问题，一个就是在url的地址栏中输入类似：market://details?id=com.tencent.mobileqq 这样的链接，然后就可以调起系统中的应用市场，比如Google play，豌豆家。。
搜索结果分页
huangyh技术栈
12-02 1402
1.1 整体思路分析 万变不离其宗，首先需要弄清楚需要封装什么格式的数据，数据如何传递，前端封装，后端返回数据给前端，然后在页面上显示出来。 分页：把前端的数据传到后台（在search.html搜索页面，显示页码） 前端： 1.需要传参数到后台（page当前页码、页大小） 2.显示页码（总记录数计算出总页数），所以后台需要返回总记录数和总页数 3.页码需要生成 后端： 1.总记录...
HTML百度搜索框实现(附源码带注释)
热门推荐
托尼stark的博客
05-11 3万+
1.百度类效果 源码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <met...
屏蔽百度搜索结果页的推送广告
Eaphy's Blog
09-26 4827
首先在浏览器中安装插件 广告终结者 或者 adblock plus 这里以广告终结者示例，点击 设置选项， 选择 自定义过滤，添加规则 pos.baidu.com* 百度一下 java，对比结果： ...
PHP抓取百度搜索结果页面的【相关搜索词】并存储
最新发布
06-09
你可以使用 PHP 的 cURL 库来模拟 HTTP 请求，抓取百度搜索结果页面，并使用 PHP 的正则表达式来匹配页面中的相关搜索词。 以下是一个简单的 PHP 抓取百度搜索结果页面的示例代码： ```php // 设置要搜索的关键字...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值