CSS浮动+伪类实现导航栏下拉功能

最新推荐文章于 2024-04-02 15:14:48 发布

前端菜菜阿海

最新推荐文章于 2024-04-02 15:14:48 发布

阅读量1.4k

点赞数 2

分类专栏：前端学习手记文章标签： html css

本文链接：https://blog.csdn.net/zxh996/article/details/118444486

版权

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: left;
            width: 100px;
            heigh

最低0.47元/天解锁文章

前端菜菜阿海

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
2
评论
CSS浮动+伪类实现导航栏下拉功能

CSS浮动+伪类实现导航栏下拉功能前言一、浮动二、伪类三、导航栏下拉案例总结前言在前端的学习中，浮动和伪类算是使用的较为频繁的属性，我在这篇文章中，将为大家简单介绍一下，并用一个导航栏案例加深学习的印象，仅供参考学习。一、浮动浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。 <style> div { /*设置左浮动*/
复制链接

扫一扫