用html+css制作百度首页

最新推荐文章于 2023-09-19 11:42:22 发布

原创

最新推荐文章于 2023-09-19 11:42:22 发布 · 6.6k 阅读

标签

#html #css #前端

收录于

刚入门，做个百度首页来巩固一下刚学的html和css知识。
这是原网页：
在这里插入图片描述
这是我做的效果图：

实力有限，只能做成这样，有兴趣的可以参考一下，代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百度一下，你就知道</title>
    <style>
        /* 顶部内容 */
        .head,
        .foot {
    
    
            font-size: 13px;
        }

        .head_left {
    
    
            position: absolute;
            top: 20px;
            left: 17px;
        }

        .head_right {
    
    
            position: absolute;
            top: 20px;
            right: 30px;
        }

        .head a {
    
    
            text-decoration: none;
            color: black;
            cursor: pointer;
        }

        .head a:hover {
    
    
            color: blue;
        }

        /* 中间内容 */
        .body {
    
    
            text-align: center;
            position: relative;
        }

        img {
    
    
            height: 130px;
            margin-top: 113px;
            margin-right: 16px;
            cursor: pointer;
        }

        .text {
    
    
            width: 546px;
            h