来源：http://www.ido321.com/858.html
效果图：
演示地址：http://jsfiddle.net/Web_Code/q5qfd8aL/embedded/result/
代码：
1: <!DOCTYPE html> 2: <html lang="en"> 3: <head> 4: <meta http-equiv="content-type" content="text/html;charset=utf-8"> 5: <title>图片轮播的焦点</title> 6: <style type="text/css"> 7: .div 8: { 9: width: 240px; 10: position: absolute; 11: } 12: ul 13: { 14: list-style: none; 15: margin-left: -50px; 16: } 17: ul li 18: { 19: width: 50px; 20: height: 50px; 21: margin-left: 10px; 22: float: left; 23: border: 1px solid #ccc; 24: background-color: #ccc; 25: border-radius:25px; 26: text-align: center; 27: } 28: li:hover 29: { 30: background-color: red; 31: } 32: span 33: { 34: font-size: 30px; 35: line-height: 50px; 36: } 37: </style> 38: </head> 39: <body> 40: <div class="div"> 41: <ul> 42: <li><span>1</span></li> 43: <li><span>2</span></li> 44: <li><span>3</span></li> 45: <li><span>4</span></li> 46: </ul> 47: </div> 48: </body>转载于:https://www.cnblogs.com/bhlsheji/p/5403300.html
相关资源：数据结构—成绩单生成器