1. 登入blogger ➡ 主題 ➡ 自訂 ➡ 進階 ➡ 新增CSS
貼下下面這段原始碼
<style>
body {margin:0;}
.navbar {
overflow: hidden;
background-color: #333;
position: fixed; / *將導航欄設置為固定位置* /
top: 0; / *將欄放在頁面頂部* /
width: 100%; /* 全屏寬度 */
}
/ *欄內的鏈接* /
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/ *更改鼠標懸停的背景* /
.navbar a:hover {
background: #ddd;
color: black;
}
/* 主要內容 */
.main {
padding: 16px;
margin-top: 30px; / *添加頂部邊距以避免內容重疊* /
height: 1500px; /* Used in this example to enable scrolling */
}
</style>
|
2. 版面設定 ➡ 新增小工具 ➡ 新增HTML/JAVASCRIPT ➡ 貼上下方程式碼 ➡ 儲存排列方式
*紅色字請自行修改
<div class="navbar">
<a href="#home">Home</a> /* 連結1名稱 */
<a href="#news">News</a> /* 連結2名稱 */
<a href="#contact">Contact</a> /* 連結3名稱 */
</div>
|
那麼如何創建一個固定的底部菜單呢？
找到上述的top:0;改為bottom:0; （黃色部分）
其餘語法不變主題 ➡ 自訂 ➡ 進階 ➡ 新增CSS
貼下下面這段原始碼
<style>
body {margin:0;}.navbar { overflow: hidden; background-color: #333; position: fixed; bottom: 0; /* 置於底部 */ :} .navbar a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } .navbar a:hover { background: #ddd; color: black; } .main { padding: 16px; margin-bottom: 30px; height: 1500px; /* Used in this example to enable scrolling */ } </style> |
2. 版面設定 ➡ 新增小工具 ➡ 新增HTML/JAVASCRIPT ➡ 貼上下方程式碼 ➡ 儲存排列方式
*紅色字請自行修改
<div class="navbar">
<a href="#home">Home</a> /* 連結1名稱 */
<a href="#news">News</a> /* 連結2名稱 */
<a href="#contact">Contact</a> /* 連結3名稱 */
</div>
|
（和我聯絡LINE ID:@ums6164a）
Step by Step 開始學習 !
0 留言