先看看等分的布局方案
1. float
兼容性较好（IE 8以上）
**2. flex **
兼容性较差（flex属于css3）
兼容性：IE8及以上
3. table
兼容性：可以兼容 IE 8
1. table
利用 table 的特性——每列等宽
2. flex
3. float
伪等高（只有背景显示高度相等），左右真实的高度其实不相等。 兼容性较好。
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>12等分圆</title>
</head>
<style type="text/css">
.container {
position: relative
width: 200px
height: 200px
overflow: hidden
border: 2px outset deeppink
border-radius: 50%
margin:5em auto
}
.layer {
position: absolute
transform-origin: left top
left: 100px
top: 100px
width: 100px
height: 100px
border: 1px solid white
box-sizing: border-box
}
</style>
<script type="text/javascript">
onload = function () {
[].slice.call(document.querySelectorAll('.layer'), 0).forEach(function (item, i) {
item.style.backgroundColor = '#' + (~~(Math.random() * (1 << 24))).toString(16)
item.style.transform = 'rotate(' + 360 / 12 * (i + 1) + 'deg)skewX(60deg)'
})
}
</script>
<body>
<div class="container">
<div class="layer"></div>
<div class="layer"></div>
<div class="layer"></div>
<div class="layer"></div>
<div class="layer"></div>
<div class="layer"></div>
<div class="layer"></div>
<div class="layer"></div>
<div class="layer"></div>
<div class="layer"></div>
<div class="layer"></div>
<div class="layer"></div>
</div>
</body>
</html>
其中javascript部分可以改成css写，但是会写很多css，嫌麻烦所以用js控制了。
在css中hover用于选择鼠标指针浮动在上面的元素，语法“标签选择器:hover{样式代码}”，用法：1、直接在悬浮元素上改变样式；2、改变子元素的样式；3、改变同级元素的样式；4、改变就近元素的样式等。
在CSS中有个hover属性，当鼠标移上去的时候可以将其激活，它可以用来实现类似于js的一些功能。
