国产三级片6699久久,国精品成人鲁鲁久久久,91久久久香蕉

如果您按照我之前的教程進行操作，現在您的網站上將會有一個主題（或子主題），其中包含指向網站標題中的頂級頁面的鏈接。

我創建了一個 26 的子主題，這就是我的鏈接現在的樣子：

在本教程中，我將向您展示如何向您的主題添加一些 CSS，以使這些鏈接更好一些。讓我們從刪除項目符號并添加浮動開始。

刪除項目符號并添加浮動

打開主題的樣式表。如果您創建了子主題，它將是空的，但如果您使用自己的主題，我建議您在樣式表中保留標題樣式的部分添加此樣式。

輸出頁面鏈接的代碼回顧（如果有要鏈接的頁面）：

<ul class="top-level-page-links">

<?php // using a foreach loop, output the title and permalink for each page
foreach ( $pages as $page ) { ?>

    <li class="page-link">
	
		<a href="<?php echo get_page_link( $page->ID ); ?>">
			<?php echo $page->post_title; ?>
		</a>
	
	</li>

<? } ?>

</ul>

登錄后復制

這意味著我們的目標是帶有 top-level-page-links 類的 ul 元素，并在其中 li 元素，其中 page-link 類后跟 a 元素（即鏈接）。

首先，讓我們移除子彈。添加此：

ul.top-level-page-links  {
    list-style: none;
}

登錄后復制

接下來，讓我們去掉每個列表項上的填充并添加 margin-left 聲明：

ul.top-level-page-links  {
    list-style-type: none;
	margin-left: 0;
}

登錄后復制

現在刷新屏幕，您將看到列表樣式消失了：

接下來讓這些鏈接彼此相鄰浮動。將其添加到您的樣式表中：

.page-link {
    float: left;
}

登錄后復制

現在您的鏈接將彼此相鄰：

接下來，讓我們繼續讓鏈接看起來更像按鈕。

添加邊距、內邊距和背景

為了使我們的鏈接看起來像按鈕，我們將為鏈接添加邊距、內邊距和背景。

將其添加到您的樣式表中：

.page-link a {
    margin-right: 10px;
	padding: 0.5em 10px;
	background-color: #454545;
}

登錄后復制

請注意，我只在右側使用了邊距，因為我希望左側按鈕與頁面左側對齊。

當您刷新屏幕時，您的按鈕將看起來更像按鈕：

它們看起來好多了，但需要一點技巧。讓我們編輯文本和背景的顏色，以便當有人將鼠標懸停在按鈕上時，它會改變顏色。

添加懸停效果

現在讓我們讓這些按鈕更具吸引力。

在樣式表中再添加兩個聲明塊，確保將它們添加到剛剛添加的鏈接的聲明塊之后：

.page-link a:link,
.page-link a:visited {
    color: #fff;
	text-decoration: none;
}
.page-link a:hover,
.page-link a:active {
	background-color: #dddddd;
	color: #454545;
	text-decoration: none;
}

登錄后復制

這會更改鏈接的顏色，刪除下劃線，并在有人將鼠標懸停在鏈接上或鏈接處于活動狀態時更改顏色。

讓我們看看它在頁面上的樣子：

當我將鼠標懸停在鏈接上時：

好多了！