Rumah >hujung hadapan web >html tutorial >CSS快速制作图片轮播的焦点_html/css_WEB-ITnose
CSS快速制作图片轮播的焦点_html/css_WEB-ITnose
- WBOYasal
- 2016-06-24 11:56:461273semak imbas
来源：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>
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：loading 动画效果（收藏起来以后留着慢慢用）_html/css_WEB-ITnoseArtikel seterusnya：:before和 :after_html/css_WEB-ITnose