整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
天这篇文章我们来说一下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带来的负面影响。
每日金句：你不能拼爹的时候，你就只能去拼命！喜欢我的文章的小伙伴记得关注一下哦，每天将为你更新最新知识。
这边对基本的样式进行了设置，首先在html部分设置了一个名为nav的div，随后进行基本的默认样式的清除，并且设置盒子为ie盒子方便后续的计算，整体都设置为弹性盒，方便后续矢量文字的操作，对导航栏nav进行定位，方便后续位置上的操作
<body>
<!-- 目前就一个简单的nav，推荐大家语义化来写 -->
<div class="nav"></div>
</body>
<style>
/* 清除一些默认样式 */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
}
a{
text-decoration: none;/*确保在浏览器中显示链接时，没有任何文本装饰，如下划线。 */
}
/* 对整体进行设置，并且都设置为弹性盒，方便进行操作 */
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #222327;
}
/* 设置导航栏样式 */
.nav{
/* 对导航栏位置进行定位处理，方便后续的图标位置的设置 */
position: relative;
width: 400px;
height: 70px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
}
</style>
这里面呢引用了阿里巴巴的矢量文字效果，具体如何使用请见www.iconfont.cn/manage/inde… 里面的教程，这边我挑了五个字体图标加入到了网页中，并且用ul和lil加入到了导航栏中，目前是竖着排列的，后续加入css样式之后会好起来，并且在第一个li上加入了active的css样式，用于设置选中效果
<link rel="stylesheet" href="//at.alicdn.com/t/c/font_4173165_2g4t5a6pg9v.css">
<div class="nav">
<ul>
<li class="active"> <span><i class="iconfont icon-shouye"></i></span></li>
<li > <span><i class="iconfont icon-liuyan"></i></span></li>
<li > <span><i class="iconfont icon-code"></i></span></li>
<li > <span><i class="iconfont icon-box-empty"></i></span></li>
<li > <span><i class="iconfont icon-gitee-fill-round"></i></span></li>
</ul>
</div>这里面呢针对ul和li进行了设置，使之达到了图下的效果，对ul 和li进行了弹性盒的设置，li中的使用flex：1让这些矢量文字按等份划分容器宽度，使之达到了一个距离平均的样式，并且设置了这个zindex的叠加级别
.nav{
/* 对导航栏位置进行定位处理，方便后续的图标位置的设置 */
position: relative;
width: 400px;
height: 70px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
}
.nav ul{
display: flex;
width: 350px;
}
.nav ul li{
height: 60px;
/* flex:1是让所有的li平均分nav这个容器 */
flex: 1;
position: relative;
z-index: 2;
display: flex;
justify-content: center;
}这里呢针对了span元素和i元素进行了设置，通过span元素蒋i元素中的矢量图标设置到水平垂直都居中的位置，并且设置了圆角，加入了动画和动画延迟，针对i元素将文字大小设置了，并且在html中加入了对应图标的文字效果，并且为例美观在每个li元素中都添加了一个选中时候的不同的颜色，使用了变量--clr用于获取选中效果 行内样式是一种直接在HTML元素上指定样式的方法，在这种情况下，你使用 style 属性将 --clr 变量设为不同色
.nav ul li span{
/* 进行定位，使之通过span元素带动矢量图标进行水平垂直到中心位置 */
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 55px;
height: 55px;
border-radius: 50%;
/* 设置鼠标移入的样式 */
cursor: pointer;
/* 设置动画过度事件以及延迟 */
transition: 0.5s;
transition-delay: 0s;
}
.nav ul li span i{
color: #222327;
font-size: 1.5em;
}<body>
<!-- 目前就一个简单的nav，推荐大家语义化来写 -->
<div class="nav">
<ul>
<!-- 设置active效果，用于获取选中效果 用于获取选中效果 行内样式是一种直接在HTML元素上指定样式的方法，在这种情况下，你使用 style 属性将 --clr 变量设为不同色 -->
<li class="active" style="--clr:#f44336"><span><i class="iconfont icon-shouye"></i>首页</span></li>
<li style="--clr:#0fc70f"> <span><i class="iconfont icon-liuyan"></i>留言</span></li>
<li style="--clr:#2196f3"> <span><i class="iconfont icon-code"></i>代码</span></li>
<li style="--clr:#b145e9"> <span><i class="iconfont icon-box-empty"></i>盒子</span></li>
<li style="--clr:#ffa111"> <span><i class="iconfont icon-gitee-fill-round"></i>gitee</span></li>
<div class="indicator"></div>
</ul>
</div>
</body>下面设置选中时候的样式，在这里呢针对span元素设置了选中的时候会向上位移到这个地方，并且在矢量图标的地方设置了开始选中的时候将文字颜色改为和背景颜色一样的颜色，这样当点击的那一刻，图标会出现消失的情况，当超出导航栏到黑色部分的时候，文字就会显示出来，在后面，设置了一个半圆的背景图，当背景图位移到文字的位置的时候，矢量文字就会显示出来
/* 下面是针对选中效果做的样式处理 */
.nav ul li.active span {
/* 设置了一开始的背景颜色，后面会被取代，设置了点击的时候会向上移动 */
background: orange;
transform: translateY(-27px);
transition-delay: 0.25s;
}
.nav ul li.active span i {
/* 设置了点击时候矢量图标的文字颜色 */
color: #fff;
}
这里呢加入了一个模糊的效果，配合后面的选中的时候图标颜色显示会形成一个类似于色彩过度的效果，并且将i元素上面设置的颜色显示出来
.nav ul li span::before {
content: '';
position: absolute;
top: 10px;
left: 0;
width: 100%;
height: 100%;
background: orange;
border-radius: 50%;
filter: blur(40px);
opacity: 0;
transition: 0.5s;
transition-delay: 0s;
}
.nav ul li span::before {
opacity: 0.5;
transition-delay: 0.25s;
}
/* 这里将i元素设置的颜色显示出来 这两个样式块中都使用了 background: var(--clr); 属性，可以将背景颜色设置为clr 变量所表示的值。这种使用自定义变量的方式，可以在代码中统一定义颜色值，以便在需要时进行统一更改。*/
.nav ul li.active span {
background: var(--clr);
}
.nav ul li span::before {
background: var(--clr);
}
这里呢设置了背后的那个向下突兀的圆，其原理是通过位置的调整和颜色的与背景颜色的一致加上zindex的图册优先级的显示，构成了这么一个背景半圆形图
.indicator {
/* 这里进行了定位，并且设置了背景园的位置，同时将圆的背景颜色与背景颜色设为一致，会形成那种向下突兀的圆形，并且加入了动画 ps：这个过度的小圆弧我是真设置不好，凑合看吧，大佬们有能力的可以试试设置一下*/
position: absolute;
top: -35px;
width: 70.5px;
height: 70px;
background: #222327;
border-radius: 50%;
z-index: 1;
transition: 0.5s;
}
/* 设置左边半弧 */
.indicator::before {
content: '';
position: absolute;
top: 16px;
left: -34px;
width: 10px;
height: 5px;
background: transparent;
border-radius: 50%;
box-shadow: 20.5px 19px 0 4px #fff;
}
/* 设置右边半弧 */
.indicator::after {
content: '';
position: absolute;
top: 16px;
left: 54px;
width: 10px;
height: 5px;
background: transparent;
border-radius: 50%;
box-shadow: 20px 19px 0 4px #fff;
}这里呢使用了nth-child选择器选中对应的i元素，注意，这里设置的平移效果是由clac函数计算而来，选中其中一个i元素，并且当且仅当具有active类之后的所有兄弟中的.indicator类元素，有一个指示器元素（.indicator）。指示器的位置会根据活动项目（具有active类的<li>元素）的位置进行调整。 根据活动项目的位置设置指示器的水平平移距离，实现一个在导航菜单中显示当前选中项目的效果。指示器的位置和平移距离是根据活动项目的索引和固定的长度单位（70px）进行计算的
/*/* nth-child()选中低某个i元素，然后配合js完成背景圆的移动
在CSS中，calc() 是一个用于执行计算的函数。它允许在CSS属性值中使用数学表达式。
这种计算函数通常用于允许动态计算和调整元素的尺寸、间距或位置。在 calc() 函数中，可以使用不同的运算符（如加号 +、减号 -、乘号 *、除号 /）来结合数值和单位进行计算。
它可以包含其他长度单位（如像素 px、百分比 % 等），并且可以与其他CSS属性值和变量一起使用。
当一个 `<li>` 元素具有 `active` 类时，对应的 `.indicator` 元素会相对于活动项目的位置水平平移一个特定的距离。每个 `.indicator` 元素的平移距离相对于其前面的活动项目索引和一个固定的长度单位（`70px`）计算得出。
*/ */
.nav li:nth-child(1).active~.indicator{
transform: translateX(calc(70px*0));
}
.nav li:nth-child(2).active~.indicator {
transform: translateX(calc(70px*1));
}
.nav li:nth-child(3).active~.indicator {
transform: translateX(calc(70px*2));
}
.nav li:nth-child(4).active~.indicator {
transform: translateX(calc(70px*3));
}
.nav li:nth-child(5).active~.indicator {
transform: translateX(calc(70px*4));
}
这里配合js代码，通过foreach为点击的li或者为所有的li进行添加或者移入active样式
<script>
//通过 `lis.forEach(li => li.addEventListener('click', function () {...}))` 遍历 `lis` 数组中的每个元素，并为每个元素都添加一个 ‘click’ 事件监听器。
//在每次点击事件中，使用 `lis.forEach(item => {...})` 遍历 `lis` 数组中的每个元素，将它们的 `active` 类都移除，然后在当前被点击的元素上添加 `active` 类，
const lis = document.querySelectorAll('.nav li')
lis.forEach(li => li.addEventListener('click', function () {
lis.forEach(item => {
item.classList.remove('active');
this.classList.add('active');
})
}))
</script>这里配合js使用的动画是值得我学习的，通过js点击赋予不同的liactive样式，又根据active所在的li元素经过计算对.indicator元素进行平移，使之完成这个动画效果
基于css3写出的底部导航栏效果（详细注释
原文链接：https://juejin.cn/post/7262334378759405605
篇文章，小海老师带领大家一同做一个利用CSS技术实现的导航栏。通过这个导航栏的制作，希望大家能够对前几篇文章中学习到的CSS属性能有一个整体的认识，并能够达到灵活运用的程度。
承接文章：灵活控制块级元素在一行内显示，CSS浮动属性，知道原理就很简单
技术等级：初级 | 适合前端开发的初学者阅读学习。
希望收藏了这篇文章的你同时也可以关注一下“小海前端”的头条号，因为这些文章都是连载的，并且是经过系统的归纳和总结的。塌下心来认真阅读，你一定会学到对你有用的知识。
如果你是初学前端开发，强烈建议跟着文章中讲的步骤自己做一做。步骤不多，思路简单，占用不了大家太多的时间，自己做一遍，一定会收获不少。
一、导航栏效果图展示：
今天我们要做的导航栏效果如下图所示。
导航栏效果图展示
这个效果主要使用的是<ul></ul>标记对和<a></a>标记对共同实现的。
整个实例涉及到的CSS属性如下所示：
width
height
background-color
list-style-type
display
float
margin
line-height
二、实现页面效果：
首先为导航栏设置一个<div>容器，并设置其id属性的取值设置为nav。该容器用来控制导航栏的通栏位置。通栏的容器宽度应该设置为100%，这里高度设置为40px，颜色为#a72f2e。实现代码如下所示：
<div id=”nav”></div>
#nav{
width:100%; height:40px;
background-color:#a72f2e;
}
由于要在通栏的容器中显示固定宽度为1000px的导航栏主体，因此在该容器内部再制作一个<div>容器，用来盛放真正的导航栏代码。我们将它的class属性取值为navContent。这个容器的宽度设置为1000px，高度与#nav的高度等高，并且在#nav容器内部水平居中。实现代码如下所示：
<div class=”navContent”></div>
#nav .navContent{
width:1000px; height:40px;
margin:0 auto;
}
接下来在.navContent容器内部书写导航栏的各个条目。导航栏是使用<ul></ul>标记对实现的，而它的导航栏条目是利用<li></li>标记对书写的。因为导航栏需要单击后跳转页面，所以在<li></li>内部使用了<a></a>标记对。
这里要说明一点，因为<li></li>标记对是块级元素，<a></a>标记对是内联元素，因此要让<li></li>标记对包裹<a></a>标记对，不要用<a></a>标记对包裹<li></li>标记对。
这里以导航栏条目“首页”和“网站介绍”为例，下列HTML代码展示了导航栏的条目内容。
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="#">网站简介</a></li>
…
</ul>
需要更多的导航栏条目，可以在<ul>标记对内部重复书写<li></li>和<a></a>的代码格式。
三、编写整个导航栏的CSS样式：
整个导航栏是使用<ul></ul>标记对实现的，所以需要对<ul></ul>标记对编写CSS样式。
由于无序列表的列表项左侧带有小圆点的项目符号，因此需要将该项目符号去掉。所以<ul></ul>标记对的CSS代码如下所示：
#nav .navContent ul{
list-style-type:none;
}
四、编写导航栏条目的CSS样式：
导航栏条目是使用<li></li>标记对实现的，所以需要对<li></li>标记对编写CSS样式。
由于<li></li>标记对是块级元素，因此即使去掉了左侧的项目符号，所有的条目依然都各自独占一行显示，所以需要让它们在一行内显示，这就需要让所有的<li></li>标记对左浮动。CSS代码如下所示：
#nav .navContent ul li{
float:left;
}
五、编写导航栏条目中链接的CSS样式：
导航栏条目中的链接是使用<a></a>标记对实现的，所以需要对<a></a>标记对编写CSS样式。
由于<a></a>标记对是内联元素，因此无法设置宽度和高度，也就无法为每一个导航栏条目设置尺寸。因此需要将<a></a>标记对转换为块级元素（display属性），然后设置宽度和高度（width属性和height属性）。
有了宽度和高度，就需要让链接的文本在容器中水平居中（text-align属性）和垂直居中（line-height属性）了。
最后去掉链接的下划线（text-decoration属性），并设置链接的文本颜色（color属性）。
导航栏条目中链接的CSS代码如下所示：
#nav .navContent ul li a{
display:block;
width:100px; height:40px;
text-align:center;
line-height:40px;
text-decoration:none;
color:#dddddd;
}
六、编写鼠标经过导航栏条目时的CSS样式：
鼠标经过导航栏目时，即使没有触碰到链接的文本部分，也应该能够进行跳转。因此需要对<a></a>标记对编写鼠标经过时的CSS样式。
鼠标经过时，希望背景颜色（background-color属性）和文本颜色（color属性）发生变化。
鼠标经过链接时的CSS代码如下所示：
#nav .navContent ul li a:hover{
background-color:#ff5857;
color:#ffffff;
}
七、整体代码：
至此，这个简单的导航栏效果就完全实现了，CSS整体使用了约30行代码。实现这个导航栏效果的HTML代码如下图所示。
HTML整体代码
实现这个导航栏效果的CSS代码如下图所示。
CSS整体代码
如果大家希望得到更加全面的关于HTML和CSS技术讲解的内容，可以私信我，我会免费将小海老师自己编写的HTML和CSS的PDF教材发给你，帮助你在前端开发的道路上阔步前行。
在头条上发表的这些文章都是从前端开发的基础开始一步一步讲起的。我非常希望能有更多的前端开发初学者通过我写的文章，逐步学到一定的知识，甚至慢慢有了入门的感觉。这些文章都是我这几年教学过程中的经验，每写一篇时我都尽量把握好措辞，用简单易懂的语言描述，同时精心设计版面，让版面更加丰富，激发阅读兴趣。所以，每一篇文章可能篇幅不长，但是都要耗费小海老师很久的时间。
希望收藏了这篇文章的你同时也可以关注一下“小海前端”的头条号，因为这些文章都是连载的，并且是经过系统的归纳和总结的。塌下心来认真阅读，你一定会学到对你有用的知识。
关注“小海前端”，我会继续为大家奉上更加深入的前端开发文章，也希望更多的初学者跟着学下去，我们共同将前端开发的路努力坚持的走下去。
下一次，小海老师开始为大家讲解CSS的盒属性。盒属性是div布局的基础，在实际的布局过程中有许多应用技巧。下一篇文章我会为大家将盒属性一个一个进行详细的分析。
*请认真填写需求信息，我们会在24小时内与您取得联系。
