怎么用html+css实现以下形式

2025-05-15 22:16:14

推荐回答（4个）

回答1：

给你写好了，你看看，其实重点就是用到了选择器:nth-child(odd)，和border-radius（边框圆角）

html

css

*{padding: 0;margin: 0;font-size: 12px;}
table td{padding: 10px;border: 0 none;}
table tbody tr:nth-child(odd){background: #e5f0f8;}
table .sort{width: auto;height: 16px;line-height: 15px;padding: 0 4px;color: #fff;border-radius: 100%;background: #2ea7e0;display: inline-block;overflow: hidden;}

效果

回答2：

不用js是吗，首先给1、2、3公共的class，class的样式是公共的样式除了背景颜色，然后给1、3、5一个单独的class，给2、4、6另外一个单独的class，这两个class里面的颜色不一样就行了

home: {......}
one: { background-color: #fff; }
two: { background-color: #000; }

回答3：


	
		
			.table tr:nth-child(odd){
				background-color:#E5F0F8;
			}
			.table td{
				height: 45px;
				width:65px;
			}
			.table div{
				border-radius:50%;
				background:#2EA7E0;	
				color:white;
				height:20px;
				width:20px;
				text-align:center;
				margin-left:22px;
			}
		
	
	
		
			
				1
	
			
			
				2

			
			
				3

回答4：

颜色可能不太对，你可以自己改一下