通过按钮点击实现css样式切换

2024-10-11 20:22:04

1、新建html文档。

4、书写css代码。.box01 .part .a1{ background:url(../images/芟鲠阻缒bg06.gif) no-repeat;}.box02{ width:718px; text-align:left;}.box02 .part{ width:100%; padding:15px 0; float:left; background:url(../images/bg02.gif) repeat-x left bottom;}.box02 .part .grp01{ width:101px; float:left; }.box02 .part .grp01 img{ width:75px; height:60px;}.box02 .part .grp02{float:left; padding-right:20px; width:325px; padding-top:5px;}.box02 .part .grp02 h4{ padding-bottom:3px;}.box02 .part .grp02 h4 a{ font-size:12px; color:#0045df; line-height:16px;}.box02 .part .grp02 h4 a:hover{ color:#ef9b11;}.box02 .part .grp02 h5{ font-size:12px; font-weight:normal; color:#666;}.box02 .part .grp03{float:left; padding-right:20px; width:87px;padding-top:12px;}.box02 .part .grp03 h6{ font-size:12px; color:#ff3300;}.box02 .part .grp03 b{font-size:12px; font-weight:normal; color:#666;}.box02 .part .grp04{float:left;width:78px; padding-top:20px;}.box02 .part .grp05{float:left; padding-left:20px; background:url(../images/bg03.gif) no-repeat left 18px;width:55px;padding-top:20px;}

6、代码整体结构。