系列文章目录

完全自主网页设计记录（一）

完全自主网页设计记录（二）

---

目录

一、继续优化导航栏

 二、设置图片滚动播放

总结

---

一、继续优化导航栏

导航栏要实现的效果的点击文字跳转到对应的页面，之前只是做了导航栏的外观，今天来实现这个功能。实现这个功能要给每个栏目的文字分别插入超链接，插入超链接使用的标签是标签，href属性指定链接，因为还没有写对应的栏目的页面，所以先用#代替，后面写了页面再进行修改。代码如下：

首页
团体
成员
歌曲
综艺
发展

超链接有四个状态：未访问、已访问、鼠标悬停和鼠标点击。为了区分这四个状态，分别给四个状态下的超链接文本设置不同的文本颜色，代码如下：

a:link{
    color: black;
}
a:visited{
    color: blue;
}
a:hover{
    color: red;
}
a:active{
    color: purple;
}

a:link表示的是未访问的超链接

a:visited表示的是已访问的超链接

a:hover表示的是鼠标悬停时的超链接

a:active表示的是鼠标点击时的超链接

实现效果如图所示（动图有点模糊，大家将就着看吧）：

然后为了页面看起来美观一点，不会直接占满整个页面，我们给页面增加一点外边距，代码如下：

.navigation-top{
    margin-top: 20px;
    margin-right: 20px;
}
.navigation-button{
    margin-right: 20px;
}
#logo{
    margin-top: 20px;
    margin-left: 20px;
}

 二、设置图片滚动播放

接下来实现图片滚动播放。经常能在一些网页中看到这个效果，我也来做一个。因为在在校期间的前端学习中，我们并没有学习动画的制作，所以我参考了网上的资料。百度上说实现图片滚动播放有两种方法，一种是使用JavaScript进行制作，一种是使用css进行制作。因为css比较简单，所以我选择css方法。参考内容如下：

CSS3如何实现轮播图效果_ZYLong__的博客-CSDN博客_css3实现轮播图

里面说轮播图的原理是将图片进行并列放置，然后将整体并列向左移动，整体向左移动完之后，利用动画的循环与在循环中是否反向运动，进行反复播放。

首先我们需要这样的一个结构，代码如下：

外层的是显示在页面上的大小，内层是图片总共的大小，因为图片是进行左右移动，所以也就是图片的宽度的总和。

然后使用css进行大小的设置和动画的实现，代码如下：

#shuffling-out{
    height: 500px;
    width: 500px;
    margin: 0 auto;
    overflow: hidden;
    clear: both;
}
#shuffling{
    height: 500px;
    width: 1500px;
    animation: shuffling 10s infinite alternate linear;
}
.shufflings{
    height: 500px;
    width: 500px;
    float: left;
}
@keyframes shuffling {
    0%,33%{
        transform: translateX(0px);
    }
    39%,66%{
        transform: translateX(-500px)
    }
    72%,100%{
        transform: translateX(-1000px)
    }
}

因为我选择的图片是正方形的，所以外层的长和宽我都设置成500px，然后margin外边距设置了上下是0，左右是auto，他就会自动居中对齐。

然后设置超出大小的内容overflow的显示方式为隐藏hidden，目的是为了把大于一张图片的内容隐藏起来，只显示一张图片。

然后因为logo图片设置了左浮动，他会自动占用图片那一列成为浮动，后面添加的内容都会显示在浮动的右边，所以需要清除浮动clear，both表示清除左右两边的浮动

然后内层的长和外层的长是一样的，因为图片是左右滚动播放的，所以增加的是图片的宽度，所以内层的宽度是所有图片的总和1500px

animation属性是动画属性。shuffling是自定义的动画名字，这个用于后面调用动画。10s是自定义的所有图片播放一遍的时间。infinite表示动画无限播放。alternate表示动画从左往右播放完一遍之后再从右往左播放，这个我一开始选择的是normal正常播放，就是从左往右播放，但是他播放完最后一张图片再次播放第一张图片的时候他是直接跳转到下一张图，不是滑动的，我不知道怎么把它变成滑动的，所以就选择alternate让他左右反复播放。linear表示每张图片播放的时间是一样的。

图片的大小和外层的大小设置成一样的，因为图片要完整的显示出来。

@keyframes规则用于创建动画，使用规则要在后面输入前面设定的动画属性的姓名，用于调用动画。使用规则要定义停顿的时间和每一次移动多少，属性值从0%—100%。第一个属性值是停顿的时间，这个可以根据自己的需要来设置，我设置的是停顿6%，也就是每一次移动的百分比再加6%。第二个属性值是每一次移动多少，因为我的每一张图片是一样宽的，也就是每次移动的宽是一样的，所以百分比需要平均分。我一共有三张图所以平均分成三分，每一份就是大约就是33%。然后每一次移动后面又要再增加一个transform属性，这个属性用于2D或者3D的转换，也就是设置元素的转换，倾斜，移动，缩放等。translatex用于x轴上的移动，也就是左右移动。括号里面设置移动的宽度，也就是你要移动到哪个宽度你就设置哪个宽度。

实现效果如图：

总结

最近开始练车了，所以进度比较慢，本来也就慢。今天给导航栏的文字插入了超链接，给超链接的不同状态设置了不同的颜色。然后制作了一个图片滚动播放的动画。动画对于我来说是新的知识，但是并不难，还挺简单的。