CSS-导航栏

最新推荐文章于 2023-01-19 14:28:43 发布
最新推荐文章于 2023-01-19 14:28:43 发布
阅读量311 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ZzStant/article/details/102663581
版权

文章目录

1.垂直导航栏

作为标准的HTML基础一个导航栏是必须的。在我们的例子中我们将建立一个标准的HTML列表导航栏。导航条基本上是一个链接列表，所以使用 <ul> 和 <li>元素非常有意义：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>垂直导航栏</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:hover {
    background-color: #555;
    color: white;
}
</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>

<p>背景颜色添加到链接中显示链接的区域</p>
<p>注意,整个区域是可点击的链接,而不仅仅是文本。</p>
</body>
</html>

在这里插入图片描述
说明：
display:block - 显示块元素的链接，让整体变为可点击链接区域（不只是文本），它允许我们指定宽度
width:60px - 块元素默认情况下是最大宽度。我们要指定一个60像素的宽度

2.激活当前导航条

在点击了选项后，我们可以添加 “active” 类来标准哪个选项被选中：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></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;
}

li a:hover:not(.active) {
    background-color: #555;
    color: white;
}
</style>
</head>
<body>

<h2>垂直导航条</h2>
<p>在点击了选项后，我们可以添加 "active" 类来标准哪个选项被选中。</p>

<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>

在这里插入图片描述

3.创建连接并添加边框

可以在 <li> or <a> 上添加text-align:center 样式来让链接居中。
可以在 border <ul> 上添加 border 属性来让导航栏有边框。如果要在每个选项上添加边框，可以在每个 <li> 元素上添加border-bottom :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></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>

<h2>垂直导航条</h2>
<p>以下实例让每个链接居中，并给每个列表选项添加边框。</p>

<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.全屏高度的固定导航条

接下来我们创建一个左边是全屏高度的固定导航条，右边是可滚动的内容。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></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>Fixed Full-height Side Nav</h2>
  <h3>Try to scroll this area, and see how the sidenav sticks to the page</h3>
  <p>Notice that this div element has a left margin of 25%. This is because the side navigation is set to 25% width. If you remove the margin, the sidenav will overlay/sit on top of this div.</p>
  <p>Also notice that we have set overflow:auto to sidenav. This will add a scrollbar when the sidenav is too long (for example if it has over 50 links inside of it).</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>

在这里插入图片描述

