web百度

最新推荐文章于 2022-12-27 14:57:33 发布
最新推荐文章于 2022-12-27 14:57:33 发布
阅读量186 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42250804/article/details/100639565
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        .toubu {
            width: 100%;
            height: 110px;
        }


        .tupian{
            width: 127px;
            height: 50px;
            float: left;
            position: absolute;
            top: 10px;
            left: 10px;
        }

        .contion{
            width: 642px;
            height: 36px;
            position: absolute;
            top: 18px;
            left: 140px;
        }
        .contion>div{
            float: left;
        }
        .left-box{
            width: 540px;
            height: 34px;

            border: 1px solid #3385ff;

        }
        .right-box{
            height: 36px;
            width: 100px;
            background-color: cornflowerblue;


        }
        .right-box p{
            text-align: center ;
            color: white;
            margin-top: 7px;
            font-size: 15px;
        }
        input{
            outline: none;
            border: 0;
            height: 33.5px;
            width: 540px;

        }
        .daohang{
            width: 344px;
            height: 50px;
            float: left;
            position: absolute;
            top: 18px;
            left: 1200px;
        }
        .daohang ul {
            list-style: none;

        }
        .daohang ul{

            height: 40px;
            list-style: none;
            overflow: hidden;
            float: right;
            padding-top: 10px;

        }
        .daohang ul li {
            float: left;
            margin-right: 20px;
        }
        .daohang ul li a {
            font-size: 15px;
            color: black;
            display: block;

        }
        .toubudaohang{
            width: 1550px;
            height: 50px;
            margin-top: 60px;
            background-color: #f8f8f8;
        }
        .toubudaohang ul {
            list-style: none;

        }
        .toubudaohang ul{

            height: 50px;
            list-style: none;
            overflow: hidden;
            padding-left: 127px;


        }
        .toubudaohang ul li {
            float: left;

            height: 48px;
            width: 65px;



        }
        .toubudaohang ul li a {
            font-size: 15px;
            color: black;
            display: block;
            text-decoration: none;
            margin-top: 15px;
            margin-left: 15px;

        }
        .sousuojieguo{
            margin-top: 10px;
            height: 10px;
            width: 650px;
            padding-left: 127px;
            color: lightgray;
        }
        /*头部*/
        .shenti-left{
            float: left;
            padding-left: 127px;
            width: 650px;
        }
        .baidu{
            width: 650px;
            height: 100px;
        }
        .guanwang{
            text-decoration: none;
            color: white;
            text-align: center;


        }
        .baidu1{
            width: 650px;
            height: 20px;
        }
        .baidu2{
            width: 650px;
            height: 90px;
        }
        .baidu2>img{
            float: left;
            position: absolute;
            top: 200px;
            left: 127px;
        }
        .baidubaike{
            list-style: none;
            overflow: hidden;
        }
        .baidubaike>li{
            float: left;
            margin-right: 10px;
        }
        .baidubaike>li>a{
            color: blue;
        }
        .guanzhudian{
            width: 230px;
            border: 1px solid black;
            border-left:2px solid blue ;
        }
        .baidu3{
            margin-top: 5px;
            width: 650px;
            height: 200px;
            border: 1px solid lightgray;
        }
        .baidu3>img{
            float: left;
            margin: 20px;
        }
        .baidu3>p{
            width:500px;
            float: left;
            margin-top: 10px;
        }
        /*左边身体*/
        .shenti-right{
            float: right;
            padding-right: 127px;
            width: 500px;
            height: 700px;
            border-left: 2px solid black;
        }
        .jieshao{
            width: 550px;
            height: 220px;
        }
        .biaoti{
            width: 510px;
            height: 20px;
        }
        .jiehaorenwu{
            width: 550px;
            height: 220px;

        }
        .zhengti{
            width: 140px;
            height: 220px;
            float: left;
            margin-left: -65px;
        }
        .zhengti1{
            width: 140px;
            height: 220px;
            float: left;
            margin-left: -15px;
            margin-right: -15px;
        }
        .zhengti2{
            width: 140px;
            height:220px;
            float: left;

        }
        .zhengti3{
            width: 140px;
            height: 220px;
            float: left;
            margin-left: -15px;

        }
        /*右边身体*/
    </style>
