20秋《web前端综合案例开发》离线作业2.docx
《20秋《web前端综合案例开发》离线作业2.docx》由会员分享，可在线阅读，更多相关《20秋《web前端综合案例开发》离线作业2.docx（4页珍藏版）》请在冰点文库上搜索。
要求：
在本文档中的题目下作答，在所写的代码下面粘贴运行后的网页截图，提交本
word文档即可。
小A是大四的学生，还有半年就要毕业了就要跟她暗恋了三年的女神分开了。
马上
就是女神的生日，他想送给女神一个礼物能让女神开心并记住他的特别礼物。
他想到了
电子相册，一个漂亮的网页版电子相册，因为他可以从班级网上找到女神的靓照。
上一次
制作的网页，女神收到礼物后跟小A说她很开心，小A也非常高兴，觉得还应该在网页上
增加一些小细节，来让女神感受到自己的心意。
1.加一个播放时的数字倒计时，倒计时完了还有下一张，时间永远都用不完。
2.倒计时做成百分比进度条的样式，可以是彩色的，女神一定会喜欢的。
DOCTYPEhtml>
scale=1.0">
轮播图
*{
margin:
0;
padding:
0;
}
nav{
width:
720px;
height:
410px;
margin:
20pxauto;
overflow:
hidden;
position:
relative;
}
#index{
position:
absolute;
left:
320px;
bottom:
20px;
}
#indexli{
width:
8px;
height:
8px;
border:
solid1pxgray;
border-radius:
100%;
background-color:
#eee;
display:
inline-block;
}
#img{
width:
720px;
height:
405px;
}
#imgli{
width:
720px;
height:
405px;
position:
absolute;/*必须设置为absolute，否则第一个li会把后
面的都覆盖*/
z-index:
-1;
opacity:
0;
transition:
opacity1sease-in;
}
#index.on{
background-color:
black;
}
#img.opa-on{
opacity:
1;
}
#bar{
width:
720px;
height:
10px;
}
#barli.progress-bar{
height:
10px;
background:
#f5f2eb;
width:
0px;
z-index:
1;
}