CSS快速制作图片轮播的焦点_html/css_WEB-ITnose
- WBOY원래의
- 2016-06-24 11:56:461273검색
来源：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>
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.