</head>
<body>
<div class="toubu">
    <div class="tupian">
        <img src="https://www.baidu.com/img/baidu_jgylogo3.gif" height="38" width="117"/>
    </div>
    <div class="contion">
        <div class="left-box">
            <input type="text">
        </div>
        <div class="right-box">
            <p>百度一下</p>
        </div>
    </div>
    <div class="daohang">
        <ul>
            <li><a href="https://www.baidu.com">百度首页</a></li>
            <li><a href="#">设置</a></li>
            <li><a href="#">登录</a></li>
        </ul>
    </div>
    <div class="toubudaohang">
        <ul>
            <li style="border-bottom: solid blue;"><a href="#" style="color: black; font-weight: bold" >网页</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><a href="#">采购</a></li>
            <li><a href="#">地图</a></li>
            <li><a href="#">更多》</a></li>
        </ul>
    </div>
    <div class="sousuojieguo">
        <span>百度为您找到相关结果约100,000,000个</span>
        <span style="float: right;"><img src="img/loudou.png" height="10px" width="10px"/>搜索工具</span>
    </div>
</div>
<div class="shenti-left">
    <div class="baidu">
        <div class="baidu1">
            <a href="#"><span style="color: red">百度</span>一下,你就知道</a>
            <a href="#" class="guanwang"><span style="background-color: blue">官网</span></a>
        </div>
        <div class="baidu2">
            <a href="#" ><img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2920084749,2018893236&fm=58&s=39C718720E8EBE011B398BAC0300F024&bpow=121&bpoh=75" height="75" width="121" /></a>
            <span style=" width: 500px;float: left; position: absolute;top: 200px;left: 260px;">全球最大的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。<span style="color: red">百度</span>超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。</span>
            <span style="position: absolute; top: 240px;"><a href="https://www.baidu.com" style="text-decoration: none; color: green;margin-left: 10px">https://www.baidu.com/</a>
                <img src="img/xiala.png" height="10px" width="10px"/>&nbsp;<img src="img/mygs.png" height="10px" width="15px"/>-<a
                        href="#" style="color: lightgray">百度快照</a>-<a href="#" style="color: lightgray">1条评价</a></span>
        </div>
    </div>
    <div class="baidu" style="width: 650px;height: 170px;">
        <div class="baidu1">
            <a href="#"><span style="color: red">百度</span>&nbsp;<span style="color: red">百度</span>百科</a>

        </div>
        <div class="baidu2">
            <a href="#" ><img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=1593486624,3032607273&fm=58&bpow=540&bpoh=540" height="121" width="121"/></a>
            <span style=" width: 500px;float: left; position: absolute;top: 300px;left: 260px;"><span style="color: red">百度</span>（纳斯达克：BIDU），全球最大的中文搜索引擎、最大的中文网站。<span style="color: red;">百度</span> 愿景是：成为最懂用户，并能帮助人们成长的全球顶级高科技公司。“<span style="color: red;">百度</span>”二字，来自于八百年前南宋词人...
                    <ul class="baidubaike">
                        <li ><a href="#">123</a></li>
                        <li ><a href="#">123</a></li>
                        <li ><a href="#">123</a></li>
                        <li ><a href="#">123</a></li>
                        <li ><a href="#">123</a></li>
                        <li ><a href="#">123</a></li>
                    </ul>

                </span>
        </div>
    </div>
    <div class="baidu" >
        <div class="baidu1">
            <a href="#"><span style="color: red">百度</span>地图</a>
        </div>
        <div class="baidu2">
            <a href="#" ><img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=1593486624,3032607273&fm=58&bpow=540&bpoh=540"height="75" width="120"/></a>
            <span style=" width: 500px;float: left; position: absolute;top: 460px;left: 260px;">浏览地图、搜索地点、查询公交驾车线路、查看实时路况,您的出行指南、生活助手。提供地铁线路图浏览,乘车方案查询,以及准确的票价和时间信息。</span>
            <span style="position: absolute; top: 520px;"><a href="https://www.baidu.com" style="text-decoration: none; color: green;margin-left: 10px">https://map.baidu.com/</a>
                <img src="img/xiala.png" height="10px" width="10px"/>&nbsp;<img src="img/mygs.png" height="10px" width="15px"/>-<a
                        href="#" style="color: lightgray">百度快照</a>-<a href="#" style="color: lightgray">1条评价</a></span>
        </div>
    </div>

