问题描述
作为一名c#开发人员,我发现很难用css类来准备一些网页。对于所有那些对我来说很裸露的专家来说,这可能太容易了。我有一个包含一些css属性的包装div。点击一个按钮我必须显示一个过度的消息。
< div class =dvLanding>
< div class =popupArea>
< span class =VoteOnce>您只能投一次。< / span> < a style =vertical-align:top>
< img alt =closesrc =../../ Images / error1-exit-button.png/>< / a>< / div>< / div>
< / div>
我的css类。
.dvVoteWrapper
{
background-color:#949494;
不透明度:0.5;
filter:Alpha(opacity = 50);
display:none;
width:1024px;
height:768px;
位置:绝对;
}
.popupArea
{
width:100%;
身高:100%;
位置:绝对;
top:0;
剩下:0;
}
.dvLanding
{
background-image:url(/Images/screen1-bg-logos.jpg);
背景重复:不重复;
位置:绝对;
宽度:100%;
身高:100%;
}
.VoteOnce
{
font-family:Calibri regular;
font-size:24pt;
background-image:url(/Images/error1-vote-once-bg.png);
背景重复:不重复;
width:288px;
height:74px;
颜色:#000000;
}
我正在移除 display:none
属性与jquery。在应用这些课程时,它不会覆盖整个页面并且看起来扭曲。善意建议如何做到这一点。为了更好的理解
这是另一个
HTML:
< div class =dvLanding>
< div class =dvVolunter>< / div>
< div class =dvVote>
< br />
< br />
< / div>
< div class =dvVoteWrapper>< / div>
< / div>
< div class =popupArea>
< span class =VoteOnce>您只能投一次。
< a class =closeButton>
< / a>
< / span>
< / div>
CSS:
.dvLanding {
background-image:url(http://lorempixel.com/800/600);
位置:绝对;
宽度:100%;
身高:100%;
不透明度:0.5;
}
.popupArea {
background-color:yellow;
位置:绝对;
top:50%;
剩下:50%;
margin-top:-30px;
margin-left:-180px;
}
.closeButton {
vertical-align:top;
font-size:10pt;
}
.VoteOnce {
font-family:Calibri regular;
font-size:24pt;
}
进行测试。
Being a c# developer I am a finding hard to play with css classes to prepare some web pages. It may be too easy for all the experts so bare with me.
I have a wrapper div that has some css property set. on click of a button i have to show an overly with some message.
<div class="dvLanding">
<div class="popupArea">
<span class="VoteOnce">You can only vote once.</span> <a style="vertical-align: top">
<img alt="close" src="../../Images/error1-exit-button.png" /></a></div></div>
</div>
my css classes.
.dvVoteWrapper
{
background-color: #949494;
opacity: 0.5;
filter: Alpha(opacity=50);
display:none;
width: 1024px;
height: 768px;
position: absolute;
}
.popupArea
{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.dvLanding
{
background-image: url(/Images/screen1-bg-logos.jpg);
background-repeat: no-repeat;
position: absolute;
width: 100%;
height: 100%;
}
.VoteOnce
{
font-family: Calibri regular;
font-size: 24pt;
background-image: url(/Images/error1-vote-once-bg.png);
background-repeat: no-repeat;
width:288px;
height:74px;
color: #000000;
}
i am removing the display:none
attribute with jquery. When applying this classes it is not covering the full page and looking distorted. kindly suggest how to do this. for better understanding i have attached the screen shots
Here's another one
HTML:
<div class="dvLanding">
<div class="dvVolunter"></div>
<div class="dvVote">
<br />
<br />
</div>
<div class="dvVoteWrapper"></div>
</div>
<div class="popupArea">
<span class="VoteOnce">You can only vote once.
<a class="closeButton">
<img alt="close" src="../../Images/error1-exit-button.png" />
</a>
</span>
</div>
CSS:
.dvLanding {
background-image: url(http://lorempixel.com/800/600);
position: absolute;
width: 100%;
height: 100%;
opacity: 0.5;
}
.popupArea {
background-color: yellow;
position: absolute;
top: 50%;
left: 50%;
margin-top: -30px;
margin-left: -180px;
}
.closeButton {
vertical-align: top;
font-size: 10pt;
}
.VoteOnce {
font-family: Calibri regular;
font-size: 24pt;
}
JSFiddle for testing.
这篇关于用css覆盖另一个div的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!