模拟百度页面

最新推荐文章于 2023-10-07 14:08:36 发布
m0_0m_
最新推荐文章于 2023-10-07 14:08:36 发布
阅读量1.3k
点赞数
分类专栏：前端文章标签： css html javascript
本文链接：https://blog.csdn.net/m0_63004006/article/details/124909725
版权
前端专栏收录该内容
4 篇文章 0 订阅
订阅专栏
具体代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>百度一下，你就知道</title>
    <style type="text/css">
      a {
        color: black;
      }
      a:link {
        text-decoration: none;
      } /* 没有访问的链接 */
      a:visited {
        text-decoration: none;
      } /* 已经访问的链接 */
      a:hover {
        color: #5d7bf3;
        text-decoration: none;
      } /* 鼠标指针移动到链接上显示的 */

      /* 左边的部分 */
      .left {
        line-height: 22px;
        font-size: 14px;
        text-align: left;
        margin: 22px 0 22px 0;
        margin-left: 30px;
      }
      /* 右边的设置和登录按钮 */
      .right {
        position: absolute;
        right: 0px;
        width: 150px;
      }
      .dropdown {
        text-align: center;
        position: relative;
        display: inline-block;
        padding-right: 23px;
      }
      .dropdown-content {
        list-style: none;
        left: -26px;
        position: absolute;
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 61px;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        padding: 12px 16px;
        line-height: 30px;
        z-index: 10px;
      }

      .dropdown:hover .dropdown-content {
        display: block;
      }
      .box {
        width: 650px;
        height: 0px;
        margin: 200px auto 100px;
        position: relative;
      }
      input {
        outline: none;
        border: 2px solid #a7aab5;
        height: 45px;
        width: 550px;
        box-sizing: border-box;
        text-indent: 6px;
        font-size: 16px;
        border-radius: 10px 0 0 10px;
      }
      /* 输入框聚焦 */
      input:focus {
        color: #000;
        background-color: #fff;
        border-color: #4e6ef2 !important;
        height: 90px;
        border-radius: 10px 0 10px 10px;
      }
      .gd {
        color: #fff;
        background: #38f;
        line-height: 24px;
        font-size: 13px;
        text-align: center;
        border-bottom: 1px solid #38f;
        margin-left: 7px;
        margin-top: 10px;
        cursor: default;
      }
      .hot-title {
        width: 654px;
        position: relative;
        margin: 45px auto 0;
      }
      .baiduhot div {
        width: 50%;
        overflow: hidden;
        float: left;
        line-height: 32px;
      }
      .baiduyixia {
        font-size: 17px;
      }
      .title-content-title {
        margin: 10px 0 0;
        /* margin-top: 6px;  */
        float: left;
        height: 32px;
        line-height: 32px;
      }
      .title-content-title1 {
        margin: 10px 0 0;
        margin-left: 90px;
        float: left;
        height: 32px;
        line-height: 32px;
      }
      .right-hot {
        float: right;
        line-height: 20px;
      }
      .top1 {
        color: #fe2d46;
      }
      .top2 {
        color: #f60;
      }
      .top3 {
        color: #faa90e;
      }
      .other-top {
        background: 0 0;
        color: #9195a3;
      }
      button {
        height: 45px;
        width: 100px;
        border: none;
        color: white;
        box-sizing: border-box;
        background-color: #4e6ef2;
        position: absolute;
        left: 550px;
        border-radius: 0 10px 10px 0;
        cursor: pointer;
      }
      .imges {
        position: absolute;
        top: -140px;
        left: 180px;
      }
      .cen {
        text-align: center;
        margin-bottom: 80px;
      }
      .buttom {
        width: 100%;
        height: 40px;
        position:fixed;
        bottom:0;
        background-color: #fbfbfb;
        line-height: 40px;
        font-size:12px;
      }
      
      /* 登录按钮 */
      .settings {
        position: relative;
        left: 13px;
        background-color: #4e71f2;
        color: #fff;
        border-radius: 5px;
        font-size: 12px;
        width: 50px;
        height: 25px;
        display: inline-block;
      }
      .dropdown-settings {
        position: relative;
        display: inline-block;
      }

      
      
    </style>
  </head>
  <body>
    <!-- 最顶端左侧 -->
    <div class="left">
      <a href="http://news.baidu.com/" target="blank">新闻</a>
      &nbsp;&nbsp;&nbsp;&nbsp;
      <a href="https://www.hao123.com/">hao123</a>
      &nbsp;&nbsp;&nbsp;&nbsp;
      <a href="https://map.baidu.com/">地图</a>
      &nbsp;&nbsp;&nbsp;&nbsp;
      <a href="https://tieba.baidu.com/index.html">贴吧</a>
      &nbsp;&nbsp;&nbsp;&nbsp;
      <a href="http://v.baidu.com/">视频</a>
      &nbsp;&nbsp;&nbsp;&nbsp;
      <a href="https://image.baidu.com/">图片</a>
      &nbsp;&nbsp;&nbsp;&nbsp;
      <a href="https://pan.baidu.com/?from=1026962h">网盘</a>
      &nbsp;&nbsp;&nbsp;&nbsp;
      <a href="https://www.baidu.com/more/" target="blank">更多</a>
      &nbsp;&nbsp;&nbsp;&nbsp;
    <!-- 最顶端右侧部分 -->
      <span class="right">
        <div class="dropdown">
          <span>设置</span>
          <div class="dropdown-content">
            <a target="blank" href="">搜索设置</a>
            <a target="blank" href="">高级设置</a>
            <a target="blank" href="">关闭预测</a>
            <a target="blank" href="">隐私设置</a>
            <a target="blank" href="">关闭热榜</a>
          </div>
        </div>
        <div class="dropdown-settings">
          <button class="settings">登录</button>
        </div>
      </span>
    </div>
    <!-- 中间部分 -->
    <div class="box">
      <form action="http://www.baidu.com/" target="_blank">
        <div class="imges">
          <img
            src="images/baidu_logo.png"
            alt="百度logo"
            title="百度一下，你就知道"
            height="129"
            width="270"
          />
        </div>
        <input type="text"></input>
        <button>
          <span class="soutu-btn"></span>
          <strong class="baiduyixia">百度一下</strong>
        </button>
      </form>
    </div>

    <div class="hot-title">
      百度热榜
      <div class="baiduhot">
        <div class="left-hot">
          <span class="title-content-title top">
            <span class="top1">1</span>
            <a
              class="five"
              href="https://www.baidu.com/s?wd=%E5%9B%BD%E4%BA%A7%E5%A4%A7%E9%A3%9E%E6%9C%BAC919%E9%A6%96%E9%A3%9E%E6%88%90%E5%8A%9F&sa=fyb_n_homepage&rsv_dl=fyb_n_homepage&from=super&cl=3&tn=baidutop10&fr=top1000&rsv_idx=2&hisfilter=1"
              >国产大飞机C919首飞成功</a
            >
          </span>
          <span class="title-content-title">
            <span class="top2">2</span>
            <a
              class="five"
              href="https://www.baidu.com/s?wd=%E5%9B%9B%E5%B7%9D%E4%B8%80%E7%81%AB%E9%94%85%E5%BA%97%E5%8D%96%E5%87%BA%E8%BF%915%E4%B8%87%E9%94%85%E5%9C%B0%E6%B2%9F%E6%B2%B9%E9%94%85%E5%BA%95&sa=fyb_n_homepage&rsv_dl=fyb_n_homepage&from=super&cl=3&tn=baidutop10&fr=top1000&rsv_idx=2&hisfilter=1"
              >四川一火锅店卖出近5万锅地沟油锅底</a
            >
          </span>
          <span class="title-content-title">
            <span class="top3">3</span>
            <a
              class="five"
              href="https://www.baidu.com/s?wd=%E4%B8%8A%E6%B5%B75%E6%9C%8816%E6%97%A5%E5%B0%86%E5%88%86%E9%98%B6%E6%AE%B5%E6%8E%A8%E5%8A%A8%E5%A4%8D%E5%95%86%E5%A4%8D%E5%B8%82&sa=fyb_n_homepage&rsv_dl=fyb_n_homepage&from=super&cl=3&tn=baidutop10&fr=top1000&rsv_idx=2&hisfilter=1"
              >上海5月16日将分阶段推动复商复市</a
            >
          </span>
        </div>
        <div class="right-hot">
          <span class="title-content-title1">
            <span class="other-top">4</span>
            <a
              href="https://www.baidu.com/s?wd=%E6%8E%A8%E8%BF%9B%E9%AB%98%E8%B4%A8%E9%87%8F%E5%85%B1%E5%BB%BA%E4%B8%80%E5%B8%A6%E4%B8%80%E8%B7%AF&sa=fyb_n_homepage&rsv_dl=fyb_n_homepage&from=super&cl=3&tn=baidutop10&fr=top1000&rsv_idx=2&hisfilter=1"
              >推进高质量共建一带一路</a
            >
          </span>
          <span class="title-content-title1">
            <span class="other-top">5</span>
            <a
              href="https://www.baidu.com/s?wd=%E6%88%BF%E8%B4%B7%E5%88%A9%E7%8E%87%E8%B0%83%E6%95%B4+%E4%B9%B0%E6%88%BF%E8%83%BD%E7%9C%81%E5%A4%9A%E5%B0%91%E9%92%B1%EF%BC%9F&sa=fyb_n_homepage&rsv_dl=fyb_n_homepage&from=super&cl=3&tn=baidutop10&fr=top1000&rsv_idx=2&hisfilter=1"
              >房贷利率调整 买房能省多少钱?</a
            >
          </span>
          <span class="title-content-title1">
            <span class="other-top">6</span>
            <a
              href="https://www.baidu.com/s?wd=%E4%BF%84%E7%BD%97%E6%96%AF%E6%96%AD%E7%94%B5%E8%8A%AC%E5%85%B0&sa=fyb_n_homepage&rsv_dl=fyb_n_homepage&from=super&cl=3&tn=baidutop10&fr=top1000&rsv_idx=2&hisfilter=1"
              >俄罗斯断电芬兰</a
            >
          </span>
        </div>
      </div>
    </div>

    <!-- 最下方部分 -->
    <div class="buttom">
      <div class="footer_l">
          <a href="https://ir.baidu.com/" target="_blank">About Baidu</a>&nbsp;&nbsp;
          <a href="https://home.baidu.com/" target="_blank">关于百度</a>&nbsp;&nbsp;
          <a href="https://www.baidu.com/duty/"target="_blank" >使用百度前必读</a>&nbsp;&nbsp;
          <a href="https://help.baidu.com/" target="_blank">帮助中心</a>&nbsp;&nbsp;
          <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002000001" target="_blank">京公网安备11000002000001</a>&nbsp;&nbsp;
          <a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">京ICP证030173</a>&nbsp;&nbsp;
          ©2022 Baidu&nbsp;&nbsp;
          互联网药品信息服务资格证书（京）-经营性-2017-0020&nbsp;&nbsp;
          <a href="https://www.baidu.com/licence/" target="_blank">信息网络传播视听节目许可证 0110516</a>&nbsp;&nbsp;
          
      </div>
    </div>
  </body>
</html>