Html+Css基础之仿百度首页

最新推荐文章于 2024-07-11 14:41:43 发布

q269399361

最新推荐文章于 2024-07-11 14:41:43 发布

阅读量7.4k

点赞数 2

分类专栏：前端学习笔记

本文链接：https://blog.csdn.net/hucblog/article/details/53785080

版权

前端学习笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>百度一下,你就知道</title>
    <style>
        html {
            height: 100%;
            overflow-y: scroll;
        }

        body {
            margin: 0px;
            padding: 0px;
            height: 100%;
        }

        .a-none-decoration {
            text-decoration: none;
        }

        #wrapper {
            height: 100%;
            min-width: 1000px;
        }

        #s-skin-container {
            height: 100%;
            width: 100%;
            min-width: 1000px;
            -webkit-background-size: cover; /*随浏览器大小改变背景图大小*/
            background-size:cover;/*随浏览器大小改变背景图大小*/
            background-color: rgb(255,255,255);
            background-image: url("https://ss3.bdstatic.com/iPoZeXSm1A5BphGlnYG/skin/486.jpg") ;
            background-repeat:no-repeat;
            position: fixed;
            left: 0;
            top: 0;
            z-index: -10;
        }

        #s-top-wrap {
            height: 32px;
            z-index: 99;
            background-color: #A1A7B5;
            min-width: 1000px;
            width: 100%;
            position: fixed;
            top: 0;
        }

            #s-top-wrap a {
                line-height: 32px;
                color: #fff;
                font-size: 13px;
                margin-left: 10px;
            }

            #s-top-wrap > .s-left-menu {
                height: 100%;
                width: 40%;
                float: left;
                padding-left: 20px;
            }

            #s-top-wrap > .s-right-menu {
                height: 100%;
                width: 50%;
                float: right;
                padding-right: 20px;
                text-align: right;
            }

        #s-container {
            width: 641px;
            margin: 0 auto;
            text-align: center;
            padding-top: 42px;
        }

            #s-container #s_kw_wrap {
                position: relative;
            }

            #s-container .s_ipt {
                width: 480px;
                padding: 10px 50px 10px 7px;
            }

            #s-container .s_btn {
                width: 100px;
                height: 38px;
                cursor: pointer;
                font-size: 16px;
            }

            #s-container .soutu-btn {
                display: inline-block;
                height: 16px;
                width: 18px;
                position: absolute; /*默认绝对定位是相对浏览器，只有当父元素设置为相对定位，那么绝对定位才能针对父元素*/
                right: 10px;
                top: 1px;
                background-image: url(https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/soutu/img/camera_new_5606e8f.png);
            }

                #s-container .soutu-btn:hover {
                    background-position: 0 -20px;
                }
    </style>
</head>

<body>
    <div id="wrapper">
        <div id="s-skin-container"></div>
        <div id="s-top-wrap">
            <div class="s-left-menu s-menu">
                <a href="javascript:;" class="a-none-decoration">上海：10℃</a>
                <a href="javascript:;">宝箱</a>
                <a href="javascript:;">换肤</a>
                <a href="javascript:;">消息</a>
            </div>
            <div class="s-right-menu s-menu">
                <a href="javascript:;">地图</a>
                <a href="javascript:;">视频</a>
                <a href="javascript:;">贴吧</a>
            </div>
        </div>
        <div id="s-container">
            <img id="s_lg_img" src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/logo_white_fe6da1ec.png" width="270" height="129"><br/><br />
            <form action="/" method="post">
                <span id="s_kw_wrap"><span class="soutu-btn"></span><input type="text" class="s_ipt" maxlength="100"><a href="javascript:;" id="quickdelete" title="清空" class="quickdelete" style="top: 0px; right: 0px;"></a></span><input type="submit" value="百度一下" class="s_btn">
            </form>
        </div>
    </div>
</body>
</html>