<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Test </TITLE>
<style type="text/css">
<!--
html,body {
height:100%; margin: 0px; font-size: 12px;
font-family: FixedSys;
}
.mydiv {
background-color: lightblue; border: 1px solid blue;
text-align: center;
line-height: 20px;
font-size: 12px;
font-weight: bold;
z-index: 999;
width: 200px;
height: 120px;
left: 50%;
top: 50%;
margin-left: 150px!important;
margin-top: -60px!important;
margin-top: 0px;
position: fixed!important;
position: absolute;
}
.bg,.popIframe {
background-color: #666; display: none;
width: 100%;
height: 100%;
left: 0;
top: 0;
filter: apha(opacity=50);
opacity: 0.5;
z-index: 1;
position:fixed!important;
position: absolute;
}
.popIframe {
filter: alpha(opacity=0);
opacity:0;
}
-->
</style>
<SCRIPT LANGUAGE="JavaScript">
<!--
function showDiv() {
document.getElementById('popDiv').style.display = 'block';
document.getElementById('popIframe').style.display = 'block';
document.getElementById('bg').style.display = 'block';
}
function closeDiv() {
document.getElementById('popDiv').style.display = 'none';
document.getElementById('popIframe').style.display = 'none';
document.getElementById('bg').style.display = 'none';
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<div class="mydiv" id='popDiv' style="display: none">
Hello world!<br/>
<a href="javascript:closeDiv();">Close Div</a></div>
<div id="bg" class="bg" style="display: none;"></div>
<a href="javascript:showDiv();">Show Div<//a>
<iframe id="popIframe" class="popIframe" frameborder="0"></iframe>
</BODY>
</HTML>
分享到：
相关推荐
css文件 */ body { margin: 0px; padding: 0px; background: #FFFFFF url(images/bg01.jpg) repeat left top; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 13px; color: #797979; } h1,...
问题解说: ... <div class=first> </div> </div> //less .container { width: 100vw; height: 100%; } .container .first { width: 100vw; height: 100vh; animation: bgmove 10s infinite; }
<div class="first"></div> </div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> Logging in... </div> CSS3仿Skype圆点旋转加载动画特效，纯CSS3实现登录界面...
实现效果 html <div class=container> <h1 class=title>Dropdown Menu <a>First Menu <i class=icon-arrow></i> <li><a>Home</a></li> <li><a>About Us</a></
<div id="freelance">CSS样式表单美化系列(1)</div> <form id="myForm" action="send.php" method="get" name="myForm"> <div id="form_box"> <div> <p> First Name: <input class="fieldclass" ...
css部分:编写的位置 1.内联样式 将样式编写到标签的style属性中 ;"> 这种样式只会对当前标签起作用，不能对样式进行复用，不方便后期维护，不推荐使用 2.内部样式表 将样式表编写到head中的style标签中 ...
例如：:first-letter - 首字母样式、:first-line - 首行样式。 6. 通配符选择器 通配符选择器用于选择所有匹配的样式。例如：div *{ display:none;} <div><div></div><span></span></div>。 7. 继承样式和结合符 ...
<div id="first" class="buttonBox"> <button>Hover One <div class="border"></div> <div class="border"></div> </div> <div id="second" class="buttonBox"> <button>Hover Two <div class=...
#id') id选择器 2) $('.class') css选择器,class类名 3) $('element') 标签选择器，例如p,h1,div ... 5) $('sele1,sele2') 用‘,'逗号隔开可以...10） $('div:first') 过滤选择器,:first用:与父级元
<li class="first"><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">News</a></li> <li><a href="#">Products</a></li> <li><a href="#">Services</a></li> <li><a href="#">...
Whether you’re building a personal blog or a corporate website, there’s a lot more to web design than div’s and CSS selectors, but what do you really need to know? With this book, you’ll learn the...
link rel="stylesheet" href="css/style.css?3.1.64"> </head> <body 100px;"> <!--价格筛选条开始--> <div class="price-dd-choose"> <div id="price-range" class="price-range"> ...
HTML5/CSS 餐厅选择器 第一关 plate plate元素 第二关 bento bento元素 第三关 #fancy id为fancy的元素 第四关 plate apple plate祖先元素下的apple后代元素 第五关 #fancy pickle id为#fancy的祖先元素下的...
1, 和Sizzle的兼容Q(expr, context, result, seed)Q.matches支持Sizzle特别的setFilter伪类如:even,:first,:last,:lt...支持复杂的:not和:has选择器（和sizzle一样）2, 结果的正确性Sizzle在某些选择器上由于查询...
CSS是层叠样式表（Cascading Style Sheets）用来定义网页的显示效果。可以解决html代码对样式定义的重复，提高了后期样式代码的可维护性，并增强了网页的显示效果功能。 简单一句话：CSS将网页内容和显示样式进行...
:first-child伪类用于匹配一...复制代码代码如下: body>div:first-child{ background:#30C !important; } 注意：div要是body下的第一个节点，前面不能有任何元素。 兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera
* 子元素选择器：div#container > ul，选择子元素 * 后续兄弟选择器：X ~ Y，选择 X 元素后的所有 Y 元素 * 属性选择器： + 根据属性名选择元素：[属性名]{ } + 属性名、属性值完全匹配：[属性名=属性值]{ } + ...