<!DOCTYPE HTML> <htmllang="en-US">...-慕课网

<!DOCTYPE HTML>
<htmllang="en-US">
    <head>
        <meta charset="UTF-8">
        <title>CSS3 Full Background Slider </title>
        <style type="text/css">
            html,body {
               height: 100%;
               fong-size:16px;
            }
            /*设置背景图片全屏显示，并且居中*/
            img.bg {
               min-height: 100%;
               min-width: 1024px;
               width: 100%;
               height: auto !important;
               height: 100%;
               position: fixed;
               top: 0;
               left: 50%;
               z-index:1;
                -moz-transform: translateX(-50%);
            }
            .slider {
               position: absolute;
               width: 100%;
               text-align: center;
               z-index: 9999;
               bottom: 100px;
            }
            .slider li {
               display: inline-block;
               width: 170px;
               height: 130px;
               margin-right: 15px;
            }
            .slider a {
               display: inline-block;
               width: 170px;
               padding-top: 70px;
               padding-bottom: 20px;
               position: relative;
               cursor: pointer;
               border: 2px solid #fff;
               border-radius: 5px;
               vertical-align: top;
               color: #fff;
               text-decoration: none;
               font-size: 22px;
               font-family: 'Yesteryear', cursive;
               text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.8),-2px -2px 1px rgba(0, 0, 0, 0.3),-3px -3px 1px rgba(0, 0, 0, 0.3);
            }
            /*任务一、设置不同列表的背景色*/
           .slider ul li:nth-of-type(1){
               background-color: #02646e;
            }
            .slider ul li:nth-of-type(2){
               background-color: #eb0837;
            }
            .slider ul li:nth-of-type(3){
               background-color: #67b374;
            }
            .slider ul li:nth-of-type(4){
               background-color: #e6674a;
            }
            .slider ul li:nth-of-type(5){
               background-color: #e61061;
            }
            /*任务二、设置缩略图形状*/
            .slider ul li a::after{
               content:"";
               display: block;
               height: 120px;
               width: 120px;
               border: 5px solid #fff;
               border-radius: 50%;
               position: absolute;
               left: 50%;
               margin-left: -60px;
               z-index: 9999;
               top: -80px;
            }
            /*任务三、设置缩略图背景图像*/
            .slider ul li:nth-of-type(1) a::after{
               background: url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg1.jpg) no-repeat center;
            }
            .slider ul li:nth-of-type(2) a::after{
               background: url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg2.jpg) no-repeat center;
            }
            .slider ul li:nth-of-type(3) a::after{
               background: url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg3.jpg) no-repeat center;
            }
            .slider ul li:nth-of-type(4) a::after{
               background: url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg4.jpg) no-repeat center;
            }
            .slider ul li:nth-of-type(5) a::after{
               background: url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg5.jpg) no-repeat center;
            }
            /*任务四、给缩略图添加蒙板效果*/
            .slider ul li a::before{
               content:"";
               display: block;
               height: 120px;
               width: 120px;
               border: 5px solid #fff;
               border-radius: 50%;
               position: absolute;
               left: 50%;
               margin-left: -60px;
               z-index: 99999;
               top: -80px;
               background: rgba(0,0,0,0.3);
            }
            /*任务五、鼠标悬浮时，修改缩略图蒙板透明度*/
            .slider ul li a:hover::before{
               opacity:0;
            }
            /*任务六、点击综略图，切换背景图*/
            .slideLeft:target,.slideBottom:target,.zoomIn:target,.zoomOut:target,.rotate:target{
               z-index: 100;
           }
        </style>
    </head>
    <body>
        <div>
            <ul>
               <li><a href="#bg1">Hipster Fashion Haircut </a></li>
               <li><a href="#bg2">Cloud Computing Services & Consulting</a></li>
               <li><a href="#bg3">My haire is sooo fantastic!</a></li>
               <li><a href="#bg4">Eat healthy & excersice!</a></li>
               <li><a href="#bg5">Lips so kissable I could die ...</a></li>
           </ul>
        </div>
        <img src="http://www.w3cplus.com/demo/css3/CSS3Fullbackground/bg1.jpg" alt="" class="bg slideLeft" id="bg1" />
        <img src="http://www.w3cplus.com/demo/css3/CSS3Fullbackground/bg2.jpg" alt="" class="bg slideBottom" id="bg2" />
        <img src="http://www.w3cplus.com/demo/css3/CSS3Fullbackground/bg3.jpg" alt="" class="bg zoomIn" id="bg3" />
        <img src="http://www.w3cplus.com/demo/css3/CSS3Fullbackground/bg4.jpg" alt="" class="bg zoomOut" id="bg4" />
        <img src="http://www.w3cplus.com/demo/css3/CSS3Fullbackground/bg5.jpg" alt="" class="bg rotate" id="bg5" />
    </body>
</html>