播放列表的样式《 Flowplayer 播放器》

我们先去为播放列表创建一个样式表 … 在网页项目的根目录下面，先创建一个 css 目录 …

然后在这个目录下面，添加一个 style.css 样式表 … 你可以根据自己的需求去命名这个样式表 … 或者你也可以把播放列表的样式添加到网页上已有的样式表里 …

再打开网页项目 … 在 <head> 标签上 … 去链接一下刚才我们创建的播放列表的样式表 …

再浏览到播放列表的代码 …. 这里播放列表容器上有个 fp-playlist 的类 … 播放列表里的项目都是 <a> 标签 ..

我们可以使用这些东西作为样式的选择器 …

打开 playlist.css …

先设置一下播放列表项目的 <a> 标签的样式 …

.fp-playlist a{
}

默认 <a> 标签是行内元素，我们可以使用 display 把它设置成块级元素 … 然后可以再设置一下它的高度和宽度 … 这样我们就应该可以看到这个列表列表了 …

.fp-playlist a{
display:inline-block;
width:80px;
height:80px;
margin-right:20px;
}

用 display 属性，把播放列表的 <a> 标签设置成 inline-block … d:ib … 它会把元素设置成块级元素 … 并且他们会显示在同一排 …

再设置一下宽度 … width:80px …. 还有高度 … height:80px … 在项目的右边再添加一点边距 …

margin-right:20px …

播放列表容器

下面再去设置一下播放列表容器的位置 …

.fp-playlist{
position:absolute;
bottom:-105px;
text-align:center;
width:100%;
}

先用 position … 设置位置为绝对位置 … 再设置一下绝对位置的底部的位置 … bottom:-105px

这样这个播放列表的位置会是播放器位置的底部再往下 105 个像素 …

为了让这个播放列表能居中显示 … 我们可以先设置一下它的宽度 … width:100% … 设置为 100%

再用 text-align … 设置为 center … 这样播放列表会相当于播放器居中显示 …

保存一下 … 打开浏览器 … 现在播放列表会显示在播放器的下面 …

点击播放列表里的项目 … 会在播放器中去播放对应的视频 ….

激活样式

下面我们再去给播放列表里的当前播放的项目添加点样式 .. 这样用户可以分别出当前播放的视频属于列表里的哪个项目 …

Flowplayer 会在播放列表里的当前项目的元素上添加一个 .is-active 的类 … 我们可以去设计一个类的样式 ..

回到样式表 … 输入 …

.fp-playlist .is-active{} … 这个样式选择器的意思就是 … 去设置一下 .fp-playlist 这个类下面的 .is-active 的样式 …

添加一个黑色边框 … border:1px solid #000;

我们可以让底部的边框粗一些 … border-bottom:3px solid #000; 保存 … 回到浏览器 …

现在，播放列表的当前项目 … 会用黑色的边框标记出来 …. （#点击选择）

播放列表的样式