*{padding:0;margin:0;}a{text-decoration:none;}html,body{height:100%;width:100%;background:black;}ul{position:relative;width:990px??;list-style:none;background:white;display:flex;flex-direction:row;justify-content:space-around;margin:50pxauto;border-radius:10px;}ulli{position:relative;flex:1;text-align:center;}ullia{font-size:18px;color:#333;padding:10px0;display:block;}.cloud{position:absolute;left:32px;top:0;bottom:0;margin:auto;width:83px;height:42px;background:url('images/cloud.gif');}如何实现上面的效果，请看下面的步骤第一步：使用css调整样式，这里我使用弹性框来实现导航的平均分布。（如果你聪明，可以试试其他的方法，看看能不能实现）css代码如下：*{padding:0;margin:0;}a{text-decoration:none;}html,body{height:100%;width:100%;background:black;}ul{position:relative;width:990px??;list-style:none;background:white;display:flex;flex-direction:row;justify-content:space-around;margin:50pxauto;border-radius:10px;}ulli{position:relative;flex:1;text-align:center;}ullia{font-size:18px;color:#333;padding:10px0;display:block;}.cloud{position:absolute;left:32px;top:0;bottom:0;margin:auto;width:83px;height:42px;background:url('images/cloud.gif');}html代码如下：这里在a标签中的href属性后添加代码，防止点击事件实现时发生其他事件第二步：分析如何从最左边的值获取图片（cloud.gif）第三步：实现鼠标移动、移除、点击事件的效果//获取class为cloud的标签，varpic=document.getElementsByClassName('cloud')[0];//获取所有li标签varliList=document.getElementsByTagName('li');//定义向右移动的初始距离varliLeft=32;//定义慢动画的初始值varheader=32;//用来定义鼠标点击时的初始位置varcurrentLeft=32;for(vari=0;i