</div>
<div class="shenti-right">
    <div class="jieshao">
        <div class="biaoti">
            <span style="font-weight: bold;margin-left: 10px;float: left;">百度高管</span>

        </div>
        <div class="jiehaorenwu">
            <div class="zhengti">
                <img src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2274909088,1858101302&fm=58&bpow=800&bpoh=933" height="121" width="121"/>
                <a href="#" style="margin-left: 40px" >李彦宏</a></span>
                <p style="text-align: center">百度创始人<br>董事长CEO</p>
            </div>

            <div class="zhengti1">
                <img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=150676725,3314356719&fm=58&bpow=854&bpoh=1280" height="121" width="121"/>
                <a href="#" style="margin-left: 40px" >余正钧</a></span>
                <p style="text-align: center">百度集团首<br>席财务官</p>
            </div>

            <div class="zhengti2">
                <img src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=1524638461,1039713376&fm=179&app=42&f=JPEG?w=121&h=140" height="121" width="121"/>
                <a href="#" style="margin-left: 40px" >张亚勤</a></span>
                <p style="text-align: center">百度总裁</p>
            </div>

            <div class="zhengti3">
                <img src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=3914165086,579907443&fm=58&bpow=2560&bpoh=3840" height="121" width="121"/>
                <a href="#" style="margin-left: 40px" >王海峰</a></span>
                <p style="text-align: center">百度集团首<br>席技术官</p>
            </div>
        </div>
        <div class="jieshao">
            <div class="biaoti">
                <span style="font-weight: bold;margin-left: 10px;float: left;">百度旗下产品</span>
            </div>
            <div class="jiehaorenwu">
                <div class="zhengti" style="margin-left: -94px;">

                    <img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2920084749,2018893236&fm=58&s=39C718720E8EBE011B398BAC0300F024&bpow=121&bpoh=75" width="121"/>
                    <a href="#" style="margin-left: 40px" >百度搜索</a></span>
                    <p style="text-align: center">全球最大的中<br>文搜索引擎</p>
                </div>

                <div class="zhengti1">
                    <img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2920084749,2018893236&fm=58&s=39C718720E8EBE011B398BAC0300F024&bpow=121&bpoh=75" height="121" width="121"/>
                    <a href="#" style="margin-left: 40px" >百度APP</a></span>
                    <p style="text-align: center">有事搜一搜<br>没事看一看</p>
                </div>

                <div class="zhengti2">
                    <img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2920084749,2018893236&fm=58&s=39C718720E8EBE011B398BAC0300F024&bpow=121&bpoh=75" height="121" width="121"/>
                    <a href="#" style="margin-left: 40px" >百度糯米</a></span>
                    <p style="text-align: center">本地生<br>活精品指南</p>
                </div>

                <div class="zhengti3">
                    <img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2920084749,2018893236&fm=58&s=39C718720E8EBE011B398BAC0300F024&bpow=121&bpoh=75" height="121" width="121"/>
                    <a href="#" style="margin-left: 40px" >百度地图</a></span>
                    <p style="text-align: center">亿万人在用<br>的专业地图</p>
                </div>
            </div>
            <div class="jieshao">
                <div class="biaoti">
                    <span style="font-weight: bold;margin-left: 10px;float: left;">互联网巨头财报</span>
                </div>
                <div class="jiehaorenwu">
                    <div class="zhengti" style="margin-left: -94px;">

                        <img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2920084749,2018893236&fm=58&s=39C718720E8EBE011B398BAC0300F024&bpow=121&bpoh=75" height="121" width="121"/>
                        <a href="#" style="margin-left: 40px" >百度搜索</a></span>
                        <p style="text-align: center">全球最大的中<br>文搜索引擎</p>
                    </div>

                    <div class="zhengti1">
                        <img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2920084749,2018893236&fm=58&s=39C718720E8EBE011B398BAC0300F024&bpow=121&bpoh=75" height="121" width="121"/>
                        <a href="#" style="margin-left: 40px" >百度APP</a></span>
                        <p style="text-align: center">有事搜一搜<br>没事看一看</p>
                    </div>

                    <div class="zhengti2">
                        <img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2920084749,2018893236&fm=58&s=39C718720E8EBE011B398BAC0300F024&bpow=121&bpoh=75" height="121" width="121"/>
                        <a href="#" style="margin-left: 40px" >百度糯米</a></span>
                        <p style="text-align: center">本地生<br>活精品指南</p>
                    </div>

                    <div class="zhengti3">
                        <img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2920084749,2018893236&fm=58&s=39C718720E8EBE011B398BAC0300F024&bpow=121&bpoh=75" height="121" width="121"/>
                        <a href="#" style="margin-left: 40px" >百度地图</a></span>
                        <p style="text-align: center">亿万人在用<br>的专业地图</p>
                    </div>
                </div>
            </div>
