————以LOL图片为例练习轮播图
轮播图 *{ margin: 0; padding: 0; } .banner{ width: 820px; height: 380px; margin:0 auto; } .banner-img{ width: 820px; height: 340px; overflow: hidden; } .banner-img ul{ width: 4100px; height: 340px; transition: all 0.5s; } .banner-img ul li{ list-style: none; width: 820px; height: 340px; float: left; } .banner-nav{ width: 820px; height: 40px; } .banner-nav li{ list-style: none; width: 164px; height: 40px; background-color: #e3e2e2; float: left; text-align: center; line-height: 40px; } .banner-nav .active{ border-bottom: 2px #cea861 solid; color: #cea861; height: 38px; background-color: #fff; }
