在網頁制作過程中，經常會需要使用跳轉鏈接實現頁面之間的跳轉。而有時候，我們需要在當前頁面內跳轉到頁面的某一部分，這就需要使用CSS中的“跳轉到當前頁面”的技術。
a {
color: #000;
text-decoration: none;
}
a:hover {
color: #f00;
text-decoration: underline;
}
.content {
margin-top: 50px;
height: 500px;
}
a[name="title"] {
display: block;
width: 100%;
height: 50px;
background-color: #ddd;
text-align: center;
line-height: 50px;
}
a[href="#content"] {
color: #f00;
}首先，我們需要在HTML代碼中使用id或name屬性為頁面的某個部分命名。例如，在下面的代碼中，我們將頁面的主體部分使用class屬性命名為“content”，將頁面的標題使用name屬性命名為“title”。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS跳轉當前頁面</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<ul>
<li><a href="#content">內容</a></li>
</ul>
</nav>
<header>
<a name="title">網頁標題</a>
</header>
<div class="content">
<p>頁面內容...</p>
</div>
</body>
</html>然后，在CSS樣式表中，我們可以通過給“跳轉鏈接”添加href屬性值為“#已命名的部分”的方式實現跳轉鏈接。例如，在下面的代碼中，我們將“內容”鏈接的href屬性值設置為“#content”，并將其顏色變為紅色。
最后，我們可以通過鼠標懸停在跳轉鏈接上時，將其下劃線加粗，使用戶更容易理解這是一個跳轉鏈接。
上一篇css路面施工