原始圖片是這樣的我想修改成這樣的請大神幫幫忙？
4 回答
已采納
剛毅87
TA貢獻345條經(jīng)驗 獲得超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條經(jīng)驗 獲得超309個贊
我不會改 lable 的樣式,但是我可以以另一種方法實現(xiàn).代碼如下
<!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條經(jīng)驗 獲得超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>
添加回答
舉報
0/150
提交
取消