📌 設置一個讓訪客方便瀏覽的菜單


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 開始學習 !


沒有留言