CSS浮动+伪类实现导航栏下拉功能
CSS浮动+伪类实现导航栏下拉功能
- 前言
- 一、浮动
- 二、伪类
- 三、导航栏下拉案例
- 总结
前言
在前端的学习中，浮动和伪类算是使用的较为频繁的属性，我在这篇文章中，将为大家简单介绍一下，并用一个导航栏案例加深学习的印象，仅供参考学习。
一、浮动
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
<style>div {/*设置左浮动*/float: left;width: 100px;height: 100px;background-color: pink;margin: 15px;}style>
head>
<body>
<div>div>
<div>div>
<div>div>
body>
记住：已经浮动的元素在文档流中不占位置，如同背景一样，下面的元素会占据浮动元素的位置，所以记得在最后清除浮动
示例如下：
<style>div {float本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！