CSS导航菜单(一级菜单)
index.html
<div class="nav">
<ul>
<li><a href="#">Java</a></li>
<li><a href="#">C#</a></li>
<li><a href="#">Python</a></li>
<li><a href="#">Go</a></li>
<li><a href="#">Delphi</a></li>
</ul>
</div>
请看注释 style.scss
.nav {
//导航栏高度
height: 40px;
//导航栏宽度
width: 420px;
//导航栏角度
border-radius: 5px;
//导航栏阴影
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
ul {
li {
//显示方式:inline行内但不能设置大小
display: inline;
//取消list前边的点
list-style: none;
a {
//显示方式inline-block一行显示并可设置大小
display: inline-block;
//链接高度
height: 40px;
//链接宽度
width: 60px;
//文字对齐方式:居中
text-align: center;
//取消链接下划线
text-decoration: none;
//文字颜色
color: #333;
//行高度加上可设置文字上下居中对齐
line-height: 40px;
//过渡效果,这样鼠标移动上后颜色变换没那么生硬
transition: background-color linear 0.2s;
//鼠标移动上去以后的效果
&:hover {
//背景颜色
background-color: royalblue;
//文字颜色
color: #fff;
}
}
}
}
}
效果
CSS导航菜单(一级菜单)的更多相关文章
- 布局分析002:入门级的CSS导航弹出菜单
这种弹出菜单非常有意思,也有记录的意义,甚至可以说,掌握了这种弹出菜单,基本上CSS掌握的差不多. 主要涉及下面三个重要知识: CSS的继承性质. relative absolute定位. 子选择符& ...
- 纯CSS实现二级导航下拉菜单--css的简单应用
思想:使用css的display属性控制二级下拉菜单的显示与否.当鼠标移动到一级导航菜单的li标签时,显示二级导航菜单的ul标签.由于实现起来比较简单,所以在这里直接给出了参考代码. 1.纯CSS二级 ...
- 用原生JS实现的一个导航下拉菜单,下拉菜单的宽度与浏览器视口的宽度一样(js+html+css)
这个导航下拉菜单需要实现的功能是:下拉菜单的宽度与浏览器视口的宽度一样宽:一级导航只有两项,当鼠标移到一级导航上的导航项时,相应的二级导航出现.在本案例中通过改变二级导航的高度来实现二级导航的显示和消 ...
- CSS导航菜单水平居中的多种方法
CSS导航菜单水平居中的多种方法 在网页设计中,水平导航菜单使用是十分广泛的,在CSS样式中,我们一般会用Float元素或是「display:inline-block」来解决.而今天主要讲解如何让未知 ...
- HTML5 div+css导航菜单
HTML5 div+css导航菜单 视频 音乐 小说 故事 作品 阅读 联系
- html和css实现一级菜单和二级菜单学习笔记
实现一级菜单: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> ...
- 强烈推荐一款CSS导航菜单
强烈推荐一款CSS导航菜单,用到政府学校类网站上超级不错,有点类似站长网菜单的味道,只不过颜色不一样而已,这种菜单还不是真正意义上的“下拉”菜单,应该叫滑出菜单吧?反正比较不错,不多说了. <! ...
- 纯洁CSS实现下拉菜单和下拉容器(纯洁CSS导航栏和导航下拉容器)
虽然网上课程似即使案件大同小异,但我还是写,记笔记,也为您提供参考 我希望你能指导批评~~ 首先,我们必须列出ul li 开始我们的导航栏菜单也能说生产: 在下面的页面,我们先建XHTML结构体: & ...
- Django - 权限(5)- 非菜单权限对应的一级菜单展开、面包屑导航
一.非菜单权限对应的一级菜单展开 需求:客户列表和账单列表页面中都有添加按钮,当点击添加客户(或编辑客户.删除客户)时,客户列表所属的一级菜单展开,当点击添加账单(或编辑账单.删除账单)时,账单列表所 ...
- 4 CSS导航栏&下拉菜单&属性选择器&属性和值选择器
CSS导航栏 熟练使用导航栏,对于任何网站都非常重要 使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单 垂直导航栏: <!DOCTYPE html> <html> & ...
随机推荐
- java数据类型和类型得转换
java数据类型 强类型语言 Java是一种强类型得语言,严格要求变量要符合规定,所有变量都必须先定义再使用 java得数据类型分为两大类 值得注意得是String并不是一个数据类型,它是一个类 ...
- Spring Cloud 专题之七:Sleuth 服务跟踪
书接上回: SpringCloud专题之一:Eureka Spring Cloud专题之二:OpenFeign Spring Cloud专题之三:Hystrix Spring Cloud 专题之四:Z ...
- JavaScript-DOM-节点简介与分类
简介 节点(node)是一个网络术语,它表示网络中的一个连接点.一个网络就是由一些节点构成的集合. 在DOM里,文档是由节点构成的集合,此时的节点是文档树上的树枝和树叶. 分类 DOM中包含许多不同类 ...
- 009 FPGA实现网口通信的几种方式【转载】
从硬件上来说,一般PHY芯片为模数混合电路,负责接收电.光这类模拟信号,经过解调和A/D转换后通过MII接口将信号交给MAC芯片进行处理.一般MAC芯片为纯数字电路. 物理层定义了数据传送与接收所需要 ...
- 003 TCP/IP协议详解(一)
TCP/IP TCP/IP 意味着 TCP 和 IP 在一起协同工作. TCP 负责应用软件(比如你的浏览器)和网络软件之间的通信. IP 负责计算机之间的通信. TCP 负责将数据分割并装入 IP ...
- Python小白的数学建模课-18.最小生成树问题
最小生成树(MST)是图论中的基本问题,具有广泛的实际应用,在数学建模中也经常出现. 路线设计.道路规划.官网布局.公交路线.网络设计,都可以转化为最小生成树问题,如要求总线路长度最短.材料最少.成本 ...
- Data-truncation--Incorrect-string-value
修改表中,format_content 字段的字符集为utf8mb4 alter table 表名 modify column format_content longtext character se ...
- 【mysql】mysql逻辑框架简介及show profile说明
1.mysql逻辑框架简介 和其它数据库相比,MySQL 有点与众不同,它的架构可以在多种不同场景中应用并发挥良好作用.主要体现在存储引擎的架构上,插件式的存储引擎架构将查询处理和其它的系统任务以及数 ...
- gdb调试用命令与一般调试方法
示例代码 1 #include <iostream> 2 using namespace std; 3 4 void Print() 5 { 6 cout<<"hel ...
- C# 计算文件的MD5
MD5的作用详见:https://baike.baidu.com/item/MD5/212708?fr=aladdin public static string GetFileMD5(string f ...