设计公司网站首页制作

这个网站首页使用了html、css、和原生js制作，实现了网页的轮播图效果、鼠标点击事件、鼠标滑过图标的效果，可以说非常的银杏！

 设计的时候遇到的一些问题及制作原理总结：

1. 网站顶部标签 

            

               标签的竖线通过border-right: 1px solid #000000;只显示边框右边的竖线

     最后一道竖线通过.header_right ul a:last-child li{border: none;} 让它最后一个元素无边框

          2. 自动轮播图      

               自动轮播图通过添加定时器，在定时器里面设置方法，通过循环设置索引，让每一张图片通过自己的索引进行播放

          3. 左右按钮

              左右按钮通过给左右按钮添加点击事件，在点击事件里面添加函数，在函数里面添加具体的方法实现

        4.鼠标滑过图片效果

           

            通过十张图片，通过设置透明度opacity: 0;先让白色的图片隐藏，然后添加hover事件让白色的图片透明度变为1

 

    通过设置bottom: 250px;让所有图片两两叠加

          5. 折叠栏的实现

         

 

          折叠栏的实现：给形如点击的图片添加点击事件，使已经用display：none的ul面板隐藏起来的用toggle展现出来

 

       6. 顶部/底部切换图标

 

           

           相对于浏览器窗口进行定位（不随着元素的移动而移动）position: fixed;采用flex布局 display: flex;flex-direction: column;justify-content: space-around;

    column：主轴为垂直方向，起点在上沿。space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

    第三个图标刚开始设置为不可见：visibility 属性规定元素是否可见。即使不可见的元素也会占据页面上的空间。"display" 属性来创建不占据页面空间的不可见元素。

    添加滚动条事件，当距顶部大于100的时候就出现，负责就隐藏

    点击第三个图标回到顶部：给第三个图标添加点击事件，方法为令高度变为0