/* 选项卡按钮样式 */ .tabcontent { text-align: center; /* 使“日期”居中显示 */ } .tab { overflow: hidden; border: 1px solid #ff69b4; /* 粉色边框 */ background-color: #ffc0cb; /* 粉色背景 */ } .tab button { background-color: inherit; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: 0.3s; color: #000; /* 黑色文字 */ } .tab button:hover { background-color: #ff69b4; /* 粉色背景 */ } .tab button.active { background-color: #ff1493; /* 深粉色背景 */ color: #fff; /* 白色文字 */ } /* 添加选项卡按钮样式 */ .addTab { background-color: #ff69b4; /* 粉色背景 */ color: #fff; /* 白色文字 */ border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: 0.3s; } .addTab:hover { background-color: #ff1493; /* 深粉色背景 */ } /* 选项卡内容样式 */ .tabcontent { display: none; padding: 6px 12px; border: 1px solid #ff69b4; /* 粉色边框 */ border-top: none; background-color: #fff; /* 白色背景 */ } /* 删除按钮样式 */ .removeTab { background-color: #ff69b4; /* 粉色背景 */ color: #fff; /* 白色文字 */ border: none; outline: none; cursor: pointer; padding: 5px 10px; transition: 0.3s; font-size: 12px; /* 调整字体大小 */ } .removeTab:hover { background-color: #ff1493; /* 深粉色背景 */ } img{height: auto; width: auto\9; width:28%;} .cldBody { background: #f7f7f7; width: 420px; margin: 10px auto; } .cldBody .top { height: 60px; line-height: 60px; text-align: center; position: relative; } #topDate { font-size: 24px; } #week td { font-size: 15px; } td { width: 60px; height: 60px; line-height: 60px; text-align: center; font-size: 20px; } #tbody td:hover { background: #ededed; cursor: pointer; } .curDate { color: red; font-weight: bold; } #left, #right { width: 60px; height: 60px; position: absolute; cursor: pointer; } #left { left: 0; } #right { right: 0; } #left:hover, #right:hover { background-color: rgba(30, 30, 30, 0.2); }