简单百度网页制作（必看）

最新推荐文章于 2024-03-16 09:51:29 发布
m0_65054943
最新推荐文章于 2024-03-16 09:51:29 发布
阅读量4.8k
点赞数 4
文章标签： css html webview
本文链接：https://blog.csdn.net/m0_65054943/article/details/124912994
版权
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=+++++++++++++++++++++++++++edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Baidu</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }
    
    @font-face {
        font-family: Iconfont;
        src: url('https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/font/iconfont-5f3e71d33e.eot');
        src: url('https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/font/iconfont-5f3e71d33e.eot?#iefix') format('embedded-opentype'), url('https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/font/iconfont-3585cbf68d.woff2') format('woff2'), url('https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/font/iconfont-37ce8725be.woff') format('woff'), url('https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/font/iconfont-1965a6bc45.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
        font-display: block;
    }
    
    .A {
        left: 0;
        top: 0;
        height: 60px;
        width: 480px;
        padding-left: 24px;
        position: absolute;
        font-size: 0px;
    }
    
    .B {
        height: 22.4px;
        color: #222;
        margin-right: 24px;
        margin-top: 19px;
        text-decoration: none;
        font-family: Arial, sans-serif;
        font-size: 13px;
        display: inline-block;
    }
    
    .C {
        position: absolute;
        right: 0;
        top: 0;
        z-index: 100;
        height: 60px;
        padding-right: 24px;
        padding-left: 200px;
    }
    
    .c1 {
        background-color: #4e6ef2;
        position: relative;
        display: inline-block;
        margin-top: 18px;
        margin-left: 32px;
        font-size: 13px;
        color: #fff;
        height: 24px;
        width: 48px;
        border-radius: 6px;
        line-height: 24px;
        text-align: center;
    }
    
    .c2 {
        margin-top: 21.2px;
        display: inline-block;
        position: relative;
        vertical-align: top;
        color: #222;
        font-size: 13px;
        font-family: Arial, sans-serif;
    }
    
    .D {
        top: 0px;
        left: 441px;
        position: absolute;
        width: 654px;
        height: 314px;
        display: block;
    }
    
    .d3 {
        display: block;
        position: absolute;
        left: 185px;
        bottom: 140px;
    }
    
    .e {
        height: 44px;
        width: 654px;
        position: absolute;
        bottom: 80px;
    }
    
    .e1 {
        width: 546px;
        display: inline-block;
    }
    
    .e3 {
        width: 443px;
        height: 16px;
        padding-top: 12px;
        padding-bottom: 12px;
        padding-left: 16px;
        padding-right: 87px;
        border: 2px solid #c4c7ce;
        border-radius: 10px 0 0 10px;
    }
    
    .e3:hover {
        border-color: #a7aab5;
    }
    
    .e3:focus {
        outline-color: #4e6ef2;
    }
    
    .e2 {
        width: 108px;
        height: 44px;
        position: absolute;
        display: inline-block;
        right: 0px;
    }
    
    .e4 {
        cursor: pointer;
        width: 108px;
        height: 44px;
        line-height: 45px;
        padding: 0;
        background: 0 0;
        background-color: #4e6ef2;
        border-radius: 0 10px 10px 0;
        font-size: 17px;
        color: #fff;
        box-shadow: none;
        font-weight: 400;
        border: none;
        outline: 0;
    }
    
    .e5 {
        position: absolute;
        right: 118px;
        display: inline-block;
        bottom: 86px;
        z-index: 1;
    }
    
    .F {
        width: 100%;
        position: fixed;
        bottom: 0;
        left: 0;
        height: 39px;
        padding-top: 1px;
        line-height: 39px;
        background: #fff;
        font-size: 12px;
        font-family: Arial, sans-serif;
        padding-left: 120px;
    }
    
    .f1 {
        display: inline-block;
        text-align: center;
        text-decoration: none;
        color: #bbb;
        margin-right: 20px;
    }
    
    .f1:hover {
        color: #222;
    }
    
    .f2 {
        width: 49px;
        height: 20px;
        margin-bottom: -5px;
    }
    
    .G {
        position: fixed;
        right: 24px;
        bottom: 64px;
        background-color: #fbfbfb;
        width: 44px;
        border-bottom-left-radius: 22px;
        border-bottom-right-radius: 22px;
        border-top-left-radius: 22px;
        border-top-right-radius: 22px;
    }
    
    .g1 {
        line-height: 44px;
        cursor: pointer;
        box-sizing: border-box;
        padding-top: 12px;
        padding-bottom: 12px;
    }
    
    .G .g1 .g2 {
        width: 18px;
        height: 18px;
        margin: 0 auto;
        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAA7VBMVEUAAADs8v+txP+qwv+4zf/w9f/2+P+hu//Q3f+yyP+4zf/Q3f+kvv+90P+80f+2yv/S4P/T4P/M2//z9/+cuP/V4P9Whv9Uhf9Sg/9Pgf9NgP/8/f9di/9Xh/9lkf5aif9qlP7z9//k7P/c5v+2y/94nv51nP6lv/+LrP6Ep/6BpP5gjf7v9P+wxv/U4f/M2/+sxP+vxv73+f/P3v/J2v+5zf+ivP+fuv9xmf+Ytv6Usv6Hqf58of5vl/7m7v/g6f+zyf6QsP75+//q8P/B0v/W4//C1P6+0P6qwv6ct/76fHZiAAAAGnRSTlMAGAaVR/Py45aC9Mfy2b8t9OPZ2ce/v4L0x/e74/EAAAIZSURBVDjLZVPXYuIwEDSmQ4BLv5O0ku3Yhwu2IZTQe0hy7f8/57QSoYR5sVea1c424wgzl324LRRuH7I507hEJluYucCFEOBGhWzmy7X5+N0WwIjTbrcdBsKulM0z96onGCGE2X6n+cTkj/CqJ480igzkNXp26E9JkABSbBz8i4Bn3EkH840mKHoxs49fZQzt2Kd03FQEzSB3WsejB9Jqf1CJQBM0wCurABWBoub0gkDENwyStTHA62pwSWDtklRQ4FLfjnaiPqVW60hAYeLKNHIREOZuKTL80H6XBFCwn4BAmDOyLiOQUIlOSEjaoS+Ju57NZuul73Fml4w6yAivSLBW3MGfcfBmIegmArg3alICdJHgy1jQt8Z/6CcC4DdGXhLIoiWRACpbLYbDYW80GnXp2GH8ShP+PUvEoHsAIFq9Xm8+kXlIwkkI9pm+05Tm3yWqu9EiB0pkwjWBx2i+tND1XqeZqpPU4VhUbq/ekR8CwTRVoRxf3ifTbeIwcONNsJZ2lxFVKDMv1KNvS2zXdrnD+COvR1PQpTZKNlKD3cLCOJNnivgVxkw169BunlKFaV9/B+LQbqOsByY4IVgDB59dl/cjR9TIJV1Lh7CGqUqH/DDPhhZYOPkdLz6m0X7GrzPHsSe6zJwzxvm+5NeNi8U5ABfn7mz7zHJFrZ6+BY6rd7m8kQtcAtwwXzq4n69/vZbP1+pn6/8fsrRmHUhmpYYAAAAASUVORK5CYII=) no-repeat;
        background-size: 16px;
        background-position: center;
        border-radius: 50%;
        border: 1px solid #626675;
    }
    
    .g3 {
        width: 44px;
        height: 44px;
        border-radius: 50%;
    }
    
    .g4 {
        width: 100%;
        border-radius: 50%;
        padding: 10px 0;
        cursor: pointer
    }
    
    .g5 {
        height: 24px;
        width: 24px;
        margin-right: auto;
        margin-left: auto;
        display: block;
    }
    
    .h {
        position: absolute;
        width: 654px;
        margin: 45px auto 0;
        top: 240px;
        left: 440px;
    }
    
    .h1 {
        height: 24px;
        height: 100%;
        font-size: 0;
    }
    
    .h2 {
        text-decoration: none;
    }
    
    .h3:hover {
        color: rgb(49, 94, 251);
    }
    
    .h5:hover {
        color: rgb(49, 94, 251);
    }
    
    .h3 {
        float: left;
        color: #222;
        font-size: 14px;
        font-family: Arial, Helvetica, sans-serif;
    }
    
    .h4 {
        font-family: Iconfont;
    }
    
    .h5 {
        font-family: Iconfont;
        font-size: 15px;
        color: #9195a3;
    }
    
    .h6 {
        float: right;
        height: 16px;
        position: relative;
        user-select: none;
        top: 1px;
        text-decoration: none;
    }
    
    .h7:hover {
        color: rgb(49, 94, 251);
    }
    
    .h8:hover {
        color: rgb(49, 94, 251);
    }
    
    .h7 {
        position: relative;
        font-family: Iconfont;
        width: 16px;
        height: 16px;
        line-height: 16px;
        font-size: 16px;
        color: #626675;
        display: inline-block;
    }
    
    .h8 {
        font-size: 14px;
        line-height: 14px;
        color: #626675;
        margin-left: 2px;
    }
    
    .i1 {
        margin-right: 20px;
        clear: both;
        width: 306px;
        float: left;
        height: 36px;
        line-height: 36px;
    }
    
    .i5 {
        margin-left: 15px;
        width: 306px;
        height: 36px;
        line-height: 36px;
        float: left;
    }
    
    li {
        list-style-type: none;
    }
    
    .i2 {
        float: left;
        height: 36px;
        line-height: 36px;
        width: 100%;
        color: #222;
        text-decoration: none;
    }
    
    .i6 {
        width: auto;
    }
    
    .i6:visited {
        color: #626675;
    }
    
    .i3 {
        font-family: Iconfont;
        font-size: 18px;
        font-style: normal;
        color: #f63051;
        height: 18px;
        width: 18px;
        display: inline-block;
        line-height: 18px;
        margin-right: 8px;
        position: relative;
        transform: rotate(180deg);
    }
    
    .i4 {
        font-size: 16px;
        font-family: Arial, Helvetica, sans-serif;
    }
    
    .i9 {
        margin-left: 6px;
        position: relative;
        top: -2px;
        background-color: #f60;
        padding: 0 2px;
        text-align: center;
        color: #fff;
        line-height: 16px;
        height: 16px;
        font-weight: 200;
        font-size: 12px;
        border-radius: 4px;
    }
    
    .n {
        width: 24px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 18px;
        line-height: 18px;
        position: relative;
        top: 1px;
        display: inline-block;
    }
    
    .no3 {
        color: #faa90e;
    }
    
    .no1 {
        color: #fe2d46;
    }
    
    .no2 {
        color: #f60;
    }
    
    .no4 {
        color: #9195a3;
    }
    
    .new {
        background-color: #ff455b;
        float: right;
        position: relative;
        top: -25px;
    }
    
    .i2:hover {
        color: rgb(49, 94, 251);
        text-decoration: underline;
    }
</style>



<body>
    <div class="A">
        <a href="http://news.baidu.com/" target="_blank" class="B"> 新闻</a>
        <a href="https://www.hao123.com/?src=from_pc" target="_blank" class="B">hao123</a>
        <a href="https://map.baidu.com/@13045537,4301993,13z" target="_blank" class="B"> 地图</a>
        <a href="https://tieba.baidu.com/index.html" target="_blank" class="B"> 贴吧</a>
        <a href="https://haokan.baidu.com/?sfrom=baidu-top" target="_blank" class="B"> 视频</a>
        <a href="https://image.baidu.com/" target="_blank" class="B"> 图片</a>
        <a href="https://pan.baidu.com/?from=1026962h" target="_blank" class="B"> 网盘</a>
        <a href="https://www.baidu.com/more/" target="_blank" class="B">更多</a>
    </div>
    <div class="C">
        <a class="c2">设置</a>
        <a class="c1">登录</a>
    </div>
    <div class="D">
        <a><img class="e5" src="photos\Snipaste_2022-05-20_23-13-40.png" width="42px" height="31px"></a>
        <a href="https://www.baidu.com/s?wd=%E7%99%BE%E5%BA%A6%E7%83%AD%E6%90%9C&sa=ire_dl_gh_logo_texing&rsv_dl=igh_logo_pcs" target="_blank"><img class="d3" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" title="百度一下，你就知道" width="270" ; height="129" ;>
        </a>
        <form class="e">
            <span class="e1"><input class="e3" type="text" >
    
            </span>
            <span class="e2"> <input class="e4"type="submit" value="百度一下"></span>
        </form>
    </div>
    <div class="h">
        <div class="h1">
            <a class="h2" href="https://top.baidu.com/board?platform=pc&sa=pcindex_entry" target="_blank">
                <div class="h3">
                    <span class="h4"></span>
                    <span class="h5"></span>
                </div>
            </a>
            <a href="#" class="h6">
                <span class="h7"></span>
                <span class="h8">换一换</span>
            </a>
        </div>
        <ul class="i">
            <li class="i1">
                <a class="i2" href="https://www.baidu.com/s?wd=%E4%BA%A7%E4%B8%9A%E5%8D%87%E7%BA%A7%E6%80%81%E5%8A%BF%E6%B2%A1%E6%9C%89%E6%94%B9%E5%8F%98&sa=fyb_n_homepage&rsv_dl=fyb_n_homepage&from=super&cl=3&tn=baidutop10&fr=top1000&rsv_idx=2&hisfilter=1" target="_blank">
                    <i class="i3"></i>
                    <span class="i4">产业升级态势没有改变</span>
                </a>
            </li>
            <li class="i5">
                <a class="i2 i6" href="https://www.baidu.com/s?wd=%E6%BE%B3%E5%A4%A7%E5%88%A9%E4%BA%9A%E2%80%9C%E5%8F%98%E5%A4%A9%E2%80%9D+%E4%B8%AD%E6%BE%B3%E4%BC%9A%E8%B5%B0%E5%90%91%E4%BD%95%E6%96%B9&sa=fyb_n_homepage&rsv_dl=fyb_n_homepage&from=super&cl=3&tn=baidutop10&fr=top1000&rsv_idx=2&hisfilter=1"
                    target="_blank">
                    <span class="n no3">3</span>
                    <span class="i4">刘德华奥迪广告涉抄袭 奥迪致歉</span>
                </a>
                <span class="i9">热</span>
            </li>
            <li class="i1">
                <a class="i2 i6" 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" target="_blank">
                    <span class="n no1">1</span>
                    <span class="i4">袁隆平院士逝世一周年</span>
                </a>
                <span class="i9">热</span>
            </li>
            <li class="i5">
                <a class="i2 i6" href="https://www.baidu.com/s?wd=%E4%B8%8A%E6%B5%B7%E6%96%B0%E5%A2%9E%E6%AD%BB%E4%BA%A13%E4%BE%8B+%E6%9C%AC%E5%9C%9F52%2B570&sa=fyb_n_homepage&rsv_dl=fyb_n_homepage&from=super&cl=3&tn=baidutop10&fr=top1000&rsv_idx=2&hisfilter=1" target="_blank">
                    <span class="n no4">4</span>
                    <span class="i4">人民日报评奥迪“像素级抄袭”</span>
                </a>
                <span class="i9">热</span>
            </li>
            <li class="i1">
                <a class="i2 i6" href="https://www.baidu.com/s?wd=31%E7%9C%81%E4%BB%BD%E6%98%A8%E6%97%A5%E6%96%B0%E5%A2%9E%E6%9C%AC%E5%9C%9F157%2B667&sa=fyb_n_homepage&rsv_dl=fyb_n_homepage&from=super&cl=3&tn=baidutop10&fr=top1000&rsv_idx=2&hisfilter=1" target="_blank">
                    <span class="n no2">2</span>
                    <span class="i4">31省份昨日新增本土157+667</span>
                </a>
                <span class="i9">热</span>
            </li>
            <li class="i5">
                <a class="i2 i6" href="https://www.baidu.com/s?wd=%E8%B0%B7%E7%88%B1%E5%87%8C%E6%88%90%E4%BA%9A%E6%B4%B2%E5%8D%8F%E4%BC%9A%E5%85%A8%E7%90%83%E5%A4%A7%E4%BD%BF%E9%A6%96%E4%BD%8D%E5%A5%B3%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"
                    target="_blank">
                    <span class="n no4">5</span>
                    <span class="i4">谷爱凌成亚洲协会全球大使首位女性</span>
                </a>
                <span class="i9 new">新</span>
            </li>
        </ul>
    </div>
    <div class="F">
        <a href="https://home.baidu.com/" target="_blank" class="f1"> 关于百度</a>
        <a href="https://ir.baidu.com/" target="_blank" class="f1">About Baidu</a>
        <a href="https://www.baidu.com/duty/" target="_blank" class="f1">使用百度前必读</a>
        <a href="https://help.baidu.com/" target="_blank" class="f1">帮助中心</a>
        <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002000001" target="_blank" class="f1"> 京公网安备11000002000001号</a>
        <a href="https://beian.miit.gov.cn/" target="_blank" class="f1">京ICP证030173号</a>
        <a class="f1"> ©2022 Baidu</a>
        <a class="f1"> 互联网药品信息服务资格证书 (京)-经营性-2017-0020</a>
        <a href="https://www.baidu.com/licence/" target="_blank" class="f1">信息网络传播视听节目许可证0110516</a>
        <a><img class="f2" src="https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/footer/aria-3006e33cce.png"></a>
    </div>
    <div class="G">
        <div class="g1">
            <div class="g2"></div>
        </div>

        <div class="g3">
            <div class="g4">
                <img class="g5" src="https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/qrcode/qrcode@2x-daf987ad02.png">
            </div>
        </div>
    </div>
</body>

</html>
m0_65054943
关注
4
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
简单百度网页制作（必看）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=+++++++++++++++++++++++++++edge"> <meta name="viewport" content="width=device-width, initial-s...
复制链接

扫一扫