如何做一個簡單的網頁導航
阿新 • • 發佈：2021-02-03
如何運用html和css製作一個簡單的網頁導航
程式碼示例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .nav{ /* 設定高和寬 */ height: 90px; width: 530px; /* 背景顏色 */ background-color: #909090; /* 左右自動居中 */ margin-left: auto; margin-right: auto; /* 行內元素-行內塊元素-文字居中 */ text-align: center; } .nav a{ /* 轉換為塊元素，為了設定寬高 */ display: inline-block; /* 高 */ width: 105px; /* 行高90 讓文字垂直在90居中 */ line-height: 90px; /* 文字大小，粗細 */ font-size: 24px; font-weight: 800; /* 不要裝飾線 */ text-decoration: none; /* 白色 */ color: white; /* 預設設定左邊兩畫素和背景一致的邊框 */ border-left:1px solid #909090 ; } .nav a:hover{ /* 滑鼠放上去改變背景和邊框顏色 */ background-color: red; border-left-color:white ; } </style> </head> <body> <div class="nav"> <a href="">首頁</a> <a href="">活動</a> <a href="">幫助</a> <a href="">招聘</a> </div> </body> </html>
效果示例：
