百度仿制1.1 version

这次相比之前增加了百度热搜，最近比较忙，设置的下拉菜单栏没有加进去，只是单独做了出来，具体看上一次博客。

下面是效果图

 html ↓

<div class="top">
        <div class="topleft">
            <a href="http://news.baidu.com/" class="topleftlink">新闻</a>
            <a href="https://www.hao123.com/?src=from_pc/" class="topleftlink">hao123</a>
            <a href="http://map.baidu.com/" class="topleftlink">地图</a>
            <a href="http://tieba.baidu.com/" class="topleftlink">贴吧</a>
            <a href="https://haokan.baidu.com/?sfrom=baidu-top" class="topleftlink">视频</a>
            <a href="http://image.baidu.com/" class="topleftlink">图片</a>
            <a href="https://pan.baidu.com/?from=1026962h/" class="topleftlink">网盘</a>
            <a href="#" class="topleftlink">更多</a>

        </div>

        <div class="set">
            <a href="#" class="logginbehind">
                <input type="submit" value="登录" class="loggin">
            </a>
        </div>
        <div class="setand">
            <ul>
                <li> <a href="#">设置</a>

                </li>




        </div>
    </div>
    <div class="baidu">

        <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"
            class="baidubox"><img src="../案例/baidu.png" alt="百度" title="点击一下，了解更多" width="270px" height="129px"
                class="baidulogo" /></a>

    </div>
    <div class="research">
        <div class="researchbranch">
            <span>
                <input name="sousuo" class="sousuo" />
            </span>
            <span class="baiduyixia">
                <input type="submit" value="百度一下" class="baiduyixiabranches" />
            </span>
        </div>
    </div>
    <div class="baiduhot">
        <div><a href="#" class="left"><img src="../案例/white.png" alt="">
            </a><a href="#" class="right">换一换</a><img src="../案例/hyh.png" alt="" class="hangul"></div>

    </div>
    <div class="baiduhotha">
        <div class="hotleft">
            <ul>
                <li><span class="hotlefttop">↟</span><a href="" class="hotlink">扎实稳就业 全力惠民生</a></li>
                <li><span class="numb one">1</span><a href="" class="hotlink">全国稳住经济大盘电视电话会议召开</a></li>
                <li><span class="numb two">2</span><a href="" class="hotlink">官方：禁用医保支付大规模核检费用</a></li>
            </ul>
        </div>
        <ul>
            <li> <span class="numb three">3
                </span><a href="" class="hotlink">医疗卫生机构实现县乡村全覆盖</a></li>
            <li><span class="numb four">4</span><a href="" class="hotlink">中国妇女报评16岁初中生在校分娩</a></li>
            <li><span class="numb five">5</span><a href="" class="hotlink">为何此时召开稳定经济大盘会议？</a></li>
        </ul>
        <div class="hotright">
        </div>
    </div>
    <div class="bottom">
        <a href="https://home.baidu.com/" class="bottomlink">关于百度</a>
        <a href="https://ir.baidu.com/" class="bottomlink">About Baidu</a>
        <a href="https://www.baidu.com/duty/" class="bottomlink">使用百度前必读</a>
        <a href="https://help.baidu.com/" class="bottomlink"></a>
        <a href="https://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002000001"
            class="bottomlink">京公安网备110000021000001</a>
        <a href="https://beian.miit.gov.cn/" class="bottomlink">京ICP证030173号</a>
        <span>©2022 Baidu </span>
        <span>互联网药品信息服务资格证书(京)-经营-2017-0020</span>
        <a href="https://www.baidu.com/licence/" class="bottomlink">信息网络传播视听节目许可证011056</a>
        <span><img src="../案例/wuzhangai.png" width="49px" height="20px" style="margin: 0 0 -5px;"></span>
        <div class="css-egs"></div>

    </div>
    <div class="hot">
        热
    </div>
    <div class="hot2">
        热
    </div>
    <div class="new">
        新
    </div>

