仿百度首页练习

img

代码实现

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>高仿百度页面</title>

    <style>
        .container{
            width: 100%;
            height: 100%;
        }

        .first{
            overflow: hidden;
            border-bottom: 1px solid gainsboro;
        }

        .left{
            float: left;
        }

        .left span{
            color: deepskyblue;
        }

        .right{
            float: right;
        }

        .right input[type='button']{
            background-color: #38f;
            color: #fff;
            border: none;
            height: 100%;
            margin: 0;
            line-height: 32px;
        }

        a{
            color: black;
            margin: 0 8px;
        }

        .icon{
            width: 300px;
        }

        .input-container .input-div{
            /*font-size: 0;*/
        }

        .input-text{
            width: 50%;
            height: 42px;
            font-size: 20px;
            offset: 0;
        }

        .input-button{
            border: none;
            background-color: #3388ff;
            color: white;
            font-size: 20px;
            height: 48px;
            padding: 2px 16px;
            vertical-align: bottom;
            margin-left: -10px;
        }

        .input-container{
            text-align: center;
        }

        .bottom-container{
            text-align: center;
            margin-top: 300px;
        }
    </style>
</head>
<body>
    <div class="container">
        <!--第一行-->
        <div class="first">
            <!--  左边内容-->
            <div class="left">
                深圳: 23°C <span>优</span> | <a href="#">换肤</a> <a href="#">消息</a> <a href="#">显示频道</a>
            </div>
            <!--  右边内容-->
            <div class="right">
                <a href="#">新闻</a>
                <a href="#">hao123</a>
                <a href="#">地图</a>
                <a href="#">视屏</a>
                <a href="#">贴吧</a>
                <a href="#">学术</a>
                <a href="#">小凯</a>
                <a href="#">设置</a>
                <input type="button" value="更多产品">
            </div>
        </div>

        <!--网页中间位置的搜索内容-->
        <div class="input-container">
            <div>
                <img class="icon" src="https://www.baidu.com/img/bd_logo1.png?where=super" alt="">
            </div>
            <div class="input-div" >
                    <input class="input-text" type="text">
                    <input class="input-button" type="button" value="百度一下">
            </div>
        </div>


        <!--网页底部的内容-->
        <div class="bottom-container">
            <div>
                <a href="#">把百度设为主页</a>
                <a href="#">关于百度</a>
                <a href="#">About Baidu</a>
                <a href="#">百度推广</a>
            </div>

            <div>
                ©2019 Baidu <a href="#">使用百度前必读</a> <a href="#">意见反馈</a> 京ICP证030173号  <a href="#">京公网安备11000002000001号</a>
            </div>
        </div>
    </div>
</body>
</html>