如何做 - 圖片上的導航欄
學習如何使用 CSS 在圖片上新增導航選單。
如何製作圖片上的導航欄
步驟 1) 新增 HTML
建立導航欄
示例
<div class="bg-img">
<div class="container">
<div class="topnav">
<a href="#home">主頁</a>
<a href="#news">新聞</a>
<a href="#contact">聯絡</a>
<a href="#about">關於</a>
</div>
</div>
</div>
步驟 2) 新增 CSS
樣式化導航欄
示例
.bg-img {
/* 使用的圖片 */
background-image: url("img_nature.jpg");
min-height: 380px;
/* 漂亮地居中並縮放圖片 */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
/* 定位導航欄所需 */
position: relative;
}
/* 在圖片內定位導航欄容器 */
.container {
position: absolute;
margin: 20px;
width: auto;
}
/* 導航欄 */
.topnav {
overflow: hidden;
background-color: #333;
}
/* 導航欄連結 */
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
自己動手試一試 »
