css 我怎样才能 Package 公司名称，标志和标语在多行在标题我的网站？

我想添加我的品牌标志到我的网站的标题。

标志अEC的第一行有三层，即अEC是写在彼此顶部3次不同的颜色，但每一层都略有移位，使其下面的层是可见的效果，所以我想在网站上实现相同的效果。
我还希望最后两行，即品牌名称अभिलाषा EDU Center和标签行Find Your Right Abhilasha应该无缝地在标志中的अEC下。所有这三行应该与标题中的菜单列表对齐，如图像中所示，我想实现什么。
我知道我可以要求很多，做了一个完全错误的方法，但这是字面上第一次尝试CSS和HTML
我想要达到的是

目前我能得到的是

我正在编写的代码

#logo {
        display: inline-block;
    }
    #logo h1 {
        text-align: center;
        margin-top: 0%;  
    }

<!DOCTYPE HTML>
<html>
    <head>
        <title>Abhilasha EDU Center</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
        <link rel="stylesheet" href="assets/css/main.css" />
         <!-- TODO not working as expected -->
        <link rel="icon" href="images/logo.png" type="image/icon type">
    </head>
    <body class="is-preload homepage">
        <div id="page-wrapper">

            <!-- Header -->
                <div id="header-wrapper">
                    <header id="header" class="container">

                        <!-- Logo -->
                            <div id="logo">
                                <a href="index.html">
                                    <!--
                                    <img src="images/website_logo_thumbnail.png" alt="no image" />
                                    -->
                                    <h1 id="">अEC<br/>
                                    अभिलाषा EDU Center<br/>
                                    Find Your Right Abhilasha
                                    </h1>
                                </a>
                            </div>

                        <!-- Nav -->
                            <nav id="nav">
                                <ul>
                                    <li class="current"><a href="index.html">Welcome</a></li>
                                    <li>
                                        <a href="#">Dropdown</a>
                                        <ul>
                                            <li><a href="#">Lorem ipsum dolor</a></li>
                                            <li><a href="#">Magna phasellus</a></li>
                                            <li>
                                                <a href="#">Phasellus consequat</a>
                                                <ul>
                                                    <li><a href="#">Lorem ipsum dolor</a></li>
                                                    <li><a href="#">Phasellus consequat</a></li>
                                                    <li><a href="#">Magna phasellus</a></li>
                                                    <li><a href="#">Etiam dolore nisl</a></li>
                                                </ul>
                                            </li>
                                            <li><a href="#">Veroeros feugiat</a></li>
                                        </ul>
                                    </li>
                                    <li><a href="left-sidebar.html">Left Sidebar</a></li>
                                    <li><a href="right-sidebar.html">Right Sidebar</a></li>
                                    <li><a href="no-sidebar.html">No Sidebar</a></li>
                                </ul>
                            </nav>

                    </header>
                </div>
    </body>
</html>

对于徽标，您可以使用我快速制作的此代码。我将div传递到position: relative;中有我的文本的地方，然后，我将::after放在我的div上，我将其传递到position: absolute;中。我邀请您了解更多关于CSS here中位置的信息。然后我将z索引设置为彼此重叠。

<body class="is-preload homepage">
   <div class="logo">Hello</div>
</body>

<style>
    .logo {
        color: purple;
        font-size: 46px;
        font-weight: bold;
        position: relative;
        z-index: 0;
    }
    
    .logo::after {
        content: "Hello";
        color: green;
        font-size: 46px;
        font-weight: bold;
        position: absolute;
        top: 3px;
        left: 3px;
        z-index: -1;
    }
</style>

最后，讨论一下与您的类别的对齐，我让您了解更多关于display: flex;的信息。
祝你愉快！

css 我怎样才能 Package 公司名称，标志和标语在多行在标题我的网站？

1条答案

相关问题

热门标签

最新问答