CSS ↓

 * {
            margin: 0;
        }

        .topleft {
            padding: 0 0 0 24px;
            /* 顶部左盒子 */
            float: left;
        }

        .topleftlink {
            text-decoration: none;
            color: #222222;
            font-size: 13px;
            display: inline-block;
            margin: 19px 14px 0 0;

        }

        a:hover {
            color: #315efb;
        }

        .set {
            height: 70px;
            font-size: 13px;
            margin: 15px 14px 0 0;
            padding-left: 10px;

            float: right;


        }

        .set a {
            text-decoration: none;
            color: #222222;
            margin-top: 22px;



        }

        .setand {
            height: 70px;
            font-size: 13px;
            margin: 15px 14px 0 0;
            padding-left: 10px;
            padding-top: 4px;
            float: right;
        }

        .loggin {
            background-color: #4e6ef2;
            color: #fff;
            border: none;
            border-radius: 6px;
            height: 24px;
            width: 48px;
            margin-top: 0px;

        }

        .baidu {

            width: 654px;
            height: 265px;
        }

        .baidubox {
            display: inline-block;
            padding-top: 85px;
            padding-left: 567px;


        }

        .research {
            width: 1350px;
            height: 50px;

            display: inline-block;







        }

        .sousuo {
            width: 443px;
            height: 38px;
            padding-left: 100px;
            border-radius: 10px 0 0 10px;
            border-color: #c4c7ce;
            border-style: solid;
            background-color: #fff;
            position: relative;
            margin-left: 70px;
            border-right: transparent;
            background-image: url(../案例/111.png);
            background-repeat: no-repeat;
            background-position: 10px;


        }

        .sousuo:focus {
            outline-color: #315efb;

        }

        .sousuo:hover {
            border-color: #a7aab5;
        }

        .researchbranch {
            padding-left: 297px;
            position: relative;
            top: -43px;
        }

        .baiduyixia {

            position: absolute;
        }

        .baiduyixiabranches {
            width: 108px;
            height: 44px;
            background-color: #4e6ef2;
            border-radius: 0 10px 10px 0;
            border: none;
            font-size: 17px;


            color: #fff;
        }

        .baiduyixiabranches:hover {
            background-color: #4662d9;
        }

        .bottom {
            display: inline-block;
            width: 1350px;
            height: 330px;
            padding-top: 300px;
            text-decoration: none;
            font-size: 12px;
            color: #bbb;
            text-align: center;
            /* position:fixed;
            top:727px; */

        }

        .bottomlink {
            text-decoration: none;
            color: #bbb;
            margin: 0 5px;


        }

        .bottomlink:hover {
            color: #323232;
        }

        ul {
            list-style: none;
        }

        a {
            text-decoration: none;
            color: #333333;
        }

        .baidulogo {
            position: absolute;
            display: block;
            top: 70px;
        }

        .baiduhot {
            width: 685px;
            height: 30px;
            /* background-color: pink; */
            margin: 0 auto;
            position: absolute;
            top: 300px;
            left: 354px;

        }

        .left {
            float: left;
            background-color: #222222;
            background-image: url(../案例/white.png);
            display: block;
        }

        .right {
            float: right;
            display: block;
            line-height: 30px;
            font-size: 15px;

        }


        span {
            display: inline-block;
        }

        .one1 {
            float: left;
        }

        .baiduhotha {
            width: 700px;
            height: 120px;
            position: absolute;
            top: 350px;
            left: 350px;
        }

        .two2 {
            float: right;
        }

        .hotleft {
            float: left;
        }

        .hotright {
            float: right;
        }

        .hotlink {
            font-size: 16px;
            display: inline-block;
            width: 306px;
            height: 36px;
            line-height: 36px;
        }

        .hotlink:hover {
            color: #315efb;
            text-decoration: underline;
        }

        .hotlefttop {
            font-family: cIconfont !important;
            font-style: normal;
            color: #f63051;
            width: 22px;
            height: 18px;
            font-size: 16px;

        }

        .numb {
            display: inline-block;
            width: 22px;
            height: 18px;
            font-size: 16px;
        }

        .numb.one {
            color: #fe2d6f;
        }

        .numb.two {
            color: #ff6600;
        }

        .numb.three {
            color: #fabdd1;
        }

        .numb.four,
        .five {
            color: #91a2c3;
        }

        .hangul {
            position: absolute;
            right: 50px;
            bottom: -4px;
        }

        .hot {
            width: 20px;
            height: 20px;
            background-color: #ff6600;
            color: #fff3bd;
            font-size: 13px;
            text-align: center;
            line-height: 20px;
            border-radius: 5px;
            border-color: transparent;
            position: absolute;
            top: 395px;
            left: 672px;
        }

        .hot2 {
            width: 20px;
            height: 20px;
            background-color: #ff6600;
            color: #fff3bd;
            font-size: 13px;
            text-align: center;
            line-height: 20px;
            border-radius: 5px;
            border-color: transparent;
            position: absolute;
            top: 429px;
            left: 673px;
        }

        .new {
            width: 20px;
            height: 20px;
            background-color: #ff455b;
            color: #fff3bd;
            font-size: 13px;
            text-align: center;
            line-height: 20px;
            border-radius: 5px;
            border-color: transparent;
            position: absolute;
            top: 429px;
            left: 977px;
        }