HTML+CSS3+JavaScript仿百度未登录静态页面：

最新推荐文章于 2022-02-11 19:17:07 发布

春天里的水稻

最新推荐文章于 2022-02-11 19:17:07 发布

阅读量2.1k

点赞数 2

本文链接：https://blog.csdn.net/qq_32154641/article/details/78325573

版权

javascript 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

html5+css3

5 篇文章 0 订阅

订阅专栏

一、仿百度未登录静态页面：
在这个页面上比较有难点的就是右上角的“更多产品”和“设置”这两个选项，以下是我在“更多产品”中的HTML代码和CSS代码（注：“#”代表的是一些相关链接，由你们自己写。）：

    <a class="more">更多产品</a>
            <div class="more_item2">
                <li>
                    <div class="more_item3">
                        <a>更多产品</a>
                    </div>
                </li>
                <li>
                    <div style="width: 50px; height: 1px;margin-left:10px;background: #f0f0f0;"></div>
                </li>
                <li>
                    <div class="more_item">
                        <a href="#"><img src="img/nuo.png" />糯米</a>
                    </div>
                </li>
                <li>
                    <div class="more_item">
                        <a href="#"><img src="img/yinyue.png" />音乐</a>
                    </div>
                </li>
                <li>
                    <div class="more_item">
                        <a href="#"><img src="img/tupian.png" />图片</a>
                    </div>
                </li>
                <li>
                    <div class="more_item">
                        <a href="#"><img src="img/zhidao.png" />知道</a>
                    </div>
                </li>
                <li>
                    <div class="more_item">
                        <a href="#"><img src="img/wenku.png" />文库</a>
                    </div>
                </li>
                <li>
                    <div class="more_item">
                        <a href="#"><img src="img/fengyunbang.png" />风云榜</a>
                    </div>
                </li>
                <li>
                    <div class="more_item_all">
                        <a href="#">全部产品>></a>
                    </div>
                </li>
            </div>

.more_item {
        position: relative;
        top: 9px;
        text-align: center;
        margin-left: 8px;
        width: 50px;
        height: 76px;
        margin-top: 10px;
        border-bottom: 1px solid #f0f0f0;
    }

    .more_item2 {
        position: absolute;
        right: 11px;
        top: -10px;
        background-color: #F9F9F9;
        width: 70px;
        display: none;
        z-index: 5;
    }

    .more_item3 {
        position: relative;
        right: 5px;
        font-size: 13px;
        width: 85px;
        text-align: center;
        height: 43px;
        line-height: 43px;
    }

    .more_item a {
        position: relative;
        right: -5px;
        top: -1px;
        font-size: 12px;
        color: #5E5E5E;
    }

    .more_item a:hover {
        /*color: -webkit-link;蓝色*/
        text-decoration: underline;
    }

    .more_item_all {
        font-size: 12px;
        width: 66px;
        margin-left: 8px;
        margin-top: 10px;
        color: #666;
        border-bottom: 1px solid #000000;
    }

    .more_item_all a {
        color: #666;
    }

还有用到的相关js代码

<script>
//          更多产品
            $(function() {
                $(".more_item2").hide();
                $(".more").hover(
                    function() {
                        $(".more_item2").show();
                    },
                    function() {
                        $(".more_item2").hide();
                    }
                )
                $(".more_item2").hover(
                    function() {
                        $(".more_item2").show();
                    },
                    function() {
                        $(".more_item2").hide();
                    }
                )
            })
</script>

