CSS之垂直导航条
zhezhongyun 2025-05-25 16:45 3 浏览
今天的内容比较简单，我们来学习一种常见的垂直导航条的实现方法，首先看一下效果图：
1.首先我们创建一个有效的列表
<li> <a href="http://www.？？？.com">首页</a> </li>
<li><a href="http://www.？？？.com">关于我们</a> </li>
<li><a href="http://www.？？？.com">产品展示</a> </li>
<li><a href="http://www.？？？.com">产品知识</a> </li>
<li><a href="http://www.？？？.com">新闻动态</a> </li>
<li><a href="http://www.？？？.com" class="last">联系我们</a></li>
去掉默认的项目符号并将外边距和内边距设置为零：
ul.nav{margin:0;
padding:0
list-style-type:none;}
2.接下来我们给导航设置一个浅色的背景和深色的边框，并给它一定的宽度（根据自己的需要）：
ul.nav{margin:0;
padding:0
list-style-type:none;
background-color:indianred;
border:solid 1px #486B02;
width:8em;}
3.为链接显示文本设置样式，首先设置文本的颜色并关闭下划线，使文本居中对齐，接着为了使每个链接看起来像一个独立的区块需要设置一下边框，让边框顶部的颜色比背景颜色浅一点边框底部颜色比背景颜色深深一点，除此之外还需要把它的display属性设置为block,目的是让其成为块级元素，这样宽度会与列表背景宽度保持一致（下图展示了它们之间区别）
ul.nav{margin:0;
padding:0
list-style-type:none;
background-color:indianred;
border:solid 1px #486B02;
width:8em;}
ul.nav a{display：block;
color:#2B3F00;
text-align:center;
text-decoration:none;
border-top:1px solid #E4FFD3;
border-bottom:1px solid #486B02;}
4.现在看起来已经有点像一个垂直导航条了，但最后一个链接的底边框与列表的第边框貌似重合了，这里我们可以把最后一个链接的底边框设置成与它的顶边框一致的颜色就可以了。最后我们来完成鼠标悬停时的效果，这是就要用到：hover了，为此只需要修改一下背景和文本颜色就可以了。
ul.nav{margin:0;
padding:0
list-style-type:none;
background-color:indianred;
border:solid 1px #486B02;
width:8em;}
ul.nav a{display：block;
color:#2B3F00;
text-align:center;
text-decoration:none;
border-top:1px solid #E4FFD3;
border-bottom:1px solid #486B02;}
ul.nav a.last{border-bottom: 1px solid #E4FFD3}
ul.nav a:hover{color:#E4FFD3;
background-color:mediumvioletred;}
相关推荐
- 带你看好玩的CSS-霓虹灯按钮
-
对于前端开发人员来说，css是我们再熟悉不过的朋友的，它就相当于是我们页面的衣服，页面好不好看，就看我们css运用的是否炉火纯青。css学起来简单，但是我们要把它“修炼”到出神入化境界，那这可不是一丁...
- 自动生成的静态代码示例
-
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/...
- 如何用代码快速制作营销网站底部广告?
-
当前在很多的旅游网站，底部固定广告已经成为一种常见的形式，可以参看下图。以途牛为例，下边我们一起来说一下整个制作流程显然底部是固定定位的盒子，并且是分为两组，一组为显示状态下，一组为隐藏状态下，并且通...
- CSS中清除浮动的几种方法，快来学习一下吧
-
前言首先我们通过一张图来解释下元素浮动是什么样的状态。元素浮动情况上图的html部分代码为：html代码css部分代码为：css代码通过上面的图片可以看出，当内部的div设置float后，外部的元素的...
- css reset 标签属性默认值
-
在现在的网站设计中使用reset.css用重置整个站点的标签的CSS属性的做法很常见，但有时候我们已经为了reset而reset，我们经常看到这样的reset代码其实大部分CSSreset是没必要...
- CSS实现溢出显示省略号
-
小伙伴们，对于省略号呢，咱们前端攻城狮的实现方法可就是多种多样了，那接下来呢我就给你罗列一下如果用css书写这些特殊效果，来一起看看吧~~~1.单行文本超出显示省略号效果图：实现代码:HTML部分&l...
- CSS 基础大揭秘:打造酷炫网页的魔法钥匙
-
在当今这个数字化时代，网页已经成为我们生活中不可或缺的一部分。无论是购物、学习还是娱乐，我们每天都会与各种各样的网页打交道。而你是否曾好奇，那些设计精美的网页是如何实现的呢？今天，我们就来揭开网页设计...
- 治愈焦虑!清晨两道 CSS 面试题，轻松开启元气学习日
-
晨光透过窗户洒在键盘上，又是充满希望的一天。前端的小伙伴们，在忙碌的工作和面试压力下，不妨趁着清晨和上午这段宁静时光，静下心来，和我一起解锁CSS的奇妙世界。今天咱们就用两道高频面试题，开启元气满...
- 浅谈position中absolute和relative
-
CSSposition属性中absolute和relative很容易让人弄混，基本的概念什么着，你去参考W3C，就不啰嗦了--------------------------------------...
- Highcharts基础教程(二):图表配置
-
一、图表容器Highcharts实例化中绑定容器的方式有两种：1.通过dom调用highcharts函数的方式$("#container").highcharts({//...
- CSS之垂直导航条
-
今天的内容比较简单，我们来学习一种常见的垂直导航条的实现方法，首先看一下效果图：1.首先我们创建一个有效的列表<li><ahref="http://www.？？？.com">...
- Inkscape 1.4 新功能介绍
-
各位Inkscape爱好者们，备受期待的Inkscape1.4版本已经正式发布，现在就可以从Inkscape官网下载体验了！这次更新带来了许多强大的新功能和改进，旨在提升你的矢量图形编辑...
- 前端内功修炼:5大主流布局系统进阶
-
获课：keyouit.xyz/14642/前端布局进阶：从盒模型到弹性布局，深入解析5大主流布局系统核心原理前端布局是构建用户界面的基石，理解不同布局系统的底层逻辑和适用场景对于开发高效、可维护的...
- MVP最小可用产品实践:用Pywebio库写一个接口加解密的小工具
-
背景最近在接口测试的过程中，由于请求报文需要先进行加密再发起请求，响应报文也需要先解密才能提取指定字段的返回值传递给下一个接口，每次都要通过代码运行相应的加/解密方法进行解析，操作起来特别麻烦，所以我...
- 网易的互动版涂小瓶子爆火，究竟是如何做到的?
-
https://mp.weixin.qq.com/s/5vmXPBWcJZ_oZ4p1znNNLw附上爆火图文链接，复制打开即可查看其实最开始看见的时候没想到这个小小的瓶子会这么火，现在的SVG交互图...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 教程 (33)
- HTML 简介 (35)
- HTML 实例/测验 (32)
- HTML 测验 (32)
- HTML 参考手册 (28)
- JavaScript 和 HTML DOM 参考手册 (32)
- HTML 拓展阅读 (30)
- HTML常用标签 (29)
- HTML文本框样式 (31)
- HTML滚动条样式 (34)
- HTML5 浏览器支持 (33)
- HTML5 新元素 (33)
- HTML5 WebSocket (30)
- HTML5 代码规范 (32)
- HTML5 标签 (717)
- HTML5 标签 (已废弃) (75)
- HTML5电子书 (32)
- HTML5开发工具 (34)
- HTML5小游戏源码 (34)
- HTML5模板下载 (30)
- HTTP 状态消息 (33)
- HTTP 方法：GET 对比 POST (33)
- 键盘快捷键 (35)
- 标签 (226)
- HTML button formtarget 属性 (30)