百度首页静态展示页面HTML+CSS

一直觉得百度首页很复杂的，有那么多的东西，跟这个博主学习了之后，仿写了一下，样式好像很简单

只设置的一些组件的高度而已，不得不说，CSS真是个好东西呀

话不多说，直接上代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>百度首页</title>
        <style>
            body {
                font-size: 14px;
                color:#666
            }
            div {
                text-align: center;
            }
            .content {
                height: 250px;
            }
            .header,
            .footer {
                height: 200px;
            }
            .logo {
                height: 150px;
            }
            input[type=text] {
                width: 400px;
                height: 30px;
            }
            input[type=submit] {
                width: 100px;
                height: 30px;
            }
            .search {
                height: 60px;
            }
            .bk {
                height: 120px;
            }
            .aq {
                height: 40px;
            }
            .tk {
                height: 40px;
            }
        </style>
    </head>

    <body>
        <div class="header">
            <div class="logo">
                <img src="C:\Users\libo\Desktop\bdlogo.gif" alt="百度">
            </div>

            <div class="nav">
                <a href="#">新闻</a>
                <strong>网页</strong>
                <a href="#">贴吧</a>
                <a href="#">知道</a>
                <a href="#">音乐</a>
                <a href="#">图片</a>
                <a href="#">视频</a>
                <a href="#">地图</a>
            </div>
        </div>

        <div class="content">
            <div class="search">
                <form action="http://www.baidu.com">
                    <input type="text" name="1" id="1">
                    <input type="submit" value="百度一下">
                </form>
            </div>

            <div class="bk">
                <a href="#">百科</a>
                <a href="#">文库</a>
                <a href="#">hao123</a>
                <a href="#">更多</a>
            </div>

            <div>
                <img src="" alt="定位图片">
                <a href="#">百度地图带你吃喝玩乐，全新全意为人民服务</a>
            </div>
        </div>

        <div class="footer">
            <div class="aq">
                <a href="#">把百度设为主页</a>
                <a href="#">安装百度卫士</a>
            </div>

            <div class="tk">
                <a href="#">加入百度推广</a>
                |
                <a href="#">搜索风云榜</a>
                |
                <a href="#">关于百度</a>
                |
                <a href="#">ABOUT BAIDU</a>
            </div>

            <div>
                ©2016 Baidu 使用百度前必读 京ICP证666号
            </div>
        </div>
    </body>
</html>

这就是全部的代码了，除了使用了一张百度的logo图标图片之外，其他就没有什么了

运行之后的页面如下所示：

 完毕

posted @ 2023-04-25 17:59  Mickeybo  阅读(424)  评论(0)  编辑  收藏  举报