您的位置：首页 > Web前端 > CSS

CSS快速制作图片轮播的焦点

2014-10-01 19:39 316 查看
来源：http://www.ido321.com/858.html

效果图：



演示地址：http://jsfiddle.net/Web_Code/q5qfd8aL/embedded/result/

代码：

[code] <!DOCTYPE html>

<html lang="en">

<head>

<meta http-equiv="content-type" content="text/html;charset=utf-8">

<title>图片轮播的焦点</title>

<style type="text/css">

.div

{

width: 240px;

position: absolute;

}

ul

{

list-style: none;

margin-left: -50px;

}

ul li

{

width: 50px;

height: 50px;

margin-left: 10px;

float: left;

border: 1px solid #ccc;

background-color: #ccc;

border-radius:25px;

text-align: center;

}

li:hover

{

background-color: red;

}

span

{

font-size: 30px;

line-height: 50px;

}

</style>

</head>

<body>

<div class="div">

<ul>

<li><span>1</span></li>

<li><span>2</span></li>

<li><span>3</span></li>

<li><span>4</span></li>

</ul>

</div>

</body>

[/code]
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航