Question

我有一个静态主页，我试图上传到wordpress。我设法让网站看起来像我想要的方式在HTML中，但每当我尝试在wordpress中打开它时，它会产生巨大的差距。我不知道它来自哪里。我用谷歌搜索了这个并且一直听到有关UTF-8的BOM。我有括号，所以我不确定是否保存有/无BOM。

这就是php让它看起来像1

这就是我希望它看起来像2

网站地址为mustafasprojects.com

html代码

<!-- Header -->
            <header id="header">
                <h1>Mustafa's Projects</h1>
                <nav>
                    <ul> 
                        <li><a href="#intro">Home</a></li>
                        <li><a href="#about">Who I Am</a></li>
                        <li><a href="#portfolio">My Work</a></li>
                        <li><a href="#contact">Contact</a></li>
                    </ul>
                </nav>
            </header>

css

#header {
        position: fixed;
        z-index: 10000;
        left: 0;
        top: 0;
        width: 100%;
        background: rgba(255, 255, 255, 0.95);
        height: 3em;
        line-height: 3em;
        box-shadow: 0 0 0.15em 0 rgba(0, 0, 0, 0.1);
        animation: 1s ease-out 0s 1 SlideInFromTop;
    }

        #header h1 {
            height: 3em;
            left: 1em;
            line-height: 3em;
            margin: 0;
            padding: 0;
            position: absolute;
            top: -.225em;
            font-size: 1.2em;
        }

        #header h1 a {
                color: #000
                font-size: 1.1em;
                border: 0;
} 

        #header nav {
            position: absolute;
            right: 0.5em;
            top: .525em;
            height: 1em;
            line-height: 1em;
            vertical-align: middle;
        }

            #header nav ul {
                margin: 0;
            }

                #header nav ul li {
                    display: inline-block;
                    margin-left: 0.5em;
                    font-size: 0.95em;

                }

                        #header nav > ul > li a {
                        display: inline-block;
                        height: 1.7em;
                        line-height: 1.7em;
                        padding: 0 .3em;
                        border-radius: 6px;
                    }

                    #header nav > ul > li a:not(.button) {
                        color: #000;
                        display: inline-block;
                        text-decoration: none;
                        border: 0;
                    }

                        #header nav > ul > li a:not(.button).icon:before {
                            color: #999;
                            margin-right: 0.5em;
                        }

                        #header nav > ul > li a:hover:not(.active) {
                            background-color: #266dd3;
                        }
                #header nav > ul > li:first-child {
                        margin-left: 0;
                    }
            #header nav > ul > li.active a:not(.button) {
                        background-color: rgba(153, 153, 153, 0.25);
                    }
                    #header nav > ul > li .button {
                        margin: 0 0 0 0.5em;
                        position: relative;
                    }
    .header.onload-header-fade-down {
            transform: 0.75s ease-in-out;
        transition: opacity .75s ease-in-out, transform .75s ease-in-out;
}
    body {
        padding-top: 3em;
    }

用php

＆GT;

    <div id="page-wrapper">

    <!-- Header -->
        <header id="header">
            <h1>Mustafa's Projects</h1>
            <nav>
                <?php html5blank_nav(); ?>
            </nav>
        </header>

我在检查员中打开了它，似乎我的主要课程延伸到了＃34; Home＆＃34;我的标题延伸到适当的长度。所以这只是在＆＃34; main＆＃34;？

中检查填充的问题

Answer 1

您的主<div>包装似乎导致了这个差距：

#page-wrapper {
    padding-top: 3em;
}

PHP导致标题和横幅之间的差距

1 个答案: