1、准备好需要用到的图标。
2、新建html文档。
3、书写hmtl代艨位雅剖码。<div class="gang" style="margin-left:0px;margin-top:0px;overflow:hidden;position:relative;*margin-top:0px;*top:0px;"><div class="grid" onselectstart='return false;' style="background-color:#FFFFFF; position: absolute; left:18px; top:18px; width:100%;height:2000px;"> </div><div class="hRule" style="width: 1920px;"></div><div class="vRule" style="height: 1200px;"></div><div class="vline1" style="height:1200px;"></div><div class="vline2" style="height:1200px;"></div></div><div id="BGmusic"><div id="Music"> <audio autoplay loop></audio></div><div id="MusicICO"> <div id="MusicPlay"><img src="images/play.png" width="16" height="16"></div> <div id="MusicStop"><img src="images/stop.png" width="16" height="16"></div></div></div><div><span id="clock"></span></div>
4、书写css代码。<style>html, body { width: 100%; marg足毂忍珩in: 0 auto; font-size: 12px; overflow: hidden; }#BGmusic { position: absolute; right: 30px; top: 30px; }#Music { position: absolute; overflow: hidden; height: 0px; width: 0px; }#MusicICO, #MusicPlay, #MusicStop { position: absolute; cursor: pointer; }#clock { font-family: "Microsoft Yahei", Tahoma, Helvetica, Arial, sans-serif; color: #333333; position: absolute; right: 0px; Bottom: 0px; }#copyright { font-family: "Verdana", Tahoma, Helvetica, Arial, sans-serif; color: #333333; position: absolute; left: 20px; Bottom: 0px; }a { color: #999999; text-decoration: none; }a:hover { color: #333333; text-decoration: none; }.ruler { background: rgba(255,255,255,1); color: #444; line-height: 14px; overflow: hidden; }.ruler > div { background: #444; }.hRule { position: absolute; width: 100%; height: 18px; left: 18px; top: 0px; background: url(../images/hRule.gif) left top no-repeat; }.vRule { position: absolute; min-height: 100%; width: 18px; left: 0px; top: 18px; background: url(../images/vRule.gif) left top no-repeat; }.grid { position: absolute; top: 0px; left: 0px; background: url(../images/bg.png); }</style>
5、代码整体结构。
6、查看效果。