</body>
</html>
qq_42250804
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
web——百度首页
疯纸的博客
09-26 1031
仿百度首页
【百度 Web服务API】
joanmelon的博客
02-14 393
☀️大家好，我是宾果的救星~希望记录的学习和收获能够帮助大家在开发过程中得到思路并且解决难题。希望大家多多点赞~爱你们哟~
web(创建百度页面)
k_ys的博客
04-10 2748
以下内容为运用CSS和html语言实现创建百度首页页面框，初学web,布局不太美观。 <html> <head> <title>https://www.baidu.com</title> <style type="text/css"> #nav{ border:0px red solid; text-align:rig...
web前端之如何做百度界面
wzssgdx的博客
12-07 1763
效果图如下 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>百度首页</title> </head> <style> .box1{ text-align: center; font-size: 10px; } ...
web百度离线地图开发（详细教程）2019
热门推荐
PGguoqi的博客
07-24 2万+
web百度离线地图开发（详细教程）需求情景主要参考开发步骤一、JS API文件下载二、修改API文件1、屏蔽ak验证2、设置引用本地资源路径3、下载本地资源4、引用本地资源三、加载瓦片改为本地离线瓦片1、存储目录2、下载瓦片3、瓦片配置文件4、修改加载瓦片路径四、关于地图下载器1、免费/付费2、瓦片文件的大小 需求情景 项目在内网上使用，不得连接外网，所以需要开发离线地图功能 这个项目是vue+v...
web制作简易百度网页
kiss_scarecrow的博客
10-01 4164
web制作简易百度网页 代码如下： <!-- edu_5_4_1.html --> <body> <p align="center"><a href="http://www.baidu.com"> <img border="0" src="../Desktop/ch5/baidu_sylogo1.gif" /></p> <p align="center"> <a href="http://news.baidu.com"
【web百度离线地图开发】原生实现百度地图离线版速览
可可的博客
12-27 2297
下载瓦片存放在nginx搭建的服务器上瓦片的存放，交给后端，前端只需要知道瓦片存放路径即可。第一步:把配置好的离线地图文件拖入public文件夹下。需求如下，在基于在线地图的基础上展现离线地图。vue页面中创建百度地图实例对象。在我的资源可以自行下载js文件。index.html中引入。vue中展示离线地图。
web百度地图API路线规划+导航
ZHIYUANfL的博客
06-16 5864
#app{overflow: hidden;position:absolute;top:0rem;left:0rem;z-index:99999;width:7.5rem;display: none} #daohang{display:block;padding:3px 5px;border-radius:3px;position:absolute;bottom:0.1rem;right:0.1
WEB端百度语音合成Demo
桃树林
04-09 2316
Demo 地址：http://yotcap.top/htm/speaker.html 源码地址：https://github.com/yotcap/someGadgets/tree/master/speaker
web百度地图
07-23
主要是web项目中的关于百度地图的应用 添加多个marker
离线百度地图 Web示例及使用
01-10
离线百度地图Web示例及使用是针对开发者和爱好者提供的一种在无网络环境下依然能使用地图服务的技术。本文将深入探讨如何在Web项目中集成离线百度地图，以及相关的技术要点。 首先，我们要理解离线地图的基本原理。...
java web 百度地图完整demo 出发地和目的地分别定位
12-15
这个"java web 百度地图完整demo 出发地和目的地分别定位"项目，是基于百度地图API构建的一个示例，旨在帮助开发者理解如何在Web应用中集成百度地图服务，包括获取地理位置、计算两点间的距离、规划路线等核心功能。...
ios url 调用百度app 和 调用web 百度地图
11-16
本文将深入探讨如何在iOS中利用URL Scheme实现对百度App的调用，以及如何打开百度地图的Web服务。 首先，URL Scheme是一种允许应用程序间通信的方式，每个应用都有一个独特的URL Scheme，就像网站的HTTP或HTTPS协议...
百度首页demo
11-28
通过这个"百度首页demo"项目，初学者不仅能学习到基础的HTML和CSS知识，还能实践页面布局、响应式设计和简单的交互效果，为以后的Web开发之路打下坚实的基础。同时，这样的实战练习也能提高解决问题和调试代码的能力...
【浏览器插件】智译网页翻译 自动翻译 双语对照 AI对话.zip
08-21
智译网页翻译插件，由新译科技精心打造，是一款智能化的网页翻译利器。当您浏览网页时，它能够自动识别页面语言，并迅速将其翻译成您预设的目标语言。支持双语对照、自动翻译、划词翻译，让您在浏览外文网站时，信息一目了然。 AI助手LangGPT的加入，让智译更进一步。它不仅能自动总结页面内容，还能与您自由对话，高效便捷地获取所需信息。智译支持包括英语、俄语、德语、法语、西班牙语等在内的十数种语言与中文的互译，无论是欧美语言还是亚洲语言，甚至是少数民族语言，都能轻松应对。 无论是查阅资料、浏览新闻还是在线购物，智译都能助您一臂之力，节省时间，提升效率。使用起来也非常简单： 1. 自动翻译的开启与关闭：在设置页面，选择“自动翻译为”选项，即可在打开网页时自动翻译。若不需要自动翻译，关闭此选项即可，也可以点击右下角功能条上的“译”按钮手动翻译。 2. 双语对照翻译的开启与关闭：在设置页面，打开“双语对照模式”，新开或刷新页面后，翻译触发，页面将同时展示原文与译文。点击智译图标可切换查看模式，还可以自定义显示样式。 3. 划词翻译的开启与关闭：在设置页面，启用“启动划词翻译”，即可在页面上划选
毕业设计，基于SpringBoot+Vue+MySQL开发的公寓报修管理系统，源码+数据库+毕业论文+视频演示
08-21
毕业设计，基于SpringBoot+Vue+MySQL开发的公寓报修管理系统，源码+数据库+毕业论文+视频演示 现代经济快节奏发展以及不断完善升级的信息化技术，让传统数据信息的管理升级为软件存储，归纳，集中处理数据信息的管理方式。本公寓报修管理系统就是在这样的大环境下诞生，其可以帮助管理者在短时间内处理完毕庞大的数据信息，使用这种软件工具可以帮助管理人员提高事务处理效率，达到事半功倍的效果。此公寓报修管理系统利用当下成熟完善的Spring Boot框架，使用跨平台的可开发大型商业网站的Java语言，以及最受欢迎的RDBMS应用软件之一的MySQL数据库进行程序开发。公寓报修管理系统有管理员，住户，维修人员。管理员可以管理住户信息和维修人员信息，可以审核维修人员的请假信息，住户可以申请维修，可以对维修结果评价，维修人员负责住户提交的维修信息，也可以请假。公寓报修管理系统的开发根据操作人员需要设计的界面简洁美观，在功能模块布局上跟同类型网站保持一致，程序在实现基本要求功能时，也为数据信息面临的安全问题提供了一些实用的解决方案。可以说该程序在帮助管理者高效率地处理工作事务的同时，也实现了数据信息的整体化，规范化与自动化。 关键词：公寓报修管理系统；Spring Boot框架；MySQL；自动化；VUE
批量flac转mp3脚本
最新发布
08-21
可以批量将.flac音频文件转换成mp3格式，高效快捷 1、将下载的flac文件放到flac目录下 2、双击flac2mp3.bat 3、等转码完成，到mp3目录下查看即可
【浏览器插件】Ctool程序开发常用工具.zip
08-21
【浏览器插件-Ctool：程序开发常用工具】 ### 功能概览 以下是Ctool插件提供的功能列表，每个功能都支持离线使用，以满足开发者在不同环境下的需求。 | 功能分类 | 支持功能 | 离线使用 | |-----------|-----------|-----------| | **哈希** | `md5`, `sha1`, `sha256`, `sha512`, `sm3`, 支持批量处理及文件哈希计算 | √ | | **加密/解密** | `AES`, `DES`, `RC4`, `Rabbit`, `TripleDes`, `sm2`, `sm4` | √ | | **BASE64编码** | 加密、解密，支持文件操作 | √ | | **URL编码** | 编码、解码 | √ | | **时间** | 时间戳转换、毫秒处理、时区转换、时间计算器 | √ | | **二维码** | 生成、解析 | √ | | **条形码** | 生成 | √ | | **汉字转拼音** | 支持声调、首字母、分隔符 | √ | | **IP地址查询** | 运营商、城市信息查询（不支
帮我写一个web百度页面
05-13
但是，你可以在以下网站上找到关于如何编写Web百度页面的教程： - 百度开发者中心：https://developer.baidu.com/ - W3Schools：https://www.w3schools.com/ - MDN Web Docs：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值