展开全部
给你写好了，你看看，其实重点就是用到了选择器:nth-child(odd)，和border-radius（边框圆角）
html
<table cellpadding="0" cellspacing="0" width="200">
<thead>
<tr>
<td align="center">排名</td>
<td>姓名</td>
</tr>
</thead>
<tbody>
<tr>
<td align="center"><span class="sort">1</span></td>
<td>张三</td>
</tr>
<tr>
<td align="center"><span class="sort">2</span></td>
<td>李四</td>
</tr>
<tr>
<td align="center"><span class="sort">3</span></td>
<td>王二</td>
</tr>
<tr>
<td align="center"><span class="sort">4</span></td>
<td>麻子</td>
</tr>
</tbody>
</table>
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;}效果
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
不用js是吗，首先给1、2、3公共的class，class的样式是公共的样式除了背景颜色，然后给1、3、5一个单独的class，给2、4、6另外一个单独的class，这两个class里面的颜色不一样就行了
<p calss="home one"> 1 </p>
<p calss="home two"> 2 </p>
<p calss="home one"> 3 </p>
<p calss="home two"> 4 </p>
home: {......}
one: { background-color: #fff; }
two: { background-color: #000; }
<p calss="home one"> 1 </p>
<p calss="home two"> 2 </p>
<p calss="home one"> 3 </p>
<p calss="home two"> 4 </p>
home: {......}
one: { background-color: #fff; }
two: { background-color: #000; }
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<html>
<head>
<style type="text/css">
.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;
}
</style>
</head>
<body>
<table class='table'>
<tr>
<td><div>1</div></td>
</tr>
<tr>
<td><div>2</div></td>
</tr>
<tr>
<td><div>3</div></td>
</tr>
</table>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
颜色可能不太对，你可以自己改一下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
.table-bordered {
border: 1px solid #ddd;
}
.table {
width: 20%;
max-width: 20%;
margin-bottom: 20px;
}
table {
background-color: transparent;
}
table {
border-spacing: 0;
border-collapse: collapse;
}
tr {
display: table-row;
vertical-align: inherit;
border-color: inherit;
}
tbody tr:nth-child(odd){
background-color:#00FFFF
}
span{
display: block;
width: 30px;
height: 30px;
-webkit-border-radius: 15px;
background-color: #0066FF;
color: #FFFFFF;
line-height: 30px;
text-align: center;
}
</style>
</head>
<body>
<table class="table-bordered table">
<thead>
<tr><th>排序</th></tr>
</thead>
<tbody>
<tr><td><span>1</span></td></tr>
<tr><td><span>2</span></td></tr>
<tr><td><span>3</span></td></tr>
</tbody>
</table>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
