CSS基础-13-垂直导航栏（详细创建过程）
生活随笔
收集整理的這篇文章主要介紹了
CSS基础-13-垂直导航栏（详细创建过程）
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
文章目錄
- 前言
- 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">聯(lián)系</a></li> <li><a href="#about">關于</a></li> </ul></body> </html>- 效果
2 添加鼠標改變背景色
- < head > 的< style >中添加如下內容
- 效果
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">聯(lián)系</a></li><li><a href="#about">關于</a></li> </ul></body> </html>- 效果
首頁添加了新的效果
切鼠標移動到首頁時，該效果不變。
4 加邊框
4.1 思路
- 問題
如果直接給每個 li 都加框的話，相鄰li中間會有兩條線，很難看
因此，我沒先給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">聯(lián)系</a></li><li><a href="#about">關于</a></li> </ul></body> </html>- 效果
5 全屏高度固定導航條
5.1 思路
- 給body去掉 外部距離
- 設置 ul 為全屏高度
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">聯(lián)系</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-垂直导航栏（详细创建过程）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： dita xml格式文件_用于学习内容的
- 下一篇： 我不会选IPad当电子书用 - 原因有二