Question

首先，我仍在学习并且对这个行业还很陌生，所以请随时纠正我所写的错误代码。

我的问题是在我的本地主机解决方案上，我的CSS网格代码正在按我想要的方式工作（请参见下面的第1张图片）。上传后，它不是（请参见下面的第二张图片）。我使用了在另一个网站（https://css-tricks.com/new-year-new-job-lets-make-a-grid-powered-resume/）上找到的方法，并且该方法在我的简历中可用，但是在我的投资组合帖子中不起作用。

应该看起来像这样！ picture 1

但是看起来像这样... picture 2

具体来说，在包含网格的所有部分的父div上正在为css文件（index.css）调用id，但是在父div中未为该类调用index.css，也不会将index.css应用于网格部分上的任何类。在本地主机中，index.css在这些部分中均正常工作。 当我在服务器端检查index.css时，它是最新的，并且具有我需要的所有类，这让我非常抓狂...

我尝试过的是“硬刷新”（ctrl + f5，shift + f5等），将我的Cloudflare设置为开发人员模式，并且我还留出了一些时间查看它是否只是缓慢的上载服务器端。

HTML代码；

<div id="banner">
    <!--Title-->
    <div class="container py-2">
        <div class="col-12 py-0 px-2">
            <h3><u>KPI Management Dashboard</u></h3>
        </div>
    </div>
</div>

<div class="portfolio-sections" id="content">

    <section class="grid-area-portfolio portfolio-overview" style="margin-left: 15px;">
        <div class="p-3">
            <p style="color: #545454;"><b>OVERVIEW</b></p>
            <p>
                text here
            </p>
            <p>
                text here
            </p>
        </div>
    </section>

    <section class="grid-area-portfolio portfolio-role" style="margin-left: 15px;">
        <div class="p-3">
            <p style="color: #545454;"><b>MY ROLE</b></p>
            <p>
                <b>Graduate Software Developer</b> for&nbsp;<a href="https://nantltd.co.uk/">Nant Ltd</a>
            </p>
            <p>
                UI Design, Prototyping, HTML, CSS, JavaScript, PHP, MySQL
            </p>
            <p>May 2020 - July 2020</p>
            Go to the&nbsp;<a href="dashboard.php">Dashboard Page</a>
        </div>
    </section>

CSS代码（index.css）;

#banner {
    margin-top: 100px;
    width: 100%;
    background-color: #ffffff;
    /*color: #545454;*/
    /*border-top: 2px solid rgba(82,82,82,0.4);
    border-bottom: 2px solid rgba(82,82,82,0.4);*/
    box-shadow: rgba(0, 0, 0, 0.3) 0 5px 10px 0;
}

#banner h3 {
    color: #545454;
    border-top: 4px solid rgba(255,255,255, .95);
    transition: border-top ease-in-out 0.25s;
    border-radius: 3px;
    display: inline-block;
}

#banner h3:hover {
    border-top: 4px solid #AFFC41;
    border-radius: 3px;
}

#content {
    margin: 0 auto;
    margin-top: 20px;
    width: 75%;
    padding-bottom: 40px;
    background-color: #ffffff;
    box-shadow: rgba(0, 0, 0, 0.3) 0 5px 10px 0;
    display: grid;
}

.portfolio-sections {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
        "portfolio-overview portfolio-overview portfolio-role" 
        "portfolio-background portfolio-background portfolio-background" 
        "portfolio-problem portfolio-problem portfolio-problem" 
        "portfolio-users portfolio-users portfolio-users" 
        "portfolio-solution portfolio-solution portfolio-solution" 
        "portfolio-results portfolio-results portfolio-results";
}

.grid-area-portfolio {
    padding: 0;
    margin: 15px 15px 0px 0px;
    position: relative;
}

.portfolio-overview {
    grid-area: portfolio-overview;
}

.portfolio-role {
    grid-area: portfolio-role;
}

此codepen的链接显示该代码在那里起作用-https://codepen.io/gileswking/pen/abdgOVo

但是指向我实际网站的链接显示该网站在那里不起作用-https://www.code-grey.co.uk/portfolio/dashboard_case_study.php

我将不胜感激，在此先感谢您。

Answer 1

因此，如果我单击Cloudflare CDN上的 Development Mode ，它可以工作24小时，然后禁用自身，这表明在Cloudflare上的设置不正确。与朋友一起完成设置后，现在可以使用了。

CSS在本地主机站点上正确显示，但在实际网站上却不正确

1 个答案: