DIV+CSS+JS 变灰弹出层_javascript技巧_脚本之家

作者:联系我们

变化层居中的对话框效果演示

生龙活虎对时候,大家须要使独自据有风华正茂行的八个div能够在黄金年代行协调共处,技术方案差不离有三种:
1.为两个div均添加display:line-block属性
2.将四个div都设成浮动的要素
那篇著作将深远研讨二者的区分与关系,别的,还将会带给大家后生可畏种垂直居中的新措施
我们将以上边包车型客车代码作为示范代码,那代表每当大家谈谈八个新主题素材时就要把代码苏醒成上面那一个样子:
CSS样式:

转移层居中的对话框效果演示

<style>
    .myContainer{
         width: 500px; 
         margin: 20px auto; 
         background-color: gray; 
         overflow: hidden; 
    }
     .div1{
         width: 200px;
         height: 100px;
         background-color: red; 
    } 
    .div2{
         width: 200px;
         height: 100px;
         background-color: aqua; } 
</style>

变动层居中的效果

html内容:

点此演示效果

 <div class="myContainer"> 
     <div class="div1"></div> 
     <div class="div2"></div>
 </div>
 <div class="myContainer"> 
     <div class="div1"></div> 
     <div class="div2"></div>
</div>

[Ctrl+A 全选 注:如需引进外界Js需刷新能力实行]

运营后的功能:

图片 1

图片 2

本文由杏彩发布,转载请注明来源

关键词: