搜索:
首页 >> 网页设计 >> CSS/HTML >> 很无聊的一个找碴游戏

很无聊的一个找碴游戏

2008-7-2 作者:林小志 来源:林小志blog 投递文章

 家里没网络,实在无聊,玩游戏都没味道,只好玩CSS。

这个东西实在没什么技术含量在里面,纯属打发时间。

简单说明:一张图片放在底层,上面覆盖一个操作范围区域的层,然后再叠加5个a的位置,这样基本的就完成了。如果会JS的话,可以做得更完美,可惜不会。努力学习!

CSS内容:

* {margin:0;padding:0;}
body {background:#000000;}
.wrapper {width:828px;height:502px;margin:10px auto;padding:5px;border:1px solid #999999;background:url(pic.jpg) 5px 5px no-repeat;}
.opArea {float:right;width:407px;height:502px;position:relative;cursor:pointer;z-index:99;}
a {width:50px;height:50px;display:block;position:absolute;}
    .d1 {top:147px;left:51px;}
    .d2 {top:150px;right:121px;}
    .d3 {width:100px;height:40px;right:90px;bottom:156px;}
    .d4 {width:110px;top:53px;right:25px;}
    .d5 {right:55px;bottom:227px;}
.fRight {background:url(right.gif) center center no-repeat;}

XHTML内容:

<div class="wrapper">
    <div class="opArea">
        <map id="fd">
            <a href="##" class="d1" onclick="this.className='fRight d1'"></a>
            <a href="##" class="d2" onclick="this.className='fRight d2'"></a>
            <a href="##" class="d3" onclick="this.className='fRight d3'"></a>
            <a href="##" class="d4" onclick="this.className='fRight d4'"></a>
            <a href="##" class="d5" onclick="this.className='fRight d5'"></a>
        </map>
    </div>
</div>

演示地址:find-fault.htm (2.49 KB)

Tags:游戏  css  找碴 
相关文章
手机版 CSS/HTML Asp之家 Aspxhome.com
闽ICP备06017341号