均分圆布局

最新推荐文章于 2023-05-25 11:03:34 发布

乐夫天命兮

最新推荐文章于 2023-05-25 11:03:34 发布

阅读量214

点赞数 1

分类专栏： CSS

本文链接：https://blog.csdn.net/wangxinxin1992816/article/details/96329481

版权

CSS 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

在这里插入图片描述
代码如下：

<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script src="js/jquery-1.8.3.min.js"></script>
	<style>
	    .zh-circle{
	    	position: relative;
	    	width: 240px;
	    	height: 240px;
	    	border-radius: 50%;
	    	border: 1px solid #f00;
	    	box-sizing: border-box;
	    	margin: 100px auto 0;
	    }
	    .zh-circle li{
	    	position: absolute;
	    	z-index: 2;left: 50%;
	    	top: 30px;
	    	width: 40px;
	    	height: 40px;
	    	margin: -20px 0 0 -20px;
	    	border: 1px solid #f00;
	    	border-radius: 50%;
	    	box-sizing: border-box;
	    	list-style: none;
	    	transform-origin: 20px 110px;
	    }
	</style>
</head>
<body>
<ul class="zh-circle">
    <!-- <li></li> -->
</ul>
<script>
window.onload = function(){
    var liSize = 6,
        li = '';
    for(var i=0; i<liSize; i++) {
        li += '<li style="transform: rotate('+360/liSize*i+'deg)"></li>';
    }
    $('.zh-circle').html(li);
}

</script>
</body>
</html>