Web front-end base case-development QQ space Rotating time axis

Knowledge Points: HTML tags, CSS style attributes, code optimization, industry specifications, layout ideas, JavaScript basics, jquery methods, logical thinking.
HTML code:

    <div class= "Con" > <div class= "Top" >  <p> Classic course set </p> </div> <div class= "Pic-list" > &L                    T;div class= "Content" > <div class= "pic" ></div> <div class= "BQ" > <span>2016/10/15</span>  &lt                ;i></i> </div> </div> <div class= "Content" > <div class= "pic" ></div> <div class= "BQ" > <span>2016/10/15</s pan>  <i></i> </div                > </div> <div class= "Content" > <div class= "pic" ></div> <div Class= "BQ" > <span>2016/10/15</span>  <i></i> </div> </div> <div class= "content" &                Gt <div class= "pic" ></div> <div class= "BQ" > <span>2016/10/15</sp an>  <i></i> </div&            Gt </div> <div class= "Content" > <div class= "pic" ></div> < Div class= "BQ" > <span>2016/10/15</span> </i> </div> </div> <div class= "Content" >            <div class= "pic" ></div> <div class= "BQ" >        <span>2016/10/15</span>  &LT;I&G t;</i> </div> </div> <div class= "Content" > &lt ;d IV class= "pic" ></div> <div class= "BQ" > <span>2016/10/15</span&                    Gt  <i></i> </div> </div&gt            ;                    <div class= "Content" > <div class= "pic" ></div> <div class= "BQ" > <span>2016/10/15</span>  &                lt;i></i> </div> </div> <div class= "Content" > <div class= "pic" ></div> <div class= "BQ" > <span>2016/10/15</span>  <i></i> </div> </div> <div class= "Content" > <div class= "pic" &GT;&L                    t;/div> <div class= "BQ" > <span>2016/10/15</span>  <i></i> </div> &LT;/DIV&G            T                    <div class= "Content" > <div class= "pic" ></div> <div class= "BQ" > <span>2016/10/15</span>  &                lt;i></i> </div> </div> <div class= "Content" > <div class= "pic" ></div> <div class= "BQ" > <span>2016/10/15< /SPAN>                    <i></i> </div>                </div> <div class= "Content" > <div class= "pic" ></div> <div class= "BQ" > <span>2016/10/15</span>  <i></i> </div> </div> </div> </div>

CSS code:

        <style>/* Browser compatibility issues */*{margin:0;/* margin */padding:0;/* inside margin */} body{Background:ur            L (' images/bg.jpg ') fixed;            /*background-attachment:; Sets whether the background map is fixed or scrolls with the page */}. con{/* starts with a. Class selector */width:900px;            margin:0 auto;/* the upper and lower margins of about 0 Adaptive Center */}. Con. top{background: #fff;            width:130px;            height:170px;            text-align:center;/* Text Center alignment */font-size:14px;            line-height:20px;            margin-left:150px;        padding-top:15px;            }. Con. Top img{width:100px;            Height:auto;        margin:0 Auto;            }. Con. pic-list{width:600px;            BORDER-LEFT:3PX solid #00ccff;/* Border line */margin-left:215px;        padding-top:30px;            }. Con. pic-list. content{width:600px;            height:400px;            margin-bottom:30px; position:relative;/* Relative SetBit reference */-WEBKIT-ANIMATION:SC 2s;/* definition animation */display:none;            }. Con. pic-list. Content. pic{width:590px;            height:400px;            margin-left:10px;            Background:rgba (0,0,0,0.5); border-radius:10px;/* Small fillet */box-shadow:0px 0px 4px 4px #737373;/* Horizontal vertical orientation blur range color */}. Con pi            C-list. Content. bq{width:120px;            height:30px;            position:absolute;/* Absolute Positioning */top:100px;        left:-116px;            }. Con. pic-list. Content. BQ span{Display:block;            Background: #000;            Color: #fff;            width:90px;            height:30px;            Text-align:center;            line-height:30px;        Float:left;            }. Con. pic-list. Content. BQ img{float:left;        margin-top:7px;            }. Con. pic-list. Content. BQ i{float:right;            width:6px;    height:6px;        Background: #00cc33;            border:2px solid #fff;            border-radius:50%;        margin-top:10px;            }/*CSS3 Animation */@-webkit-keyframes sc{from{-webkit-transform:rotate (220deg) scale (0.2)} To{-webkit-transform:rotate (0deg) scale (1)}} </style>

JavaScript code:

    <script src="js/jquery.js"></script>    <script>    //jq里面如何获取对象  $// jq函数  $(‘元素‘)    $(‘.content:lt(3)‘).show();//找到序列号小于3的元素 显示    //滚动事件    $(window).scroll(function(){        var _top = $(window).scrollTop();//获取滚动条高度        console.log( _top );        $(‘.content‘).each(function(){//遍历            var _index = $(this).index()+1;//当前序列号            var _height = $(this).offset().top;//获取到当前content到浏览器窗口顶部距离            if( _top < _height ){//优先原则                $(‘.content:lt(‘+_index+‘)‘).show();                $(‘.content:gt(‘+_index+‘)‘).hide();                return false;//t跳出遍历            }        });    });    </script>

Web front-end base case-development QQ space Rotating time axis