1个回答
展开全部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>T</title>
<style>
*{
padding:0;
margin:0;
}
.main{
width: 470px;
margin: 20px auto;
}
ul li{
float: left;
width: 214px;
height: 58px;
list-style: none;
border: 1px solid #D0D0D0;
border-bottom: none;
background-color: #fff;
border-radius: 15px 15px 0 0;
font: 19px/58px "microsoft yahei";
text-align: center;
cursor: pointer;
}
#tab1{
margin-right: 38px;
background-color: #0AA7EC;
}
.content{
float: left;
height: 392px;
width: 468px;
text-align: center;
border: 1px solid #D0D0D0;
}
.circle_out{
display: inline-block;
width: 212px;
height: 212px;
border: 1px solid #C4C4C4;
border-radius: 50%;
margin-top: 105px;
}
#circle_inner{
display: inline-block;
width: 192px;
height: 192px;
border-radius: 50%;
background-color: rgb(10,167,236);
margin-top: 10px;
}
</style>
<script>
window.onload = function () {
var tab1 = document.getElementById("tab1");
var tab2 = document.getElementById("tab2");
var circle = document.getElementById("circle_inner");
tab1.onmouseover = function () {
tab1.style.backgroundColor="#0AA7EC";
tab2.style.backgroundColor="#FFFFFF";
circle.style.backgroundColor="rgb(10,167,236)";
}
tab2.onmouseover = function () {
tab1.style.backgroundColor="#FFFFFF";
tab2.style.backgroundColor="#0AA7EC";
circle.style.backgroundColor="rgb(190,177,246)";
}
}
</script>
</head>
<body>
<div class="main">
<ul>
<li id="tab1">1</li>
<li id="tab2">2</li>
</ul>
<div class="content">
<span class="circle_out">
<span id="circle_inner"></span>
</span>
</div>
</div>
</body>
</html>
把颜色换成你想要的图片即可。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
