日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 > 前端技术 > CSS >内容正文

CSS

CSS基础-13-垂直导航栏（详细创建过程）

發布時間：2024/3/26 CSS 43 豆豆
生活随笔 收集整理的這篇文章主要介紹了 CSS基础-13-垂直导航栏（详细创建过程） 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

文章目錄

  • 前言
  • 1. 最簡導航欄
  • 2 添加鼠標改變背景色
  • 3 給首頁添加顏色
  • 4 加邊框
    • 4.1 思路
    • 4.2 實際代碼
  • 5 全屏高度固定導航條
    • 5.1 思路
    • 5.2 實際代碼

前言

一步一步做出一個完整的導航欄

1. 最簡導航欄

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>hello world</title> <style> ul {list-style-type: none;margin: 0;padding: 0;width: 200px;background-color: #f1f1f1; }li a {display: block;color: #000;padding: 8px 16px;text-decoration: none; }</style> </head><body> <ul> <li><a href="#home">主頁</a></li> <li><a href="#news">新聞</a></li> <li><a href="#contact">聯系</a></li> <li><a href="#about">關于</a></li> </ul></body> </html>
  • 效果

2 添加鼠標改變背景色

  • < head > 的< style >中添加如下內容
/* 鼠標移動到選項上修改背景顏色 */ li a:hover {background-color: #555;color: white; }
  • 效果

3 給首頁添加顏色

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>hello world</title> <style> ul {list-style-type: none;margin: 0;padding: 0;width: 200px;background-color: #f1f1f1; }li a {display: block;color: #000;padding: 8px 16px;text-decoration: none; } /* 個“首頁”添加一個新的效果*/ li a.active {background-color: #4CAF50;color: white; } /* not(.active) 表示排除了a.active（即鼠標移到a.active的對象時不生效） */ li a:hover:not(.active) {background-color: #555;color: white; } </style> </head> <body><ul><li><a class="active" href="#home">主頁</a></li><li><a href="#news">新聞</a></li><li><a href="#contact">聯系</a></li><li><a href="#about">關于</a></li> </ul></body> </html>
  • 效果

首頁添加了新的效果
切鼠標移動到首頁時，該效果不變。

4 加邊框

4.1 思路

  • 問題
    如果直接給每個 li 都加框的話，相鄰li中間會有兩條線，很難看
li {text-align: center;border: 1px solid #555; }

因此，我沒先給ul加個外框

ul {……border: 1px solid #555; }

再給每個 a 加 下邊框

li {……border-bottom: 1px solid #555; }

此時，最后一個a的下邊框 和 ul的下邊框重合，我們去掉最后一個a的下邊框：

4.2 實際代碼

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>hello world</title> <style> ul {list-style-type: none;margin: 0;padding: 0;width: 200px;background-color: #f1f1f1;border: 1px solid #555; }li a {display: block;color: #000;padding: 8px 16px;text-decoration: none; }li {text-align: center;border-bottom: 1px solid #555; }li:last-child {border-bottom: none; }li a.active {background-color: #4CAF50;color: white; }li a:hover:not(.active) {background-color: #555;color: white; } </style> </head> <body><ul><li><a class="active" href="#home">主頁</a></li><li><a href="#news">新聞</a></li><li><a href="#contact">聯系</a></li><li><a href="#about">關于</a></li> </ul></body> </html>
  • 效果

5 全屏高度固定導航條

5.1 思路

  • 給body去掉 外部距離
body {margin: 0; }
  • 設置 ul 為全屏高度
ul {……height: 100%;overflow: auto; }

5.2 實際代碼

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>hello world</title> <style> body {margin: 0; }ul {list-style-type: none;margin: 0;padding: 0;width: 25%;background-color: #f1f1f1;position: fixed;height: 100%;overflow: auto; }li a {display: block;color: #000;padding: 8px 16px;text-decoration: none; }li a.active {background-color: #4CAF50;color: white; }li a:hover:not(.active) {background-color: #555;color: white; } </style> </head> <body><ul><li><a class="active" href="#home">主頁</a></li><li><a href="#news">新聞</a></li><li><a href="#contact">聯系</a></li><li><a href="#about">關于</a></li> </ul><div style="margin-left:25%;padding:1px 16px;height:1000px;"><h2>標題</h2> <p>Some text..</p><p>Some text..</p><p>Some text..</p><p>Some text..</p><p>Some text..</p><p>Some text..</p><p>Some text..</p><p>Some text..</p><p>Some text..</p><p>Some text..</p> </div></body> </html>
  • 效果

總結

以上是生活随笔為你收集整理的CSS基础-13-垂直导航栏（详细创建过程）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。