<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="jquery-3.3.1.min.js"></script>
</head>
<style>
.div1{
text-align: center
background: beige
width: 50px
height: 28px
border-radius: 14px
}
.span1{
/* margin-top: 7px*/ /* div的时候打开注释 */
background: #CCCCCC
width: 13px
height: 13px
display: inline-block
border-radius: 7px
}
.div2{
text-align: center
background: lawngreen
width: 50px
height: 28px
border-radius: 14px
}
.span2{
background: white
width: 13px
height: 13px
display: inline-block
border-radius: 7px
}
.hid1{
display: none
}
.hid2{
}
</style>
<body>
<!-- button的 -->
<button class="div1">
<span class="hid1">是</span>
<span class="span1"></span>
<span class="hid2">否</span>
</button>
<hr>
<hr>
<!-- div的 -->
<!-- <div class="div1">
<span class="hid1">是</span>
<span class="span1"></span>
<span class="hid2">否</span>
</div>-->
</body>
<script>
$(function(){
$(".div1").click(function(){
$(".span1").toggleClass("span2")
$(".div1").toggleClass("div2")
$(".hid1").toggle()
$(".hid2").toggle()
})
})
</script>
</html>
CSS:\x0d\x0a.box {width:500pxheight:200pxborder:1px solid #0000FF}\x0d\x0a.siteName{font-size:24pxfont-family:..（定义字体样式、大小等）}\x0d\x0a页面：\x0d\x0a\x0d\x0a\x0d\x0a欢迎光临某某某网站 \x0d\x0a\x0d\x0a\x0d\x0a应该就可以了。 回答于 2022-12-14表格的边框分为3个元素决定：table,th,td如果三种元素全部设置了border样式，那么会发现外层有2层border,里面的th与th，td与td,td与th之间的border也是有2层的，所以，在设置border之前最好先想好通过什么样的规则来展现boeder(因为方式很多，那么我们只能选择适合自己的-也就是用的习惯的)。另外，表格之间还有一个概念是表空间,可以通过给表格设置样式table{ border-collapse:collapse border-spacing:0}清除这些多余的空间，那么有了上面的准备工作之后，下面就开始border样式的设置--代码如下：
td,th{border-bottom: 1px solid #e3e3e3//xia下边框border-right:1px solid #e3e3e3//有边框}
