页面 logo书写

雾里看花叹朦胧

于 2020-12-02 22:59:06 发布

阅读量216

点赞数

分类专栏： html 文章标签： logo 规范

本文链接：https://blog.youkuaiyun.com/hsl0530hsl/article/details/110505546

版权

html 专栏收录该内容

7 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Logo</title>
    <style>
        /*
        logo 最好不要使用img，而是使用background-img
        因为img未加载完成或失败时，有失败的默认样式显示

        css未加载成功或完成时，显示文字
        */
        h1 {
            margin: 0;
        }
        .logo {
            width: 200px;
            height: 60px;
            overflow: hidden;
        }
        .logo-img {
            display: block;
            width: 200px;
            height: 60px;
            line-height: 60px;
            text-align: center;
            background-image: url("./img/logo.jpg");
            background-size: 200px 60px;
            background-position: 0 0;
            background-repeat: no-repeat;
            padding-top: 60px;
        }
    </style>
</head>
<body>
    <header class="logo">
        <h1>
            <a href="" class="logo-img">
                大人网
            </a>
        </h1>
    </header>
</body>
</html>