Closed. This question needs details or clarity。它当前不接受答案。
                            
                        
                    
                
                            
                                
                
                        
                            
                        
                    
                        
                            想改善这个问题吗?添加详细信息并通过editing this post阐明问题。
                        
                        5年前关闭。
                                                                                            
                
        
我有以下代码,如果包含在CSS中,我认为它更容易阅读。不知道如何。需要帮忙。

<div id="prepage" style="position: absolute; left:0px; top:0px; background: rgba(204, 204, 204, 0.5); height:100%; width:100%; display:none; opacity:1.5">
        <table width="600px" height="100%" cellpadding="0" cellspacing="0" border="0" align="center">
            <tr>
                <td align="right" valign="middle">
                    <div style="width:600px; position:relative;">
                        <div id="closeIcon" style="position:absolute; right:10px; top:0px; height:32px; width:32px; background-image: url('fancybox_sprite.png');background-position: 0 0px; cursor:pointer; display:none" onClick="hide();" onMouseOver="showIcon();"></div>
                        <div id="leftIcon" style="position:absolute; left:130px; top:150px; height:32px; width:32px; background-image: url('fancybox_sprite.png');background-position: 0 -36px; cursor:pointer; display:none" onClick="prevPic();" onMouseOver="showIcon();"></div>
                        <img id="largeImg" name="largeImg" src="Original/01.jpg" border="0" style="width:480px; height:300px;" onMouseOver="showIcon();" onMouseOut="hideIcon();">
                        <div id="rightIcon" style="position:absolute; right:10px; top:150px; height:32px; width:32px; background-image: url('fancybox_sprite.png'); background-position: 0 -72px; cursor:pointer; display:none" onClick="nextPic();" onMouseOver="showIcon();"></div>
                    </div>
                </td>
            </tr>
        </table>
    </div>


而且我尝试了以下操作,但由于我不知道如何区分div和

        .large div div{
            position:absolute;
            right:10px;
            top:0px;
            height:32px;
            width:32px;
            background-image: url('fancybox_sprite.png');
            background-position: 0 0px;
            cursor:pointer;
            display:none;
        }
        .large div div{
            position:absolute;
            left:130px;
            top:150px;
            height:32px;
            width:32px;
            background-image: url('fancybox_sprite.png');
            background-position: 0 -36px;
            cursor:pointer;
            display:none;
        }
        .large div div{
            position:absolute;
            right:10px;
            top:150px;
            height:32px;
            width:32px;
            background-image: url('fancybox_sprite.png');
            background-position: 0 -72px;
            cursor:pointer;
            display:none;
        }

最佳答案

像这样

<div id="prepage">
 <table width="600px" height="100%" cellpadding="0" cellspacing="0" border="0" align="center">
  <tr>
   <td align="right" valign="middle">
    <div id="outerDiv">
     <div id="closeIcon" onClick="hide();" onMouseOver="showIcon();"></div>
     <div id="leftIcon" onClick="prevPic();" onMouseOver="showIcon();"></div>
     <img id="largeImg" name="largeImg" src="Original/01.jpg" border="0" onMouseOver="showIcon();" onMouseOut="hideIcon();">
     <div id="rightIcon" onClick="nextPic();" onMouseOver="showIcon();"></div>
    </div>
   </td>
  </tr>
 </table>
</div>

 <style>

    #outerDiv {
        width:600px;
        position:relative;
    }

    #prepage {
        position: absolute;
        left:0px;
        top:0px;
        background: rgba(204, 204, 204, 0.5);
        height:100%;
        width:100%;
        display:none;
        opacity:1.5;
    }

    #closeIcon {
        position:absolute;
        right:10px;
        top:0px;
        height:32px;
        width:32px;
        background-image: url('fancybox_sprite.png');
        background-position: 0 0px;
        cursor:pointer; display:none;
    }

    #leftIcon {
        position:absolute;
        left:130px;
        top:150px;
        height:32px;
        width:32px;
        background-image: url('fancybox_sprite.png');
        background-position: 0 -36px;
        cursor:pointer;
        display:none;
    }

    #largeImg {
        width:480px;
        height:300px;
    }

    #rightIcon {
        position:absolute;
        right:10px;
        top:150px;
        height:32px;
        width:32px;
        background-image: url('fancybox_sprite.png');
        background-position: 0 -72px;
        cursor:pointer;
        display:none;
    }

    </style>

关于javascript - 如何创建CSS? ,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/23233867/

10-11 23:26
查看更多