<html>
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8" />
<title>纯css实现图片相册幻灯片切换</title>
<style type="text/css">
*{ margin:0 padding:0 list-style:none}
.lanrenzhijia{ width:180px height:162px margin:100px auto}
.lanrenzhijia dl { position:relative width:160px height:142px border:10px solid #EFEFDA }
.lanrenzhijia dd { width:160px height:120pxoverflow:hidden}
.lanrenzhijia img { border:2px solid #000 }
.lanrenzhijia dt { position:absolute right:0px bottom:0pxwidth:160pxheight:22px background:#FBFBEA }
.lanrenzhijia a {display:blockfloat:rightmargin:2pxwidth:18px height:18pxtext-align:center color:#fff text-decoration:none background:#666filter:alpha(opacity=70) opacity:.7}
.lanrenzhijia a:hover {background:#000}
</style>
</head>
<body>
<div class="lanrenzhijia">
<dl>
<dt>
<a href="#indexa6">6</a><a href="#indexa5">5</a><a href="#indexa4">4</a><a href="#indexa3">3</a><a href="#indexa2">2</a><a href="#indexa1">1</a>
</dt>
<dd>
<img id="indexa1" name="indexa1" src="images/图片1.jpg" />
<img id="indexa2" name="indexa2" src="images/图片2.jpg" />
<img id="indexa3" name="indexa3" src="images/图片3.jpg" />
<img id="indexa4" name="indexa4" src="images/图片4.jpg" />
<img id="indexa5" name="indexa5" src="images/图片5.jpg" />
<img id="indexa6" name="indexa6" src="images/图片6.jpg" />
</dd>
</dl>
</div>
</body>
</html>
参考资料：懒人之家
使用纯css制作扇形图，合并起来形成饼图：
应该知道css3中引入了圆角属性（border-radius），一旦设置这个值，边框即会出现圆角。同样，我们对正方形设置圆角，即可得到饼状图
html：<div id="circle">11</div>
css：
#circle{
width:0
height:0
border-radius:100px
border-width:100px
border-style:solid
border-color: red blue green yellow
line-height:99em
overflow:hidden
cursor:pointer
margin: 30px auto
}
效果：
4.同样我们对其中三个边框设置透明色即可得到扇形
html：<div id="fan">11</div>
css:
#fan{
width:0
height:0
border-radius:100px
border-width:100px
border-style:solid
border-color:red transparent transparent transparent
line-height:99em
overflow:hidden
cursor:pointer
margin: 30px auto
}
效果：
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.list { width: 500px margin: 0 auto display: flex }
.list > .item { flex: 1 margin: 10px position: relative text-align: center }
.list > .item input { opacity: 0 position: absolute left: 0 top: 0 right: 0 bottom: 0 width: 100% height: 100% z-index: 2 }
.list > .item input ~ .text { border: 1px solid #eee padding: 10px position: relative }
.list > .item input:checked ~ .text { border-color: red color: red }
</style>
</head>
<body>
<div class="list">
<div class="item">
<input type="radio" name="list" value="1" />
<div class="text">选项1</div>
</div>
<div class="item">
<input type="radio" name="list" value="2" />
<div class="text">选项2</div>
</div>
<div class="item">
<input type="radio" name="list" value="3" />
<div class="text">选项3</div>
</div>
<div class="item">
<input type="radio" name="list" value="4" />
<div class="text">选项4</div>
</div>
</div>
</body>
</html>
CSS3 element1~element2 选择器
CSS3 :checked 选择器
