书写css代码。body { margin: 0; padding: 0; background: #f9f9f9; }p { margin: 0; padding: 0; clear: both; color: #666; font-family: Georgia, serif; font-size: 11px; line-height: 18px; }a:link, a:visited, a:hover, a:active { text-decoration: none; }.clearer { clear: both; }small { font-family: Arial, sans-serif; font-variant: small-caps; color: #809dba; }h1 { font-family: Georgia, serif; font-size: 16px; font-weight: normal; color: #666; border-bottom: 1px solid #343434; margin-bottom: 15px; padding-bottom: 8px; margin-top: 20px; }#content { width: 570px; padding: 30px; border: 1px solid #e4e4e4; margin: 0 auto; background: #fff; margin-top: 100px; margin-bottom: 100px; -border-radius: 5px; -moz-border-radius: 5px; }#column1 { float: left; width: 250px; margin: 0px; padding: 0px; }#column2 { padding: 0px; margin-left: 250px; margin-right: 0px; }.button { width: 570px; height: 64px; display: block; background-image: url(../images/downloadbutton.png); background-position: top; }.button:hover { width: 570px; background-position: bottom; height: 64px; background-image: url(../images/downloadbutton.png) no repeat; }.otherbutton { clear: both; position: relative; display: block; height: 64px; width: 570px; background: url(../images/contact.png) no-repeat; background-position: 0 0; cursor: pointer; }.otherbutton span.hover { position: absolute; display: block; height: 64px; width: 570px; background: url(../images/contact.png) no-repeat; background-position: bottom; }.downloadbutton { float: left; width: 107px; height: 38px; display: block; background-image: url(../images/twobuttons.png); background-position: top right; }.downloadbutton span.hover { position: absolute; display: block; width: 107px; height: 38px; background-position: bottom right; background-image: url(../images/twobuttons.png); }.homebutton { float: left; width: 120px; height: 38px; display: block; background-image: url(../images/twobuttons.png); background-position: top left; }.homebutton span.hover { position: absolute; display: block; width: 120px; height: 38px; background-position: bottom left; background-image: url(../images/twobuttons.png); }.donatebutton { clear: both; position: relative; display: block; height: 128px; width: 128px; background: url(../images/donate.png) no-repeat; background-position: 0 0; cursor: pointer; }.donatebutton span.hover { position: absolute; display: block; height: 128px; width: 128px; background: url(../images/donate.png) no-repeat; background-position: bottom; }.donatebutton_al { display: block; height: 128px; width: 128px; background: url(../images/donate.png) no-repeat; background-position: 0 0; cursor: pointer; }.donatebutton_al:hover { height: 128px; width: 128px; background: url(../images/donate.png) no-repeat; background-position: bottom; }

书写并添加js代码。

代码整体结构。

查看效果。