除了以上相对来说难度大点的，其他的就没有什么了！以下贴的是完整代码：
HTML和JS代码：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <link rel="icon" href="img/icon.jpg" type="image/x-icon" />
        <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
        <link rel="stylesheet" href="css/Baidu_home.css" />
        <title>百度一下，你就知道</title>
        <style type="text/css">
            .footer_p2 .jic_logo{
                background-position: -600px -96px;
                position: relative;
                top: 3px;
            }

            .footer_p2 .jga_logo{
                background-position: -623px -96px;
                position: relative;
                top: 3px;
            }

            .footer_p2 .jic_logo, .jga_logo{
                width: 14px;
                height: 17px;
                overflow: hidden;
                background: url(img/icons_5859e57.png) no-repeat -600px -96px;
                display: inline-block;
            }
        </style>
    </head>

    <body>
        <div id="head">
            <span><a class="mnav" href="#">新闻</a></span>
            <span><a class="mnav" href="#">hao123</a></span>
            <span><a class="mnav" href="#">地图</a></span>
            <span><a class="mnav" href="#">视频</a></span>
            <span><a class="mnav" href="#">贴吧</a></span>
            <span><a class="mnav" href="#">学术</a></span>
            <span><a class="login" href="#">登录</a></span>
            <span><a class="set" href="#">设置</a></span>

            <div class="set_detail">
                <a href="#" target="_blank">搜索设置</a>
                <a href="#" target="_blank">高级搜索</a>
                <a href="*">关闭预测</a>
                <a href="#" target="_blank">搜索历史</a>
            </div>

            <a class="more">更多产品</a>
            <div class="more_item2">
                <li>
                    <div class="more_item3">
                        <a>更多产品</a>
                    </div>
                </li>
                <li>
                    <div style="width: 50px; height: 1px;margin-left:10px;background: #f0f0f0;"></div>
                </li>
                <li>
                    <div class="more_item">
                        <a href="#"><img src="img/nuo.png" />糯米</a>
                    </div>
                </li>
                <li>
                    <div class="more_item">
                        <a href="#"><img src="img/yinyue.png" />音乐</a>
                    </div>
                </li>
                <li>
                    <div class="more_item">
                        <a href="#"><img src="img/tupian.png" />图片</a>
                    </div>
                </li>
                <li>
                    <div class="more_item">
                        <a href="#"><img src="img/zhidao.png" />知道</a>
                    </div>
                </li>
                <li>
                    <div class="more_item">
                        <a href="#"><img src="img/wenku.png" />文库</a>
                    </div>
                </li>
                <li>
                    <div class="more_item">
                        <a href="#"><img src="img/fengyunbang.png" />风云榜</a>
                    </div>
                </li>
                <li>
                    <div class="more_item_all">
                        <a href="#">全部产品>></a>
                    </div>
                </li>
            </div>
        </div>

        <div class="logo">
            <img src="img/bd_logo1.png" width="270px" height="129px" />
        </div>

        <div class="searchBox">

            <span class="camera"></span>

            <input class="input_seach" maxlength="100" autocomplete="off" />

            <span class="btn"><input class="btn_input" type="submit" value="百度一下"</span>
        </div>

        <div class="erweima">
            <img src="img/erweima.png" />
            <p><b>手机百度</b></p>
        </div>

        <div class="footer">
            <p class="footer_p">
                <a href="#" onmousedown="return ns_c({'fm':'behs','tab':'favorites','pos':0})" target="_blank">把百度设为主页</a>
                <a href="#" onmousedown="return ns_c({'fm':'behs','tab':'tj_about'})">关于百度</a>
                <a href="#" onmousedown="return ns_c({'fm':'behs','tab':'tj_about_en'})">About Baidu</a>
                <a href="#" onmousedown="return ns_c({'fm':'behs','tab':'tj_tuiguang'})">百度推广</a>
            </p>

            <p class="footer_p2">
                ©2017 Baidu
                <a href="#" onmousedown="return ns_c({'fm':'behs','tab':'tj_duty'})">使用百度前必读</a>
                <a href="#" onmousedown="return ns_c({'fm':'behs','tab':'tj_homefb'})">意见反馈</a>
                京ICP证030173号
                <i class="jic_logo"></i>
                <a id="jgab" href="#" target="_blank">京公网安备11000002000001号</a>
                <i class="jga_logo"></i>
            </p>
        </div>

        <script>
//          更多产品
            $(function() {
                $(".more_item2").hide();
                $(".more").hover(
                    function() {
                        $(".more_item2").show();
                    },
                    function() {
                        $(".more_item2").hide();
                    }
                )
                $(".more_item2").hover(
                    function() {
                        $(".more_item2").show();
                    },
                    function() {
                        $(".more_item2").hide();
                    }
                )
            })

            //设置
            $('.set,.set_detail').hover(function() {
                $('.set_detail').stop(true, true).fadeIn(100);
            }, function() {
                $('.set_detail').stop(true, true).delay(100).fadeOut(100);
            });
        </script>

    </body>

</html>

