整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

HTML+CSS:css元素浮动详解,使用浮动制作导航栏菜单

天这篇文章我们来说一下css的浮动属性(float),给块状元素添加float属性可以使其转变为行内元素,也就是我们所说标签对象浮动居左靠左(float:left)和浮动居右靠右(float:right)。

(1)float使用语法

css的float主要有3个属性值none、left、right,默认为none;具体的使用如下所示:

float:none; (不使用浮动)

float:left; (靠左浮动)

float:right; (靠右浮动)

(2)float使用案例

我们通过案例来实际演练一下float元素的使用技巧。

1、float:left的使用练习

我们这里创建一个导航条,导航条包含首页、关于我们、新闻中心、案例展示等栏目名称。具体的网页代码以及显示效果就如下图所示:

由上图可以看出默认的样式是竖排显示的,但是我们常见的网页导航条都是横排显示的,这时候我们就可以使用float属性来使块状元素转变为行内元素,并让居左显示。

这里我们创建一个宽度为980px的导航条,给子元素(li)添加float的属性并对齐进行填充(padding)以及外间距(margin)的润色。具体的网页代码以及显示效果就如下图所示:

网页中的显示效果:

2、float:right的使用练习

float:right顾名思义用于元素靠右对齐,我们来看下面的一个例子,我们随意写一篇文字,然后文字中插入一张图片并使图片右对齐。

我们再网页中可以看到图片已经浮动到网页的右侧中去了。

好了,本篇文章就给大家说到这里,大家可以注意看下我们使用float之后会出现什么问题,下边文章我们会给大家讲解如何清除float带来的负面影响。


每日金句:你不能拼爹的时候,你就只能去拼命!喜欢我的文章的小伙伴记得关注一下哦,每天将为你更新最新知识。

行效果

运行效果图

技术要点

  • 把元素进行隐藏 display: none;
  • 鼠标经过的伪元素选择器,.user:hover div { display: block; },鼠标经过的时候,把隐藏的元素进行显示;
  • 显示元素的转换;使用dispaly, inline表示转换为行内元素,一行显示;inline-block转换为行内块元素,即有行内元素的特点,又有块级元素的特点;block转换为块级元素,独占一行显示
  • 盒子模型
  • 浮动以及浮动的特点,浮动可以有左浮动或右浮动;float: left;或float: right;

源码

时制作网站导航时,经常用到鼠标悬停展现下拉菜单的效果。在此记录一下实现过程,需支持CSS3浏览器运行。

首先看下实现的效果:


鼠标悬停效果


html部分:

 <ul class="navbar-nav ml-auto">
	<li class="nav-item hvr-underline-from-left nav-item1"><a class="nav-link hvr-icon-spin fa-caret-down" href="/solutions/">建站推广方案</a>
	<div class="list-group shadow-sm ">
		<a class="list-group-item list-group-item-action" href="/solutions/diagnosis/">分析 - 诊断分析/营销定位</a><a class="list-group-item list-group-item-action" href="/solutions/customize/">网站 - 定制品牌营销网站</a><a class="list-group-item list-group-item-action" href="/solutions/sem/">流量 - Google SEM 广告引流</a><a class="list-group-item list-group-item-action" href="/solutions/seo/">转化 - SEO优化+网站运维</a><a class="list-group-item list-group-item-action" href="/solutions/social/">社交 - Facebook/Youtube 运营推广</a><a class="list-group-item list-group-item-action" href="/solutions/training/">培训 - 线上线下课程免费送</a>
	</div>
	</li>
	<li class="nav-item hvr-underline-from-left nav-item2"><a class="nav-link " href="/cases/">成功案例</a>
	</li>
</ul>

重点CSS部分:

.nav-menu .navbar-collapse>.navbar-nav>li>.list-group {
	position: absolute;
	z-index: 1070;
	width: auto;
	left: 0;
	overflow: hidden;
	height: auto;
	max-height: 0;// 最大高度初始为0
	transition: all .3s ease; //效果时间 0.3s
	visibility: hidden;
}
.nav-menu .navbar-collapse>.navbar-nav>li:hover>.list-group,.nav-menu .navbar-collapse>.navbar-nav>li>a:hover +.list-group {
	max-height: 100vh; // 鼠标悬停时最大高度尽量大点,就有向下展开的动画效果
	visibility: visible;
	height: auto;
}

我的代码引用了 bootstrap v4 所以有些class 都是层叠覆盖写法。