Maison >interface Web >tutoriel HTML >Un exemple de mise en œuvre du centrage mobile des divs contextuels HTML
Un exemple de mise en œuvre du centrage mobile des divs contextuels HTML
- 高洛峰original
- 2017-03-07 11:08:291056parcourir
Cet article présente le popup html, le déplacement et le centrage. Le code de mise en œuvre détaillé est le suivant. Les amis intéressés ne devraient pas le manquer.
Le code est le suivant :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
/*弹出层的STYLE*/
html,body {height:100%; margin:0px; font-size:12px;}
.myp {
background-color: #ff6;
border: 1px solid #f90;
text-align: center;
line-height: 40px;
font-size: 12px;
font-weight: bold;
z-index:99;
width: 300px;
height: 120px;
left:50%;/*FF IE7*/
top: 50%;/*FF IE7*/
margin-left:-150px!important;/*FF IE7 该值为本身宽的一半 */
margin-top:-60px!important;/*FF IE7 该值为本身高的一半*/
margin-top:0px;
position:fixed!important;/*FF IE7*/
position:absolute;/*IE6*/
_top: expression(eval(document.compatMode &&
document.compatMode=='CSS1Compat') ?
documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/
}
.bg {
background-color: #ccc;
width: 100%;
height: 100%;
left:0;
top:0;/*FF IE7*/
filter:alpha(opacity=50);/*IE*/
opacity:0.5;/*FF*/
z-index:1;
position:fixed!important;/*FF IE7*/
position:absolute;/*IE6*/
_top: expression(eval(document.compatMode &&
document.compatMode=='CSS1Compat') ?
documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/
}
/*The END*/
</style>
<script type="text/javascript">
function showp(){
document.getElementById('popp').style.display='block';
document.getElementById('bg').style.display='block';
}
function closep(){
document.getElementById('popp').style.display='none';
document.getElementById('bg').style.display='none';
}
</script>
</head>
<body>
<p id="popp" class="myp" style="display:none;">标题<br/>你懂得<br/>
<a href="javascript:closep()">关闭窗口</a></p>
<p id="bg" class="bg" style="display:none;"></p>
<p style="padding-top: 20px;">
<input type="Submit" name="" value="显示层" onclick="javascript:showp()" />
</p>
</body>
</html>.
Joignez un code Le beau style
est le suivant :
<html>
<head><title></title>
<style>
.mesWindowTop {
font-size: 12px;
font-weight: bold;
text-align: left;
}
.mesWindowContent {
font-size: 12px;
}
.mesWindow {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #666666;
}
</style>
</head>
<body>
<p id="mesWindow" class="mesWindow" style="top: 180px; position: absolute; width: 600px; margin-left: -300px; left: 50%; z-index: 9999;"><p class="mesWindowTop"><table width="100%" height="100%"><tbody><tr><td>窗口标题</td><td style="width:1px;"><input type="button" value="关闭" class="close" title="关闭窗口" onclick="closeWindow();"></td></tr></tbody></table></p><p id="mesWindowContent" class="mesWindowContent"><p style="padding:20px 0 20px 0;text-align:center">消息正文</p></p><p class="mesWindowBottom"></p></p>
</body>
</html>Pour plus d'exemples de divs contextuels HTML permettant d'obtenir un centrage mobile, veuillez faire attention sur le site Web PHP chinois pour des articles connexes !
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Un exemple d'utilisation de href en HTML pour afficher une boîte de dialogue de téléchargement de fichier lorsque vous cliquez sur un lienArticle suivant：Un exemple d'utilisation de href en HTML pour afficher une boîte de dialogue de téléchargement de fichier lorsque vous cliquez sur un lien