CSS学习笔记(十二)CSS 水平导航栏
CSS 水平导航栏
水平导航栏
有两种创建水平导航栏的方法:使用行内或浮动列表项。
行内列表项
构建水平导航栏的一种方法是,除了上一章中的“标准”代码外,还要将 <li>
元素指定为 inline
:
实例
li {display: inline;
}
例子解释:
display: inline;
-默认情况下,<li>
元素是块元素。在这里,我们删除每个列表项之前和之后的换行符,这样它们才能显示在一行。
浮动列表项
创建水平导航栏的另一种方法是浮动
- 元素,并为导航链接规定布局:
实例 li {float: left; }a {display: block;padding: 8px;background-color: #dddddd; }
例子解释:
float: left;
- 使用 float 使块元素滑动为彼此相邻
display: block;
- 将链接显示为块元素可以使整个链接区域都可单击(不仅是文本),而且允许我们指定填充(如果需要,还可以指定高度,宽度,边距等)
padding: 8px;
- 使块元素更美观
background-color: #dddddd;
- 为每个元素添加灰色背景色
提示:如需全宽的背景色,请将background-color
添加到<ul>
而不是每个<a>
元素:
实例ul {background-color: #dddddd; }
水平导航栏实例
创建具有深色背景色的基础水平导航栏,并在用户将鼠标移到链接上方时改变链接的背景色:
实例ul {list-style-type: none;margin: 0;padding: 0;overflow: hidden;background-color: #333; }li {float: left; }li a {display: block;color: white;text-align: center;padding: 14px 16px;text-decoration: none; }/* 当鼠标悬停时把链接颜色更改为 #111(黑色) */ li a:hover {background-color: #111; }
活动/当前导航链接
向当前链接添加 “active” 类,这样用户就知道他/她在哪个页面上:
实例.active {background-color: #4CAF50; }
右对齐链接
通过将列表项向右浮动来右对齐链接(
float:right;
):
实例<ul><li><a href="#home">Home</a></li><li><a href="#news">News</a></li><li><a href="#contact">Contact</a></li><li style="float:right"><a class="active" href="#about">About</a></li> </ul>
边框分隔栏
将
border-right
属性添加到<li>
,以创建链接分隔符:
实例/* 为所有列表项添加灰色右边框,最后一项(last-child)除外 */ li {border-right: 1px solid #bbb; }li:last-child {border-right: none; }
固定的导航栏
使导航栏保持在页面的顶部或底部,即使用户滚动页面也是如此:
固定在顶部ul {position: fixed;top: 0;width: 100%; }
固定在底部
ul {position: fixed;bottom: 0;width: 100%; }
注意:固定定位在移动设备上可能无法正常工作。
灰色水平导航栏
带有细灰色边框的灰色水平导航栏的实例
实例
ul {border: 1px solid #e7e7e7;background-color: #f3f3f3; }li a {color: #666; }
粘性导航栏
为
<ul>
添加position: sticky;
,以创建粘性导航栏。粘性元素会根据滚动位置在相对和固定之间切换。它是相对定位的,直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置(比如
position:fixed
)。
实例ul {position: -webkit-sticky; /* Safari */position: sticky;top: 0; }
CSS学习笔记(十二)CSS 水平导航栏相关推荐
- Python语言入门这一篇就够了-学习笔记(十二万字)
Python语言入门这一篇就够了-学习笔记(十二万字) 友情提示:先关注收藏,再查看,12万字保姆级 Python语言从入门到精通教程. 文章目录 Python语言入门这一篇就够了-学习笔记(十二万字 ...
- HTML/CSS学习笔记03【CSS概述、CSS选择器、CSS属性、CSS案例-注册页面】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
- 吴恩达《机器学习》学习笔记十二——机器学习系统
吴恩达<机器学习>学习笔记十二--机器学习系统 一.设计机器学习系统的思想 1.快速实现+绘制学习曲线--寻找重点优化的方向 2.误差分析 3.数值估计 二.偏斜类问题(类别不均衡) 三. ...
- ROS学习笔记十二:使用roswtf
ROS学习笔记十二:使用roswtf 在使用ROS过程中,roswtf工具可以为我们提供ROS系统是否正常工作的检查作用. 注意:在进行下列操作之前,请确保roscore没有运行. 检查ROS是否安装 ...
- Polyworks脚本开发学习笔记(十二)-输出和读取文本文件
Polyworks脚本开发学习笔记(十二)-输出和读取文本文件 Polyworks作为一个测量工具,将测量的数据方便的导出到文本文件则是一项必须的功能.在DATA_FILE这个命令下提供了很多子命令用 ...
- OpenCV学习笔记(十二)——图像分割与提取
在图像处理的过程中,经常需要从图像中将前景对象作为目标图像分割或者提取出来.例如,在视频监控中,观测到的是固定背景下的视频内容,而我们对背景本身并无兴趣,感兴趣的是背景中出现的车辆.行人或者其他对象. ...
- 【现代机器人学】学习笔记十二:轮式移动机器人
目录 轮式机器人类型 全向轮式机器人 建模 单个全向轮是怎么运动的 多个全向轮是如何带动底盘运动的 运动规划和反馈控制 非完整约束轮式移动机器人 建模 独轮车 差速驱动机器人 车型机器人 非完整移动机 ...
- CSS学习笔记(二十一)CSS变量var()
CSS 变量 CSS 变量 var() 函数用于插入 CSS 变量的值. CSS 变量可以访问 DOM,这意味着您可以创建具有局部或全局范围的变量,使用 JavaScript 来修改变量,以及基于媒体 ...
- Vue.js 学习笔记十二:Vue CLI 之创建一个项目
目录 创建一个项目 创建一个项目 运行以下命令来创建一个新项目: vue create vuecli-demo 你会被提示选取一个 preset.你可以选默认的包含了基本的 Babel + ESLin ...
- 【theano-windows】学习笔记十二——卷积神经网络
前言 按照进度, 学习theano中的卷积操作 国际惯例, 来一波参考网址 Convolutional Neural Networks (LeNet) 卷积神经网络如何应用在彩色图像上? 卷积小知识 ...
最新文章
- 使用jquery文件上传控件Uploadify来异步上传图片
- 【杂谈】来自一个懵懂青年的表白!
- mogodb 的自定义函数定义及引用
- python整体缩进笔记_python笔记1
- 线段分割法实现微信抢红包
- CSS基础「五」定位
- 【Hive】数据导入方法
- java数组实现队列
- python随机生成6位数验证码
- 越界操作导致程序崩溃的原理
- 推荐几个Linux镜像下载网站
- Java Web图书管理系统总结(jsp+servlet+jdbc+javabean+dao)
- php命令行生成文件,php命令行生成与读取配置文件
- CBR编码与VBR编码
- Qml使用阿里字体图标库及FontAwesome字体图标库
- Vue.js:从安装到快速创建脚手架项目,解决刚创建完出现的parsing error:No Bable config file detected报错
- 【微信公众号● DBAplus】Oracle原厂老兵:从负面案例看Hint的最佳使用方式
- 【SQL Server】入门教程-基础篇(三)
- Font Awesome介绍
- 基于android的美食食谱分享推荐系统app