左右固定顶部可收缩的全屏广告代

准备好需要用到的图标。

新建html文档。

书写hmtl代码。

书写css代码。body { background: #101010; color: #fff; font-family: 'Microsoft YaHei', 'Tahoma', 'SimSun'; font-size: 12px }a { color: #0096ff; outline: none }a:hover { text-decoration: underline }a:active { outline: none }img { border: none; }.content { margin: 0 auto; background: #202020; padding: 15px 10px; width: 982px }.ad_left, .ad_right { display: block; position: fixed; width: 445px; height: 865px; top: 0; text-decoration: none; outline: 0 }.ad_left { margin: 0 0 0 -455px }.ad_right { margin: 0 0 0 992px }.ad_midd { width: 1002px; margin: 0 auto; overflow: hidden; height: 300px; position: relative; clear: both }.contentad { width: 982px; padding: 0 10px; margin: 0 auto }.btm { margin: 30px auto }.btm p { font: normal 12px/24px 'Microsoft YaHei'; text-align: center }

书写并添加js代码。‍

代码整体结构。

查看效果。