html+css实现ps标尺网页框架特效

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

  <div id="MusicStop"><img src="images/stop.png

 </div>

</div>

<div><span id="clock"></span></div>

4、书写css代码。

<style>

html, body { width: 100%; margin: 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、查看效果。