HTML+CSS百度网页制作3.0

最新推荐文章于 2024-03-16 09:51:29 发布
白菜豆腐干
最新推荐文章于 2024-03-16 09:51:29 发布
阅读量3.2k
点赞数
文章标签： css html css3
本文链接：https://blog.csdn.net/weixin_65717727/article/details/124917292
版权
<!DOCTYPEhtml>
<html lang="ch_CN">

<head>
    <meta charset="UTF-8">
    <title>百度首页</title>
    <style type="text/css">
        a {
            color: black;
        }
        
        a:link {
            text-decoration: none;
        }
        
        a:visited {
            text-decoration: none;
        }
        
        a:hover {
            color: #4e6ef2;
            text-decoration: none;
        }
        
        a:active {
            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;
        }
        
        .ddp {
            text-align: center;
            position: relative;
            display: inline-block;
            padding-right: 23px;
        }
        
        .set {
            position: relative;
            left: 13px;
            background-color: #4e71f2;
            color: #fff;
            border-radius: 5px;
            font-size: 12px;
            width: 48px;
            height: 22px;
            display: inline-block;
        }
        
        .body>.picture {
            position: absolute;
            top: -33px;
            left: 500px;
        }
        
        .body>.search {
            text-align: center;
        }
        
        .body>.search>.abc>.input {
            width: 540px;
            height: 36px;
            margin-top: 160px;
        }
        
        .body>.search>.abc>.btn {
            text-align: center;
            width: 100px;
            height: 40px;
            margin-top: 10px;
            background: blue;
            color: white;
            font-size: 13px;
        }
        
        .hot-title {
            width: 654px;
            position: relative;
            margin: 45px auto 0;
        }
        
        .baiduhot div {
            width: 50%;
            overflow: hidden;
            float: left;
            line-height: 32px;
        }
        
        .title {
            margin: 10px 0 0;
            float: left;
            height: 32px;
            line-height: 32px;
        }
        
        .title1 {
            margin: 10px 0 0;
            margin-left: 50px;
            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;
        }
        
        .bu {
            text-align: center;
            padding-left: 30px;
            position: fixed;
            bottom: 0px;
            left: 0;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-size: 10px;
            background-color: #fbfbfb;
        }
    </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/" target="blank">hao123</a
      >&nbsp;&nbsp;&nbsp;&nbsp;
      <a href="https://map.baidu.com/" target="blank">地图</a
      >&nbsp;&nbsp;&nbsp;&nbsp;
      <a href="http://v.baidu.com/" target="blank">视频</a
      >&nbsp;&nbsp;&nbsp;&nbsp;
      <a href="https://tieba.baidu.com/index.html" target="blank">贴吧</a
      >&nbsp;&nbsp;&nbsp;&nbsp;
      <a href="http://xueshu.baidu.com/" target="blank">学术</a
      >&nbsp;&nbsp;&nbsp;&nbsp;
      <a href="https://www.baidu.com/more/" target="blank">更多</a
      >&nbsp;&nbsp;&nbsp;&nbsp;
      <span class="right">
        <div class="ddp">
          <span>设置</span>
        <button class="set">登录</button>
        </div>
    </span>
    </div>

    <div class="body">
        <div class="picture">
            <image src="C:\Users\86166\Desktop\前端基础案例\2\baidu.jpg.jpg" widht="540 " height="258 " />
        </div>
        <div class="search ">
            <from class="abc " action="https://www.baidu.com/?tn=21002492_16_hao_pg ">
                <label for="search "></label>
                <input class="input " type="text " name="search " id="search " value=" " />
                <input class="btn " type="submit " value=" 百度一下 " name="submit " />
            </from>
        
            <div class="hot-title">
                <div class="baiduhot">
                    <div >
                        <span class="title top">
                    <span class="top1">1</span>
                        <a  href="https://www.baidu.com/s?wd=%E4%B8%AD%E5%A4%AE%E5%90%91%E5%AE%9E%E9%99%85%E7%A7%8D%E7%B2%AE%E5%86%9C%E6%B0%91%E5%8F%91100%E4%BA%BF%E5%85%83%E8%A1%A5%E8%B4%B4&sa=fyb_n_homepage&rsv_dl=fyb_n_homepage&from=super&cl=3&tn=baidutop10&fr=top1000&rsv_idx=2&hisfilter=1">中央向实际种粮农民发100亿元补贴</a
                    >
                  </span>
                  <span class="title">
                    <span class="top2">2</span>
                    <a
                   
                      href="https://www.baidu.com/s?wd=%E5%88%98%E5%BE%B7%E5%8D%8E%E5%9B%9E%E5%BA%94%E5%A5%A5%E8%BF%AA%E5%B9%BF%E5%91%8A%E6%B6%89%E5%AB%8C%E6%8A%84%E8%A2%AD&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">
                    <span class="top3">3</span>
                    <a
                      href="https://www.baidu.com/s?wd=%E4%B8%93%E5%AE%B6%EF%BC%9A%E7%8C%B4%E7%97%98%E7%97%85%E6%AF%92%E7%96%91%E8%BF%9B%E5%8C%96+%E6%9B%B4%E5%85%B7%E4%BC%A0%E6%9F%93%E6%80%A7&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 class="right-hot">
                  <span class="title1">
                    <span class="other-top">4</span>
                    <a
                      href="https://www.baidu.com/s?wd=%E8%A2%81%E9%9A%86%E5%B9%B3%E9%99%A2%E5%A3%AB%E9%80%9D%E4%B8%96%E4%B8%80%E5%91%A8%E5%B9%B4&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="title1">
                    <span class="other-top">5</span>
                    <a
                      href="https://www.baidu.com/s?wd=%E9%99%95%E8%A5%BF%E4%B8%80%E5%8A%A0%E6%B2%B9%E7%AB%99%E6%B1%BD%E6%B2%B9%E5%90%AB%E6%B0%B4%E9%87%8F%E5%8D%A0%E7%BA%A69%E6%88%90&sa=fyb_n_homepage&rsv_dl=fyb_n_homepage&from=super&cl=3&tn=baidutop10&fr=top1000&rsv_idx=2&hisfilter=1"
                      >陕西一加油站汽油含水量占约9成</a
                    >
                  </span>
                  <span class="title1">
                    <span class="other-top">6</span>
                    <a
                      href="https://www.baidu.com/s?wd=%E5%B1%B1%E4%B8%9C%E4%B8%80%E5%BA%9F%E5%93%81%E7%AB%99%E5%8F%91%E7%8E%B0%E5%BA%B7%E7%86%99%E5%B9%B4%E9%97%B4%E7%BA%A2%E8%A1%A3%E5%A4%A7%E7%82%AE&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="bu">
                <a href="https://www.baidu.com/cache/sethelp/help.html" target="_blank"
                  >设为首页</a
                >&nbsp;&nbsp;
                <a href="http://home.baidu.com/" target="_blank">关于百度</a>&nbsp;&nbsp;
        <a href="http://ir.baidu.com/phoenix.zhtml?c=188488&p=irol-irhome" target="_blank">About Baidu</a
                >&nbsp;&nbsp;
                <a href="http://e.baidu.com/ebaidu/home?refer=888" target="_blank"
                  >百度推广</a
                >&nbsp;&nbsp;
                <a href="https://www.baidu.com/duty/" target="_blank">使用百度前必读</a
                >&nbsp;&nbsp;
                <a href="http://jianyi.baidu.com/" target="_blank"> 意见反馈</a
                >&nbsp;&nbsp;
                <a href="https://help.baidu.com/" target="_blank">帮助中心</a>&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;&nbsp;
        ©2022 Baidu&nbsp;&nbsp; 京ICP证030173号&nbsp;&nbsp;
        <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002000001">京公网安备11000002000001号</a
                >&nbsp;&nbsp; 京ICP证030173号
              </div>
</body>

</html>
白菜豆腐干
关注
0
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS百度网页制作3.0

<!DOCTYPEhtml><html lang="ch_CN"><head> <meta charset="UTF-8"> <title>百度首页</title> <style type="text/css"> a { color: black; } a:link { tex...
复制链接

扫一扫