Home >Web Front-end >HTML Tutorial >Quickly create the focus of image carousels with CSS_html/css_WEB-ITnose
Quickly create the focus of image carousels with CSS_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:56:461273browse
Source: http://www.ido321.com/858.html
Rendering:
Demo address: http://jsfiddle.net/Web_Code/q5qfd8aL/embedded/result/
Code:
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>
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn