将内容添加到预先存在的网页

Question

我为一个朋友承担了一个小型网页设计项目，他们要求我添加一些我认为很简单但我无法完全理解的内容。就上下文而言，自从CSS出现之前，我就没有管理过网页，所以我对HTML很了解，但与CSS和PHP混淆了。

现在，该网站的标题中有两个按钮。他们希望我添加第三个按钮，出现在其他两个按钮之上。我已经找到了两个现有按钮的HTML，但复制/粘贴其中一个按钮并没有添加第三个按钮，而是用我插入的文本和链接替换了较低的按钮。

以下是PHP文件的一个片段：

<?php wp_nav_menu(array('theme_location'=>'menu-1','container'=>'div','container_id'=>'nav','container_class'=>false,'menu_class'=>false,'menu_id'=>false )); ?>
<div id="logo"></div>
<h2><a href="<?php echo home_url(); ?>" title="<?php echo esc_attr( get_bloginfo( 'description', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h2>
<h3><a href="<?php echo home_url(); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'description' ); ?></a></h3>
<a href="https://islandconsultingandtraining.com/wp-content/uploads/2020/10/ICT-Training-Schedule-2020-2021.pdf" target="_blank" class="pdf">ICT Schedule:<br>2020/2021</a>
<a href="/docs/ICT Course Catalog 2020-2021-For Education and Social Services Professionals.pdf" target="_blank" class="pdf">ICT Catalog:<br>Educators and Social Services</a>
<a href="/docs/ICT-Course Catalog-2020-2021.pdf" target="_blank" class="pdf">ICT Catalog:<br>Law Enforcement</a>
</div>

正如你所看到的，我把它放在了第三个超链接中，但我知道我遗漏了一些东西，可能是在CSS中，实际上把它放到了其他按钮之上。

网站现在看起来是

Answer 1

代码中发生了很多事情，甚至有些人(包括我自己(会认为这是一种糟糕的做法，即绝对定位。我不会说这是错误的，我肯定会使用它，但我尽量少用。

如果您完全按照原来的方式添加HTML，则需要对CSS进行以下更改：

#header .pdf {
bottom: 0; /* was 55px */
}
#header .pdf:nth-of-type(2) {
bottom: 100px; /* was 55px */
}
/* This block is new */
#header .pdf:nth-of-type(3) {
bottom: 50px;
}

这会让响应有点混乱，所以你也必须调整一下：

@media only screen and (max-width: 767px) {
#header a.pdf {
bottom: 0; /* was initial */
}
}

你可以改变这些数字来改变事物。

至于要编辑哪个文件，这有点难说。在WordPress安装的根目录(wp-config.php所在的位置(中有一个名为"的文件；island.css"；，或者它住在"/wp-content/themes/THEME_NAME/"；目录，但这有点难以判断。