CSS3构建左侧导航栏

废话不说，先上图

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>设计左侧导航栏</title><style>a{text-decoration: none;/*去掉字下划线*/margin: 0 30px;color: white;}nav{width: 300px;height: 400px;}li{background-color: rgba(0,0,0,0.7);/*0.7表示透明度*/overflow: hidden;/*隐藏圆点*/line-height: 40px;/*行高*/}li:nth-of-type(2n){/*2n表示偶数行*/background-color: rgba(0,0,0,0.9);}li:hover{/*hover表示鼠标放上去之后的变化*/background-color: cadetblue;}</style>
</head>
<body>
<nav><ul><li><a href="#" ><span>JavaEE培训</span></a></li><li><a href="#" ><span>Android培训</span></a></li><li><a href="#" ><span>PHP培训</span></a></li><li><a href="#" ><span>UI设计培训</span></a></li><li><a href="#" ><span>iOS培训</span></a></li><li><a href="#" ><span>前端与移动开发培训</span></a></li><li><a href="#" ><span>C/C++培训</span></a></li><li><a href="#" ><span>网络营销培训</span></a></li><li><a href="#" ><span>游戏开发培训</span></a></li><li><a href="#" ><span>云计算之大数据培训</span></a></li></ul>
</nav>
</body>
</html>

CSS3构建左侧导航栏相关推荐

HTML5+CSS3学习笔记（三）文档流和盒子模型【附练习：图片列表、左侧导航栏】
HTML5+CSS3学习笔记(三) 本系列更多文章,可以查看专栏 HTML+CSS学习笔记文章目录 HTML5+CSS3学习笔记(三) 一.CSS布局 1. 文档流(块级元素.行内元素.行内块元素) ...
点击左侧导航栏切换右侧商品（左右联动）
点击左侧导航栏切换右侧商品(左右联动) 菜单栏主要以 A,B,C,D等字母为主,即A,B,C,D等字母为对应该项携带的 id(id不能为汉字或纯数字). 实现该功能的思路:通过点击左侧滑栏的某一项,获 ...
vue项目中处理左侧导航栏问题的分享
2019独角兽企业重金招聘Python工程师标准>>> 相信左侧导航栏大家都不陌生,几乎每个项目都会存在.以前用jquery做的时候,某些本不是什么问题的地方就突然变成阻碍了.下面就 ...
xcode 左侧导航栏 no finder results 问题的解决方法
第一天使用xcode就遇到个很郁闷的问题,刚建的新工程,不知道怎么操作了,左侧导航栏的文件夹和文件等资源都没有了,只显示个"no finder results",试了各种方法都弄不 ...
基于CarSystemUI实现左侧导航栏NavigationBar及下拉面板定制开发1——Android10智能座舱
文章目录前言一.需求说明二.修改方案 1.基于需求的两种设计构想 2.修改正确的高度及宽度三.CarSystemUI 1.CarOS框架关于CarSystemUI的介绍 2.替换CarSyst ...
layui模块显示收缩_修改layui的后台模板的左侧导航栏可以伸缩的方法
原生的左侧导航栏代码: 所有商品列表一列表二列表三超链接解决方案列表一列表二超链接云市场发布商品自己修改的: 生源追踪生源列表学校信息工做计划学员管理学员列表考勤管理 ...
后台管理页面通过点击左侧导航栏的菜单项实现右边内容的改变
目录前端页面部分 js代码部分左侧导航栏组菜单项的打开与关闭 url地址跳转地址栏url地址处理 ajax实现右边页面内容变换内容面板上Bootstrap 面包屑导航前端页面部分 <a ...
9.后台管理系统主页面布局以及左侧导航栏设计
9.后台管理系统主页面布局以及左侧导航栏设计 1.首页布局步骤: 在views目录下新建Main.vue文件,作为登录之后的布局参考:element-ui 使用此模块的目的是,当中间内容部分有超出 ...
尚硅谷前端-京东左侧导航栏及网易新闻列表练习——CSS
跟着尚硅谷老师的练习,记录一下自己做的内容,查漏补缺. 目录一.京东左侧导航栏 1.第一次自己做的代码(未看老师讲解视频前做的): 总结: 2.看完老师视频后跟着写的代码: 注意点及总结删除行内元 ...

CSS3构建左侧导航栏

CSS3构建左侧导航栏相关推荐

最新文章

热门文章