Zz一半
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS导航栏
weixin_43535265的博客
03-11 1491
易用的导航对于任何网站都很重要。 通过使用 CSS，您可以将无聊的 HTML 菜单转换为美观的导航栏。 导航栏 = 链接列表 导航栏需要标准 HTML 作为基础。 在我们的实例中，将用标准的 HTML 列表构建导航栏。 导航栏基本上就是链接列表，因此使用 <ul> 和 <li> 元素会很有意义。 一、垂直导航栏 创建背景色为灰色的基础垂直导航栏，并在用户将鼠标移到链接上时改变链接的背景色： 代码如下： <!DOCTYPE html> <html> <he
css制作导航栏
11-10 1010
下面是用css如何制作一个导航栏: html代码如下：
导航目录（DIV和CSS）
05-14
竖排目录导航，自动浮现二级目录，DIV和CSS
css3 过渡状态栏
老段的CSDN的博客
01-19 113
是从一个状态 渐渐的过渡到另一个状态可以让我们页面更好看,更动感十足,虽然 低版本浏览器不支持(ie9以下版本)但是不会影响页面布局。1、属性:想要变化从css属性,宽度高度 背景颜色 奶外边距都可以。如果想要所有的属性都变化过渡,写一个all就可以。4、何时开始:单位是秒(必须写单位)可以设置延迟触发时间 默认是0s (可以省略)transition:要过渡的属性 花费时间 运动曲线 何时开始；3、运动曲线:默认是ease(可以省略)
【CSS】百度百科状态栏
weixin_39415598的博客
03-06 114
订阅号：rabbit_svip image.png “简书”不能发动图，把代码考下来运行一下就能动啦，或者看看订阅号上的动图。 我是通过flex来布局的。 HTML代码 <div class="top-bar"> 这里是头部 </div> <div class="nav-bar"> &...
左侧目录树右面主界面html,css实现的目录树型导航菜单
weixin_39526872的博客
05-31 316
css实现的目录树型导航菜单 ul { padding:0; margin:0;} #main1,#main2 { width:100px; height:28px; line-height:28px; padding-left:5px; background:#ccc; cursor:pointer; border-bottom:1px solid #fff;} #child1,#...
HTML+CSS - 导航栏下拉菜单
最新发布
12-20
HTML 和 CSS 是构建网页设计的基础，其中导航栏和下拉菜单是网站布局中不可或缺的部分。在本主题中，我们将深入探讨如何使用 HTML 结构和 CSS 样式来创建功能完善的导航栏下拉菜单。 首先，HTML 结构是构建下拉菜单...
html+css侧边伸缩导航栏
01-26
4. 使用 CSS 选择器和媒体查询控制导航栏在不同屏幕尺寸下的行为。 5. 考虑交互效果，提升用户体验。 通过熟练掌握这些技术，你可以轻松创建出一个功能强大且美观的侧边伸缩导航栏，为你的网站增添更多亮点。
纯CSS实现导航栏Tab切换效果
09-27
在当前网页设计中，实现Tab切换效果通常需要借助JavaScript等脚本语言，但是使用纯CSS同样能够完成这种效果。首先，要了解的关键概念是CSS3中的:target伪类。:target伪类是一个选择器，用于选取URL中ID与锚点匹配的...
纯CSS实现导航栏下划线跟随滑动效果
09-27
在网页设计中，创建动态且交互性强的用户体验是至关重要的，纯CSS实现导航栏下划线跟随滑动效果就是这样一个例子。这种效果能够增加用户对导航栏的感知，提升网站的交互性。通过CSS，我们可以避免使用JavaScript，...
H5学习之22 CSS-导航栏的创建
qq_29469941的博客
08-05 5293
html> lang="en"> charset="UTF-8"> ul { list-style-type: none; /* 标记项类型*/ margin: 0px; padding: 0; } .chuizhi a:link, .chui
网页状态栏图标html代码,利用CSS实现几款不错的菜单栏实例代码
weixin_42533120的博客
05-30 1455
前言其实前端那些事蛮有意思的，HTML实现的是静态的，使用ajax之后就可以和数据库交互了，加上js和jQuery之后就动起来了，加上CSS之后就更加炫酷了。因为项目中需要，查资料和编写了一些炫酷的二级菜单，分享给大家，好东西就要分享嘛！一、滑动菜单1、代码：纯CSS3垂直菜单 菜单项滑动动画DEMO演示body {background-color:#282828;}.demo {margin: ...
css 实现简单导航栏
艾斯比
06-12 566
css 实现简单导航栏 注意点 设置 ul 的 list-style:none; 去掉左边圆点 li 浮动 float: left; 使所有 li 都在同一行 父元素 ul 设置 overflow:hidden; 避免由于子元素浮动, 导致父元素高度塌陷 a 元素设置 text-decoration: none; 去掉下划线样式 设置 a 元素为块元素 display: block; 才能设置其宽度 <!DOCTYPE html> <html lang="en"> <hea
iOS开发之设置导航栏为全透明，且去掉边框黑线
Star__shine的博客
05-11 2593
设置导航栏为全透明，且去掉边框黑线
设置导航栏背景颜色 去除导航栏的下边线
chenzheiu1210的博客
04-27 868
self.navigationController.navigationBar.barTintColor = RGB_COLOR(85, 85, 85);     [self.navigationController.navigationBar setBackgroundImage:[[UIImage alloc] init] forBarMetrics:UIBarMetri
html中 导航条消除代码,好东西～导航条HTML代码
weixin_39577908的博客
06-07 267
注：看不懂没关系，复制到DW里看看效果哦~~~横向菜单td {FONT-SIZE: 13px; COLOR: #000000; LINE-HEIGHT: 22px;}div{background-color:#669933;text-align:center;position:absolute;z-index:2;display:none; }A {FONT-SIZE: 13px; COLOR: ...
css去掉滚动条
持续疯长，往天那边去
05-31 527
html,body { overflow:hidden; overflow-x:hidden; overflow-y:hidden; }
css怎么去掉滚动条滑块,css如何去掉滚动条样式
weixin_28224217的博客
08-03 9125
css去掉滚动条样式的方法是，给滚动条设置【overflow:hidden】样式，将滚动条完全隐藏即可，例如【::-webkit-scrollbar {display: none; /* Chrome Safari */}】。本文操作环境：windows10系统、css 3、thinkpad t480电脑。如果我们想要去掉滚动条样式，其实可以选择将他们隐藏，从而达到去除滚动条的目的。如果需要隐藏滚...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值