下面是对应的CSS代码：

    body,
    div,
    dl,
    dt,
    dd,
    ul,
    ol,
    li,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    pre,
    code,
    form,
    fieldset,
    legend,
    input,
    textarea,
    p,
    blockquote,
    th,
    td,
    hr,
    button,
    article,
    aside,
    details,
    figcaption,
    figure,
    footer,
    header,
    hgroup,
    menu,
    nav,
    section {
        margin: 0;
        padding: 0;
    }

    a {
        text-decoration: none;
    }

    em {
        font-style: normal;
    }

    ul li {
        list-style: none;
    }

    ul,
    li {
        list-style: none;
        margin: 0, auto;
        padding: 0;
        width: 48px;
    }

    #head {
        width: auto;
        position: absolute;
        right: 0px;
        top: 0px;
        margin-top: 20px;
        padding-right: 96px;
    }

    .mnav {
        margin-left: 20px;
        line-height: 24px;
        color: #333;
        font-size: 13px;
        font-weight: 700;
        text-decoration: underline;
    }

    span a:hover {
        color: #0000CC;
    }

    .login {
        text-decoration: underline;
        margin-left: 20px;
        line-height: 24px;
        color: #333;
        font-size: 13px;
    }

    .set {
        text-decoration: underline;
        margin-left: 20px;
        line-height: 24px;
        color: #333;
        font-size: 13px;
    }

    #head .more {
        position: absolute;
        top: 0px;
        right: 10px;
        margin-left: 20px;
        font-size: 13px;
        color: #FFFFFF;
        background: #38f;
        padding: 3px;
        margin-right: 5px;
    }

    .more_item {
        position: relative;
        top: 9px;
        text-align: center;
        margin-left: 8px;
        width: 50px;
        height: 76px;
        margin-top: 10px;
        border-bottom: 1px solid #f0f0f0;
    }

    .more_item2 {
        position: absolute;
        right: 11px;
        top: -10px;
        background-color: #F9F9F9;
        width: 70px;
        display: none;
        z-index: 5;
    }

    .more_item3 {
        position: relative;
        right: 5px;
        font-size: 13px;
        width: 85px;
        text-align: center;
        height: 43px;
        line-height: 43px;
    }

    .more_item a {
        position: relative;
        right: -5px;
        top: -1px;
        font-size: 12px;
        color: #5E5E5E;
    }

    .more_item a:hover {
        /*color: -webkit-link;蓝色*/
        text-decoration: underline;
    }

    .more_item_all {
        font-size: 12px;
        width: 66px;
        margin-left: 8px;
        margin-top: 10px;
        color: #666;
        border-bottom: 1px solid #000000;
    }

    .more_item_all a {
        color: #666;
    }

    .set_detail {
        border: 1px solid #d1d1d1;
        position: absolute;
        float: right;
        right: 77px;
        top: 27px;
        background: #FFFFFF;
        font-size: 12px;
        width: 60px;
        display: none;
        z-index: 5;
    }

    .set_detail a {
        color: #000000;
        height: 25px;
        line-height: 25px;
        text-decoration: none;
        text-align: center;
        padding-left: 5px;
        padding-right: 5px;
    }

    .set_detail:before {
        position: absolute;
        content: "";
        width: 10px;
        height: 10px;
        -webkit-transform: rotate(45deg);
        /*背景颜色搞得跟下面一样的就可以吧那条线覆盖了 所以看起来就没有线*/
        background: #FFFFFF;
        border-top: #E3E3E3 1px solid;
        border-left: #E3E3E3 1px solid;
        top: -6px;
        left: 50%;
        margin-left: -5px;
        z-index: 1;
    }

    .set_detail a:hover {
        background-color: #398bfb;
        color: #FFFFFF;
    }

    .logo {
        text-align: center;
        position: relative;
        top: 40px;
    }

    .searchBox {
        position: relative;
        top: 60px;
        text-align: center;
    }

    .camera {
        float: right;
        position: relative;
        right: 474px;
        top: 10px;
        width: 26px;
        height: 22px;
        background: url(../img/camera.png) no-repeat 2px 3px;
    }

    .camera:hover {
        background: url(../img/camera.png) no-repeat 2px -17px;
    }

    .input_seach {
        width: 594px !important;
        height: 36px;
        border: 1px solid #b6b6b6;
        padding-left: 10px;
        padding-right: 35px;
        font-size: 16px;
    }

    .input_seach:focus {
        border: 1px solid #4791ff;
    }

    .btn_input {
        position: relative;
        right: 6px;
        width: 100px;
        height: 39px;
        color: #fff;
        font-size: 15px;
        background: #3385ff;
        border: none;
        outline: medium;
        border-bottom: 0;
        -webkit-appearance: none;
        -webkit-border-radius: 0
    }

    .erweima {
        text-align: center;
        position: relative;
        bottom: -334px;
    }

    .erweima b {
        color: #666;
        font-weight: 700;
        font-size: 12px;
    }

    .footer {
        text-align: center;
        position: relative;
        bottom: -350px;
        font-size: 12px;
        color: #999;
    }
    /*.footer_p{
                text-align: center;
                position: relative;
                bottom: -350px;
            }*/

    .footer_p a {
        color: #999;
        text-decoration: underline;
        font-size: 12px;
        margin-left: 25px;
    }

    .footer_p2 {
        margin-top: 13px;
    }

    .footer_p2 a {
        color: #999;
        text-decoration: underline;
        font-size: 12px;
    }

    #jgab {
        margin-left: 19px;
    }

总结注意点：

1.背景图(background-image)随浏览器缩放而缩放，需要加样式 background-size:cover;
2.注意span标签，如果有空格和换行，那么网页中会显示间隙，不需要这个间隙那么请在写标签时写在一行上
3.默认绝对定位是相对浏览器，只有当父元素设置为相对定位，那么绝对定位才能针对父元素
4.我这上面的代码可能会出现浏览器兼容的问题，所以有可能有些浏览器显示出来的会有点差距，所以需要你根据不同浏览器来稍作修改；
5.完整代码请前往
HTML仿百度首页未登录静态界面代码