Closed. This question needs details or clarity。它当前不接受答案。
想改善这个问题吗?添加详细信息并通过editing this post阐明问题。
5年前关闭。
我有以下代码,如果包含在CSS中,我认为它更容易阅读。不知道如何。需要帮忙。
而且我尝试了以下操作,但由于我不知道如何区分div和
想改善这个问题吗?添加详细信息并通过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/