原始图片是这样的我想修改成这样的请大神帮帮忙？
4 回答
已采纳
刚毅87
TA贡献345条经验 获得超309个赞
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div {
width: 30px;
height: 30px;
background: pink;
border-radius: 50%;
text-align: center;
line-height: 35px;
color: white;
margin-top: 52px;
display: inline-block;
}
</style>
</head>
<body>
<div class="radius">√</div>
<div>√</div>
<div>√</div>
<div>√</div>
<div>√</div>
<div>√</div>
<div>√</div>
<div>√</div>
<div>√</div>
<div>√</div>
</body>
<script type="text/javascript">
var div1 = document.getElementsByTagName("div");
for (var i in div1) {
div1[i].onclick = function() {
this.style.backgroundColor == "blue" ? this.style.backgroundColor = "pink" : this.style.backgroundColor = "blue";
}
}
</script>
</html>
刚毅87
TA贡献345条经验 获得超309个赞
我不会改 lable 的样式,但是我可以以另一种方法实现.代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.radius {
width: 30px;
height: 30px;
background: pink;
border-radius: 50%;
text-align: center;
line-height: 35px;
color: white;
}
</style>
</head>
<body>
<div class="radius">√</div>
</div>
</body>
<script type="text/javascript">
var div1 = document.getElementsByClassName("radius");
div1[0].onclick = function() {
this.style.backgroundColor == "blue" ? this.style.backgroundColor = "pink" : this.style.backgroundColor = "blue";
}
</script>
</html>
赵志广
TA贡献53条经验 获得超17个赞
.alizi-radio-group{position:relative;display:inline-block;padding-left:34px;line-height:30px;padding-right:20px;}
.alizi-radio{position:absolute;left:0;top:0;width: 30px;}
.alizi-radio label{display:inline-block;cursor:pointer;margin-left: 0px;}
.alizi-radio input{opacity:0;position:absolute;left:0;top:3px;width: 25px;height: 25px;}
.alizi-radio input + label:after{display:inline-block;content:'';width:20px;height:20px;border:1px solid #ccc;border-radius:11px;cursor:pointer;vertical-align:middle}
.alizi-radio input:checked + label:after{background:#52d40b url(../images/icon-right.png) center no-repeat;background-size:16px;border-color:#52d40b}<span class="alizi-radio-group"> <span class="alizi-radio"><input id="ys0" name="ys" type="radio" value="未拆封iPhone 6s 16GB 金色" name="item_params" checked><label for="选择颜色0"></label></span> 未拆封iPhone 6s 16GB 金色</span> <span class="alizi-radio-group"> <span class="alizi-radio"><input id="ys1" name="ys" type="radio" value="未拆封iPhone 6s 16GB银色" name="item_params" ><label for="选择颜色1"></label></span> 未拆封iPhone 6s 16GB银色</span> <span class="alizi-radio-group"> <span class="alizi-radio"><input id="ys2" name="ys" type="radio" value="未拆封iPhone 6s 16GB玫瑰金色" name="item_params" ><label for="选择颜色2"></label></span> 未拆封iPhone 6s 16GB玫瑰金色</span> <span class="alizi-radio-group"> <span class="alizi-radio"><input id="ys3" name="ys" type="radio" value="未拆封iPhone 6s 16GB 深空灰色" name="item_params" ><label for="选择颜色3"></label></span> 未拆封iPhone 6s 16GB 深空灰色</span>
- 4 回答
- 1 关注
- 2303 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消