CSS导航栏的实现（水平的、垂直的、固定的、粘贴的、响应式，下拉菜单导航栏实现案例）

您所在的位置：网站首页 › 底部导航栏怎么固定 › CSS导航栏的实现（水平的、垂直的、固定的、粘贴的、响应式，下拉菜单导航栏实现案例）

CSS导航栏的实现（水平的、垂直的、固定的、粘贴的、响应式，下拉菜单导航栏实现案例）

2023-07-23 11:09| 来源: 网络整理| 查看: 265

0. 导航栏

导航栏实际上包括了列表，超链接，定位，下拉菜单，等内容，统一以导航栏为主体学习他们的样式。

1. 垂直导航栏垂直导航栏使用到的是垂直列表设置导航栏的背景色为gray灰色设置正常字体为黑色，悬停字体为白色设置导航栏悬停时更改背景色为green绿色将列表项中的超链接设置为有合适长度和宽度的元素添加激活列表项始终是背景色为green绿色，字体白色将超链接中的的文本内容居中添加超链接的边框在原来导航栏的基础上可以将导航栏设置为高度百分之百，宽度固定

创建具有灰色背景色的基本垂直导航栏，并在用户将鼠标移到链接上方时更改链接的背景色：

2. 水平深色导航栏

创建水平导航栏，可以使用inline和float两种方式将列表项设置为内联元素默认情况下，元素是块元素。在这里，我们删除每个列表项之前和之后的换行符，以将其显示在一行上

创建水平导航栏的另一种方法是浮动元素，并为导航链接指定布局：

创建具有深色背景色的基本水平导航栏，并在用户将鼠标移到链接上方时更改链接的背景色：

Add an “active” class to the current link to let the user know which page he/she is on: 通过将列表项向右浮动来右对齐链接（float：right;）：解决将border-right属性添加到以创建链接分隔符：

最终的深色水平导航栏效果图：

在这里插入图片描述 html.code

Title ul { padding: 0px; margin: 0px; list-style-type: none; background-color: #333; /*border: 1px solid black;*/ overflow: hidden; } li { float: left; /*border: 1px solid black;*/ } a { color: white; display: block; padding: 14px 16px; text-decoration: none; } a:hover:not(.active) { background-color: #111; } .active { background-color: #4CAF50; } li { border-right: 1px solid #bbb; } li:last-child { border-right: none; } 主页新闻联系方式关于 3. 固定导航栏

使导航栏保持在页面顶部或底部，即使用户滚动页面也是如此：

注意：固定位置(fixed position)在移动设备上可能无法正常工作。

/*浏览器顶部固定导航栏*/ /*position: fixed;*/ /*top: 0px;*/ /*width: 100%;*/ /* 浏览器的底部定位导航栏*/ position: fixed; bottom: 0px; width: 100%; 4. 水平灰色导航栏

在这里插入图片描述

5. 粘性导航栏

Add position: sticky; to to create a sticky navbar.创建粘性导航栏

粘性元素根据滚动位置在相对和固定之间切换。它将相对定位，直到在视口中遇到给定的偏移位置为止-然后将其“粘贴”在适当的位置（例如position：fixed）。

position:sticky; top:0px;

效果图：在这里插入图片描述注意：Internet Explorer不支持粘性定位。 Safari需要-webkit-前缀。您还必须指定顶部，右侧，底部或左侧中的至少一个属性，以使粘性定位起作用。

6. 响应式顶部导航栏

在前面水平导航栏的基础上，导航栏是使用浮动设计的，那么响应式的时候添加如下代码(响应的时候清除浮动)实现响应式

@media screen and (max-width: 600px) { li { float: none; }

响应前在这里插入图片描述

当屏幕小于600的响应后：

在这里插入图片描述

7. 响应式侧边导航栏

正常效果：在这里插入图片描述当屏幕小于900时响应：

当屏幕小于600时响应：在这里插入图片描述

html.code

Title html { margin: 0px; padding: 0px; } body { margin: 0px; padding: 0px; } ul { padding: 0px; margin: 0px; list-style-type: none; border: 1px solid #e7e7e7; background-color: #f3f3f3; /*解决父级元素塌陷问题*/ overflow: hidden; /*顶部粘性定位导航栏*/ position: sticky; top: 0px; } li { float: left; /*border: 1px solid black;*/ } a { color: #666; display: block; padding: 14px 16px; text-decoration: none; text-align: center; } a:hover:not(.active) { /*background-color: #111;*/ background-color: #ddd; } .active { background-color: #4CAF50; } li { /*border-right: 1px solid #bbb;*/ } li:last-child { /*border-right: none;*/ } @media screen and (max-width: 600px) { li { float: none; } } Scroll Down Scroll down to see the sticky effect. 主页新闻联系方式关于 zhandonghong zhandonghong zhandonghong zhandonghong zhandonghong zhandonghong zhandonghong zhandonghong zhandonghong zhandonghong zhandonghong zhandonghong zhandonghong zhandonghong zhandonghong zhandonghong zhandonghong zhandonghong zhandonghong zhandonghong zhandonghong zhandonghong zhandonghong zhandonghong zhandonghong zhandonghong zhandonghong zhandonghong zhandonghong zhandonghong zhandonghong zhandonghong zhandonghong zhandonghong zhandonghong zhandonghong zhandonghong zhandonghong zhandonghong zhandonghong zhandonghong zhandonghong zhandonghong zhandonghong zhandonghong zhandonghong zhandonghong zhandonghong zhandonghong zhandonghong zhandonghong zhandonghong zhandonghong zhandonghong zhandonghong zhandonghong 8. 下拉菜单导航栏

效果: 在这里插入图片描述

9. 下拉悬停菜单

使用CSS创建一个可悬停的下拉列表。

在这里插入图片描述

code:

Title .dropDown { position: relative; display: inline-block; } .dropDown-content { min-width: 160px; background-color: #f9f9f9; display: none; position: absolute; } .dropDown-content a { color: black; display: block; /*border: 1px solid black;*/ padding: 12px 16px; text-decoration: none; } .dropbtn { padding: 14px 16px; font-size: 16px; background-color: #4CAF50; border: none; color: white; } .dropDown:hover .dropDown-content { display: block; } .dropDown-content a:hover { background-color: #f1f1f1 } Dropdown link link link link

zhandonghong

【本文地址】

CSS导航栏的实现（水平的、垂直的、固定的、粘贴的、响应式，下拉菜单导航栏实现案例）

CSS导航栏的实现（水平的、垂直的、固定的、粘贴的、响应式，下拉菜单导航栏实现案例）

今日新闻

推荐新闻