Html+Css基础之仿百度首页


<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>

总结注意点:

  1. 背景图(background-image)随浏览器缩放而缩放,需要加样式 background-size:cover;
  2. 注意span标签,如果有空格和换行,那么网页中会显示间隙,不需要这个间隙那么请在写标签时写在一行上
  3. 默认绝对定位是相对浏览器,只有当父元素设置为相对定位,那么绝对定位才能针对父元素

你可能感兴趣的:(前端学习笔记)