天这篇文章我们来说一下css的浮动属性(float),给块状元素添加float属性可以使其转变为行内元素,也就是我们所说标签对象浮动居左靠左(float:left)和浮动居右靠右(float:right)。
css的float主要有3个属性值none、left、right,默认为none;具体的使用如下所示:
float:none; (不使用浮动)
float:left; (靠左浮动)
float:right; (靠右浮动)
我们通过案例来实际演练一下float元素的使用技巧。
1、float:left的使用练习
我们这里创建一个导航条,导航条包含首页、关于我们、新闻中心、案例展示等栏目名称。具体的网页代码以及显示效果就如下图所示:
由上图可以看出默认的样式是竖排显示的,但是我们常见的网页导航条都是横排显示的,这时候我们就可以使用float属性来使块状元素转变为行内元素,并让居左显示。
这里我们创建一个宽度为980px的导航条,给子元素(li)添加float的属性并对齐进行填充(padding)以及外间距(margin)的润色。具体的网页代码以及显示效果就如下图所示:
网页中的显示效果:
2、float:right的使用练习
float:right顾名思义用于元素靠右对齐,我们来看下面的一个例子,我们随意写一篇文字,然后文字中插入一张图片并使图片右对齐。
我们再网页中可以看到图片已经浮动到网页的右侧中去了。
好了,本篇文章就给大家说到这里,大家可以注意看下我们使用float之后会出现什么问题,下边文章我们会给大家讲解如何清除float带来的负面影响。
每日金句:你不能拼爹的时候,你就只能去拼命!喜欢我的文章的小伙伴记得关注一下哦,每天将为你更新最新知识。
运行效果图
时制作网站导航时,经常用到鼠标悬停展现下拉菜单的效果。在此记录一下实现过程,需支持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 都是层叠覆盖写法。
*请认真填写需求信息,我们会在24小时内与您取得联系。